本文介绍可视化页面性能优化的常见问题及解决方法。
影响可视化页面加载的常见因素有哪些？
电脑硬件配置。例如显卡、cpu、内存这三个方面。
网络速度。
可视化应用使用的静态资源。例如gif动图、svg图片和文件等。
组件配置数据接口的响应速度以及加载的数据量。
可视化应用使用到的组件数量、种类和版本是否为老版本。
在可视化应用中网络以及电脑配置影响较大，其次是静态资源以及数据接口响应时长。
可视化应用中自定义组件引入第三方库的种类和版本是否保持一致。
机器配置影响情况。
一般页面加载多久是合理的？
浏览器页面加载时间与内容有关，在可视化页面中，如果想像普通网页一样，优化到5秒之内打开是比较困难的。通常可视化应用为了丰富展示内容使用的组件数量都会比较多，会影响页面加载速度，该问题和使用哪种产品没有关系。
常见的页面性能排查手段有哪些？
前置条件
检查电脑配置情况，建议您使用电脑的CPU配置不低于i5-6500，显卡配置不低于GTX960，内存不低于8GB。具体配置需要根据实际可视化应用的情况，如分辨率大小以及是否有用三维城市构建器组件来确定。
检查网络速度情况，建议您使用的网络速度高于100Mb/s。
排查方法：
Network排查：打开浏览器控制台，找到network页签选项，键盘按下ctrl+r强制刷新页面。观察各个资源的请求时长情况，以及dom渲染所需要的时间。
当通过DataV服务端发起的数据接口查询时，在network请求中，预览页请求名称为0，发布页请求名称为可视化应用ID。
说明如果使用DataV服务端请求数据，会有请求时长10s的限制。当您看到数据接口请求时长在8至9s时间左右时，多半是部分组件的接口响应速度太慢导致请求超时，您可以查看具体请求的response信息，根据是否提示timeout，找到对应的组件ID，在图层列表中进行搜索来判断是哪个组件接口影响了数据加载。
Performance排查：打开浏览器控制台，找到Performance页签选项，键盘按下快捷键ctrl+e或者单击刷新图标，进入性能监控页面，排查具体请求耗时情况。
页面性能优化手段有哪些？
推荐使用配置相对较高的电脑以及高速网络访问。
检查使用到的图片或者视频资源是否过大，如果过大，您可以考虑更换其它格式，如图片尽量使用webp或者webm格式，避免使用gif。您也可以使用OSS地址来提高访问速度。
说明对于视频，推荐您使用.webm的视频格式，如果是.mp4的视频格式，可以将其转换为.webm的格式。相同分辨率下.webm格式的加载速度比.mp4更快。
用chrome浏览器访问chrome://gpu，查看相应配置的硬件加速状态是否为生效状态。
检查组件数据接口是否响应过慢。
排查数据接口返回的数据量是否较大，大数据量会影响组件渲染时间，您可以考虑使用条件筛选的方式来筛选查询结果，减少数据的返回量。
检查是否存在多余组件，如果有多余组件或者没有用到的组件建议删除。
检查windows控制面板的显示设置是否为100%。
检查在一个可视化应用中是否有使用了自定义组件且自定义组件中引入的依赖库版本、种类是否都为同一种。同时控制引入的js大小。例如echarts.js用echarts.min.js去引入。
检查是否使用了老版本组件。建议将组件均更新为最新版本，并且在更新组件前复制一份可视化应用作为备份。
性能优化常见问题
浏览器如何加载一个页面？
浏览器解析
浏览器通过页面请求进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS和Images 等）。
HTML文件加载后，开始构建DOM Tree（DOM树）。
CSS样式文件加载后，开始解析和构建CSS Rule Tree。
Javascript脚本文件加载后， 通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。
浏览器渲染
浏览器引擎通过CSS Rule Tree构建Rendering Tree（渲染树）。
布局阶段：在屏幕上绘制渲染树中所有节点的几何属性，如位置，宽高和大小等，该过程称为Flow或Layout。
绘制元素：绘制所有节点的可视属性。
合并渲染层：把以上绘制的所有图层（类似于PhotoShop中的“图层”）合并，输出一张图片。