二维元素的卡顿优化

1.运行时的卡顿

在确定了当前页面是由二维元素导致的卡顿时，我们可以根据以下条目进行排查:

1.1 视频特效是否过大过多：

50%左右的二维卡顿时由于过多或者过大的动态效果导致的，如以下这类动效：

解决方案： 1.一般来说 apng 格式要比 mp4 格式更卡，可以把 apng 换成 mp4 格式（如果需要透明则采用 webm 格式） 2.视频特效本身的分辨率越大越卡，在能接受的范围内尽量减小视频的分辨率 3.如果视频特效过多，建议适当减少视频特效部分或者合并一些视频特效。

1.2 滚动动画过多

山海鲸内置的指标卡和表格这一类的组件都会自动滚动，滚动动画可以很大程度上增强看板的动感，但同时过多的滚动动画，特别是表格的滚动可能会造成看板的卡顿。因此建议关闭一些不重要的指标卡或者表格的滚动动画：

1.3 图片素材过大

有的时候我们为了追求画面的清晰度，会在页面中放置一些很大的图片，当这类大图片的分辨率过大或者过多时，可能就会造成页面运行的卡顿。因此建议这种情况对于所有超过 1m 的图片素材进行检查，没有必要的话就尽量降低分辨率。

1.4 数据源刷新频率过高

当接入较多数据源的话，如 20 个以上的 API，并且数据源刷新频率较高如每分钟一次，则很容易造成突然的卡顿。这种情况推荐合并多个数据源请求，如将多个 API 合并成一个 API 中，这样就可以显著降低突然卡顿的问题。

2.页面加载较慢

页面在这样的页面等待时间过长：

2.1 网络导致的加载慢

一般是由于网络原因导致的，您主要需要检查当前客户端电脑的网络速度以及发布出这个项目连接的电脑的网络速度是否正常。

2.2 素材过大导致的加载慢

前面已经提到了，当背景图这类素材过大时，不仅会造成运行的卡顿，也会让加载速度变慢。所以对于背景图这类素材分辨率尽量不要过大，够用即可。

2.3 接入数据源过多

有的时候我们一个项目可能要接入很多个数据源，特别是 API 数据源这种情况，而这些数据源都会在加载时进行请求，此时建议对这些接入的数据源进行合并，如相近的数据合并成一次 API 请求，可以大大优化加载速度。