前端性能优化(五)为啥echarts渲染静态数据也会占用很高的CPU

前言

本文没有太多技术细节,写一些算是常识的东西。

背景介绍

接前一篇 前端性能优化(四)okcoin报价密度性能优化及工作机会推荐(纯javascript高频数据处理性能优化),还是这次优化。

正文

有发现页面在没有任何数据推送的时候依然占用了百分之七八的CPU。

echarts占用资源多是出了名的,没想到可以这样多。细细研究是zrender(echarts使用的渲染引擎)中requestAnimationFrame在不停的刷。

做了一个简单的例子,如下。

1
2
3
4
function step () {
requestAnimationFrame(step)
}
requestAnimationFrame(step)

这样几行代码,完全空白的页面占用也会占用5%的CPU。

zrender一秒钟重绘60次(屏幕刷新率),这个对于用echarts做动画是很棒的,会让人觉得很流畅。但是我们只是用它做个分时图,没动画,需要的是省点CPU。查了一下echarts文档并没有这样的配置。查了一下echarts代码,果然没有。后来就自己fork了echarts和zrender做了一下修改,如果想看修改了什么可以在github上搜okfe。

总结

2013年的时候(那时候我还年轻)第一次看到requestAnimationFrame觉得这个东西真的很棒,但是和我没关系了,因为我不喜欢做动画。现在看来那个时候真的是年轻,这不就和我扯上关系了,还是以这种方式。动画虽好,但是影响到正常业务就不好了,大家做好取舍。

另外,在大智慧的工作经验告诉我一个事实,大部分前端框架或者UI库提供的组件性能都很难支撑频繁更新的交易行情,要想性能好需要自己写。比如阿里某UI库实现表格是基于table,如果你用这个表格显示频繁更新的数据想来性能不会太好。

推荐文章