背景介绍
我其中一个项目中，我们遇到了网页崩溃，三维白屏，以及页面卡顿，等多个问题，下面我将介绍这些问题的测试思路以及解决方案
问题引入
首先我们应该明确什么是网页崩溃 什么是三维白屏 以及什么是页面卡顿
这样是网页崩溃
这样是三维白屏
而页面卡顿则是
在一定时间段内会有严重的掉帧现象
测试流程
网页崩溃
网页崩溃的原因大概率是因为内存溢出导致的崩溃，也有CPU过高导致的页面卡死，
我们应该先确定是因为内存还是CPU的原因。
可以在浏览器标签页的空白地方右键选择任务管理器查看当前页面的内存占用空间和CPU占有率，在这个项目上我们发现崩溃原因是因为内存在短时间之内不停的增长最终导致网页崩溃。
下面我们就应该开始确定问题，在大屏中主要分三维和二维，我们进行分开测试，分别测试二维，三维的内存增长，因为三维是嵌入到iframe所以三维应在iframe中进行测试，新建大屏分别对应三维和二维进行测试
在测试过程中我们发现三维和二维都有内存短时间增长的情况，这代表着二维图表和三维图表都有内存溢出的问题，分别找到开发人员进行debugger
三维白屏
三维白屏则是因为GPU的显存过大导致 我们可以通过windows的任务管理器进行处理，如果GPU的利用率一致在增长并在增长过程中三维白屏或者显存一直在100%最后三维白屏，所以我们应该关注三位中消耗性能的一些方面，比如孪生体的刷新功能，各种标记创建销毁是否释放资源等问题，优先解决三维的白屏问题，因为三维消耗的资源在整个系统消耗的资源中占比是最高的。
网页卡顿
网页卡顿问题除了用人眼进行观察还有要实际的数据支撑，一共有两个办法可以进行佐证
- 在浏览器的DevTools -> Sources -> Ctrl+Shift+P -> 输入FPS，观察网页的fps帧数，是否会有大幅度帧数变化
- 在浏览器的DevTools -> Performance -> 点击中间的圆点开始记录，如果你对这些数据不熟悉右键保存，交给开发看，记录期间一定要有卡顿情况的发生不然无法进行有效排查。
解决方案
二维
- 注意直播这种消耗资源的组件，因为播放器的原因在开发人员编写过程中很容易出现内存溢出的问题。
- 注意需要setInterval()定时器的地方，记得clearInterval()之后要将变量设置为null
- echarts的动画十分消耗性能，对于多个大屏多个echarts下不要使用echarts的加载动画。
- 大屏初始化加载是将所有组件全部加载，发现任何问题应从Performance中进行确认，对问题进行整个系统的排查不仅仅是在出现问题的大屏上。
三维
- 当三维出现白屏，内存溢出的情况下，应及时关注孪生体刷新，标注的释放问题
- 三维始终是系统中资源消耗大户，应在上环境之前进行详细得到性能测试
