前端性能优化实用方案总结（一）

一、性能优化两大指标

1、首屏打开速度

主要跟资源加载时间有关，资源体积越小越好。

2、页面更新效率。

主要跟dom更新范围有关，dom更新范围越小越好。

二、优化手段

首屏速度方面

1、异步加载

webpack项目中，可使用prefetch预加载资源，实现在浏览器空闲时加载还未打开页面的资源；

vite项目中，可使用requestIdleCallback原生api模拟prefetch预加载。

2、更新第三方库，使其支持tree-shaking（能不用第三方库的就不用第三方库，如Datejs）；

3、去除体积大的base64图片。

4、小数据量接口合并到其他接口，减少http请求；

5、列表页面包含大量dom时可以虚拟列表加载；

6、骨架屏、loading，减少用户焦虑。

页面更新效率方面

1、区分请求粒度，减少请求范围；

2、区别v-if与v-show的使用；

3、针对Vue、react更新机制的不同，做针对性优化。