前端性能优化方案

前端性能优化方案

优化工具：

• lighthouse
• webpagetest
• chrome devtools

FCP 首次内容绘制 1s以内
LCP 最大内容绘制 2.5s以内
FID 首次输入延迟
TTI 完全可交互
TBT 总阻塞时间 所有长任务（多于50ms的任务）时间 - 50ms
CLS 布局抖动

• 首次评测 51分

原因
/js/chunk-vendors.js 太大
/js/app.js太大

第一次打包如下size

将echarts 采用cdn引入后 js文件从1066变成了268

将wangeditor 采用cdn引入后 js文件从268变成了1.88

其实 最大的app.js的大小没有根本上得到解决

我们生成报告发现 原来是 svg图片等静态资源占用的比重超大，下面优化静态资源
使用el-icon 按需引入 打包后 大小由3690 —> 1487

再次优化 去除无用assets 结果如下

最终得分 71分 还是不行 明天继续优化！

今天又发现 elementPlus 和 饿了么组件内部使用的icon-vue 较大
来个按需加在吧 ～
然后我搞了一下最新的 自动按需加载 踩了个大坑 我的node版本10.13.1 好像 unplugin-vue-components unplugin-auto-import 需要node版本 > 12 ？？？ 所以放弃了

选择的是 手动按需加载

打包体积如下 减少了300k 就这样吧 优不动了～～～

前后对比

未优化

优化后

优化前

优化后

总的来说一般 肯定还有很多可以优化的地方，但是脑力有限，需要大佬们支支招😁

网络方面解决方案：

1.dns预解析 仅对跨域网站的DNS解析有效。

<style rel="dns-prefetch" href="要预先解析的其他域名"></style>

比如淘宝

2.http长连接 http1.1默认就是长连接了 管道机制 但是1.1的缺陷是客户端接受还是按照之前的顺序 所以容易造成队头阻塞 突破单个域名浏览器的并发限制（chrome是6个） 多买几个域名就可以或者合并请求次数减少请求
http2 二进制数据流传输数据 避免队头阻塞 多路复用 服务器主动推送（比如静态资源） 头部压缩
3.浏览器缓存
强缓存
expires 到期时间 缺点：服务器和客户端时间不一致
cache-control 过期倒计时单位 秒
协商缓存（客户端使用本地缓存数据之前询问服务器是否过期缓存是否有效）
有效 statuscode 304
无效 返回新的数据 statuscode200
cache-control ： no-cache 告诉代理服务器不直接使用缓存 向服务器发请求确认缓存是否有效
last-modified : xxx. 服务器上文件的最后修改时间 。缺点： 文件没改变 只是改了名字又改回来 会有bug，只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度
etag：密码钥比对。 缺点：开销大

html解析知识点

解析html过程中 如果遇到js脚本不管是内联还是外联都会阻塞DOM的渲染 而是下载脚本并且解析脚本处理完后 继续解析Html

defer 与 DOMContentLoaded

如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。 所以这意味着什么呢？HTML 文档解析不受影响，等 DOM 构建完成之后 defer 脚本执行，但脚本执行之前需要等待 CSSOM 构建完成。在 DOM、CSSOM 构建完毕，defer 脚本执行完成之后，DOMContentLoaded 事件触发。

async 与 DOMContentLoaded

如果 script 标签中包含 async，则 HTML 文档构建不受影响，解析完毕后，DOMContentLoaded 触发，而不需要等待 async 脚本执行、样式表加载等等。

加载方面

1.减少http请求，合并文件，比如精灵图，js，css
2.减少文件体积，比如大的图，大的文件，css文件压缩，js文件压缩，开启GZIP压缩文件
3.采用CDN方式引入大的文件，大的图。
4.减少DOM操作，避免回流，取而代之的是使用虚拟DOM操作
5.懒加载图片，懒加载路由，懒加载文件
6.SSR服务器渲染，预渲染