1.加 CDN,图片。js\css文件用cdn加载。
2.图片懒加载,按需加载。压缩图片,webpp格式的图片。组件懒加载,组件按需引入;(页面滚动之后再加载首屏下面的数据)
3.减少公共自定义组件。减少全局的混入
4.减少http请求。
5.前端、服务端开启gzip。
6.删除mock.js.
7.删除无效代码。
8.检测后端接口,性能测试。
9.使用浏览器强缓存策略。
10.延迟调用一些方法,减少js主进程(比如埋点方法。fastclick,vconsole的加载)
11.路由懒加载。
12.需要设置的样式很多时,设置className,不要设置style;减少重绘和回流;
13.避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来;要比div+css慢;
14.编码优化:缓存对象成员值,将对象成员值缓存到局部变量中会加快访问速度。(局部变量比全局变量读取快、对象嵌套的越深,读取越慢、原型链中的位置越深,读取的越慢)
查看网页性能方法
用谷歌浏览器自带的performance,
1.打开控制台,切换到 performance 选项卡。点击刷新图标(左上角的原点);
2.重新加载页面;
3.点击performance 中的stop按钮;
4.首屏加载时间刻度与选项卡 Summary 的 Total 总时间一致。
下面的这篇文章有详细的内容
https://blog.csdn.net/weixin_44135121/article/details/103998869