请教WEB大屏页面（含echarts图表和echarts-x3D地图）显示时局部闪烁的问题?

TomBugs 2017-07-13 04:57:30

大屏的分辨率是9520×2304（7x3个屏幕拼接的，每个屏幕是1360×768），开发时也是按这个比例布局的，调试时放在谷歌浏览器chrome上（版本从55-60）发现有问题，而在火狐Firefox上正常。由于其他原因，使用环境最好是chrome。

闪烁的具体现象是：页面加载完后，元素的整体样式出来，但部分矩形区域没有绘制完毕，背景图片加载时经常会有右下角一部分为白色矩形区域也未绘制。这些矩形区域无论背景是否绘制上，应该显示的画面像素就会出现不稳定的闪烁情况。感觉浏览器绘图的时候有种力不从心的感觉，貌似就差这点劲了！

尝试：
1，最早是在页面增加了几个图片轮播和动态图后发现的，去掉这些效果和动图基本正常但随着页面结构的复杂和图表的增多，问题也越来越严重。
2，由于当前页面有echars-x的3D地球图形，考虑到时浏览器渲染负担太重，发现当缩小3D图形区域时问题会减轻。
3，去除背景图片改用纯色后，问题会减轻。
4，缩小浏览器窗口，也就降低了页面显示的分辨率，这样问题也会减轻。
5，考虑到同时加载的图表比较多，数据量大，将闪烁比较严重的页面和其他页面分离出来，单独打开，发现闪烁情况的区域有变化，但是并没有明显减轻。
6，修改浏览器中有关webgl的选项，无改善。
7，修改显卡中3d渲染部分有关选项，无改善。
8，据说widows分辨率超过8000像素宽度后，硬件加速会失效，导致各种问题，比如系统运行比较卡。准备将单个屏幕分辨率降低到1280×720，这样整个宽度是8960，但是显卡不能自己调，正在等厂家给配置文件。如果再低的话，单屏的分辨率恐怕不能达到理想状态而显示发虚。

总之，可能因为WebKit浏览器内核的某些内部渲染机制没搞明白，导致找不到问题的核心所在。在此向各位大神求教，谢谢！

...全文