Demo 地址

先上 demo 地址

https://codepen.io/firstblood…

我的项目背景

随着 面向领导编程 越来越深入人心, 看板 我的项目想必是每个前端开发专家的必修之路

产品经理 张三 要求前端开发专家 红盾 做一个由 1000个图表定时刷新 的公司最新的财务收入状况

红盾 在 chrome 上一顿操作猛如虎,没两三天就把我的项目搞定了交付给产品经理 张三.

无并发管制

让咱们来看看 红盾 此时大抵的代码状况

<template>
  <div class="app-container">
    <div class="charts">
      <div v-for="item in domList" :id="item" :key="item" class="chart" />
    </div>
  </div>
</template>

<script>
const echarts = require("echarts");
const chartNum = 1000; // 图表数量
const chartIntervalTime = 2000; // 图表定时渲染毫秒数

export default {
  data() {
    return {
      domList: [],
      chartObjs: {},
      chartData: [150, 230, 224, 218, 135, 147, 260],
    };
  },
  mounted() {
    // 创立echart并绘图
    this.createChart();
    // 隔3秒更新图表数据并渲染
    this.intervalChartData(chartIntervalTime);
  },
  methods: {
    // 创立echart并绘图
    async createChart() {
      for (let i = 1; i <= chartNum; i++) {
        this.domList.push("chart" + i);
      }
      this.$nextTick(this.renderChartList);
    },
    async renderChartList() {
      this.domList.forEach((dom) => this.initChart(dom));
    },
    // 隔3秒更新图表数据并渲染
    intervalChartData(s) {
      setInterval(() => {
        this.renderChartList();
      }, s);
    },
    // 初始化图表
    initChart(domId) {
      if (!this.chartObjs[domId]) {
        this.chartObjs[domId] = echarts.init(document.getElementById(domId));
      }
      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.chartData,
            type: "line",
          },
        ],
      };
      this.chartObjs[domId].clear();
      this.chartObjs[domId].setOption(option);
    },
  },
};
</script>

<style scoped>
.chart {
  float: left;
  width: 360px;
  height: 300px;
  margin: 10px;
  border: 2px solid #ff9900;
}
</style>

后果 张三 不按套路出牌, 在电视机上偷偷安了个浏览器(性能极差),而后输出地址 xxx.com (自行脑补)…

间接把浏览器给淦奔溃了…没错, 红盾 此时的心田

这时候他想起了后端大佬 老黄,老黄给了他一个思路 管制并发

实现管制并发

实现并发

首先咱们来实现一个管制并发函数

想间接进入主题的同学能够间接跳到 残缺代码 查看

/**
 * @params {Number} poolLimit -最大并发限度数
 * @params {Array} array -所有的并发申请|渲染数组
 * @params {Function} iteratorFn -对应执行的并发函数(承受 array 的每一项值)
 */
async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = [] // 所有执行中的 promises
  let executing = [] // 正在执行中的 promises
  for (const item of array) {
    //承受 iteratorFn 的返回值:Promise
    const p = Promise.resolve().then(() => iteratorFn(item))
    ret.push(p)
    // 如果执行的数组 大于等于 最大并发限度 那么咱们就要管制并发
    if (array.length >= poolLimit) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1))
      // p.then 返回的 一个Promise 咱们把它放到正在执行数组中,一旦执行完 便剔除对应的值
      executing.push(e)
      //外围代码:正在执行的 promises 数组 大于等于 `最大并发限度` 用.race 办法开释一个执行最快的
      if (executing.length >= poolLimit) await Promise.race(executing)
    }
  }
  //返回一个 Promise.all
  return Promise.all(ret)
}

革新 renderChartList 函数(外围)

async renderChartList() {
  // 这里的 MAX_CURRENT 之后能够自定义一个数字
  await asyncPool(MAX_CURRENT, this.domList, (dom) => {
 // 咱们在这里必须返回一个 promise 对应为 `并发函数` 的 `p` 变量
 return new Promise(async (resolve) => {
   const res = await this.initChart(dom);
   resolve(res);// 这一步之后, 对应执行 `并发函数` 的 p.then 剔除
 }).then((data) => {
   console.log(data);
   return data;
 });
  });
}

3.革新 initChart 函数

咱们必须保障一个图表渲染实现,再执行下一个渲染,此时咱们就须要监听 Echarts 的 finished 事件

initChart(domId) {
  // 咱们 把它革新成一个 promise 函数
  return new Promise((resolve) => {
    ...
    // 外围代码 监听 echarts 的 finished
    this.chartObjs[domId].on("finished", () => {
      resolve(domId);// 对应 上一步的 `const res = await this.initChart(dom);`
    });
  });
}

4.革新 intervalChartData 函数

咱们必须保障并发执行完所有的图表渲染,再进入下一个定时器逻辑
判断 executing的长度即可(此时应该把 executing 独立为全局变量)

intervalChartData(s) {
  setInterval(() => {
    if (executing.length > 0) return; // 还有正在执行的渲染 不反复增加
    this.renderChartList();
  }, s);
}

残缺代码

附上残缺代码

<template>
  <div class="app-container">
    <div class="charts">
      <div v-for="item in domList" :id="item" :key="item" class="chart" />
    </div>
  </div>
</template>

<script>
const echarts = require("echarts");

const chartNum = 1000; // 图表数量
const MAX_CURRENT = 50; // 图表最大渲染并发数
const chartIntervalTime = 2000; // 图表定时渲染毫秒数

let executing = [];
/**
 * @params {Number} poolLimit -最大并发限度数
 * @params {Array} array -所有的并发申请|渲染数组
 * @params {Function} iteratorFn -对应执行的并发函数(承受 array 的每一项值)
 */
async function asyncPool(poolLimit, array, iteratorFn) {
  const ret = []; // 所有执行中的 promises
  executing = []; // 正在执行中的 promises
  for (const item of array) {
    const p = Promise.resolve().then(() => iteratorFn(item));
    ret.push(p);
    if (array.length >= poolLimit) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= poolLimit) await Promise.race(executing);
    }
  }
  return Promise.all(ret);
}

export default {
  data() {
    return {
      domList: [],
      chartObjs: {},
      chartData: [150, 230, 224, 218, 135, 147, 260],
    };
  },
  mounted() {
    // 创立echart并绘图
    this.createChart();
    // 隔3秒更新图表数据并渲染
    this.intervalChartData(chartIntervalTime);
  },
  methods: {
    // 创立echart并绘图
    async createChart() {
      for (let i = 1; i <= chartNum; i++) {
        this.domList.push("chart" + i);
      }
      this.$nextTick(this.renderChartList);
    },
    async renderChartList() {
      const res = await asyncPool(MAX_CURRENT, this.domList, (i, arr) => {
        return new Promise(async (resolve) => {
          const res = await this.initChart(i);
          resolve(res);
        }).then((data) => {
          console.log(data);
          return data;
        });
      });
    },
    // 隔3秒更新图表数据并渲染
    intervalChartData(s) {
      setInterval(() => {
        if (executing.length > 0) return; // 还有正在执行的渲染 不反复增加
        this.renderChartList();
      }, s);
    },
    // 初始化图表
    initChart(domId) {
      return new Promise((resolve) => {
        if (!this.chartObjs[domId]) {
          this.chartObjs[domId] = echarts.init(document.getElementById(domId));
        }
        const option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.chartData,
              type: "line",
            },
          ],
        };
        this.chartObjs[domId].clear();
        this.chartObjs[domId].setOption(option);
        this.chartObjs[domId].on("finished", () => {
          resolve(domId);
        });
      });
    },
  },
};
</script>

<style scoped>
.chart {
  float: left;
  width: 360px;
  height: 300px;
  margin: 10px;
  border: 2px solid #ff9900;
}
</style>

小彩蛋

小彩蛋✌️, 红盾压服张三买了个高性能的电视机完满解决…

如有不对,欢送斧正🌟 感觉有帮忙,欢送三连🌟

关于echarts:我是如何控制1000-个-Echarts-实例同时渲染-最大并发的

Demo 地址

我的项目背景

无并发管制

实现管制并发

实现并发

残缺代码

小彩蛋

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于echarts:我是如何控制1000-个-Echarts-实例同时渲染-最大并发的

Demo 地址

我的项目背景

无并发管制

实现管制并发

实现并发

残缺代码

小彩蛋

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复