大屏数据显示优化
大屏数据的页面里面包含了一些3D地图和世界航班趋势图,反应上来有个问题,就是动画比较卡顿。
原因无外乎两个:
1、电脑配置比较低
2、页面计算量较大
针对第二点的优化方案如下
jquery动画去除
图形渐变使用了jquery动画,其中还会夹杂一些Dom操作。这些是有必要去除的,所以把这些动画全部换成了css3动画。
图片压缩
有些风景图片需要展示,这些照片都是高清的。清晰度太高的图片,浏览器处理起来也是有很明显的卡顿,尤其是图片切换到时候。而大屏像素很低,高清的图片也显示的像素点很大,看起来非常模糊,所以并没有必要使用高清的。把图片质量降低一些,切换卡顿就不见了,显示却并没有特别的变化。
echarts图表优化
有两个比较大的图表在切换,当一个图片显示的时候,可以先把另一个销毁,这样就少了一个图表动画在运行。
做了以上工作,刷新一下感觉好了点,卡顿好多了。
但是,我们太天真,当页面运行时间一长的时候,卡顿还是会出现,所以。。。
刷新大法好!!!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。