前端项目的首页优化

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