【优化整理】前端性能优化

【网络加载类】
1、减少Http请求次数
①合并图标，减少请求
Spring图
Iconfont字体文件
②用base64减少不必要的网络请求
注：base64 化之后的图片体积会增大，从而使得css文件体积增大而导致 CRP 阻塞的代价 base64 化最常见的就是在 url-loader 中使用
③图片延迟加载（懒加载）
I 设置图片的src属性为同一张图片（也就是雪碧图），同时自定义一个data-src属性来存储图片的真实地址
II 页面初始化或者浏览器滚动的时候判断图片是否在视野内
III 当图片滚动到视野内时，通过js自动改变该区域图片的src属性为真实的data-src地址
注：Vue中使用vue-lazyload库更容易实现
④合并js/css

2、减少Http请求大小
①JS/CSS/HTML压缩
②webp优化

3、避免页面中空的 href 和 src

4、使用静态资源分域存放来增加下载并行数<br 利用多个域名的主机存放不同的静态资源。增加页面加载时资源的并行下载数，缩短页面资源加载的时间

5、使用可缓存的 AJAX
对于返回结果相同，不会更改的请求

$.ajax({
    url : url,
    type : 'get',
    cache : true, //推荐使用缓存
    data : {},
    success (){//...},
    error (){//...}
});

6、使用 GET 来完成 AJAX 请求
Get只发送头部，请求效率高
psot会发起两次TCP数据包传输，首先发送头部，然后再发送HTTP正文数据

7、减少 Cookie 的大小并进行 Cookie 隔离
Http请求默认带上浏览器端的Cookie一起发送给服务器，所以非必要的情况下，要尽量减少Cookie来减少http请求的大小。
对于静态资源，尽量使用不同的域名存放，因为Cookie默认不能跨域，这样就做到了不同域名下静态资源请求的Cookie隔离

8、推荐使用异步 JavaScript 资源
Defer和async
不同点：async需要加载完成后就会自动执行代码，defer需要等待页面加载完成后才会执行

9、避免使用css import引用加载css
带有css@import的css样式需要在css文件串行解析到@import时才会加载出来，增加了渲染时间

【页面渲染类】
1、 css资源放到HTML文件顶部，js文件放到HTML文件底部

2、 尽量预先设置图片大小，防止页面重排

3、 减少使用Js动画，css动画使用translate、scale代替top,height，避免页面重排

参考文件：
1、 图片优化 juejin.cn/post/684490…
2、 减少Http请求的优化 juejin.cn/post/684490…
3、 Js优化 juejin.cn/post/684490…
4、 优化合集 github.com/zwwill/blog…