浏览器同时渲染多个高频率更新图表问题分析及解决方案

需求点：一个页面同时渲染十余个刷新频率为100ms的图表

问题分析

首先，我们知道根据浏览器运行原理（不知道可以参考-浏览器运行原理），渲染进程是无法实现如此多图表同时高频率渲染的。造成的后果就是，1. 后续图表渲染视觉上会越来越慢 2. 页面操作会严重卡顿（因为渲染进程将主进程的资源占用了）
解决方法就很明显了，我们无法修改浏览器的资源分配策略，只能从图表渲染出发。

解决方案

限制渲染数量

如果无法减少同时渲染的图表数量，那么可以减少图表展示的数据量。比如将其限制在100个点，这时浏览器只需要处理着100个点就行。

let charts_data = [] // 展示数据
push_data_to_charts(item){
	if(charts_data.length > 100)
		charts_data.shift()
	charts_data.push(item)
}

取消图表动画样式

图表插件为了让图表看着更流畅更美观，会添加各种效果（如动画）取消会提高渲染效率。

如echarts在options里面添加
animation: false

局部渲染

一段时间暂时不会进行变动的部分不进行渲染。

如echarts提供了large属性，其原理就是局部渲染