前端性能优化

（1）懒加载与预加载

懒加载的场景

• 图片进入可视区域之后进行资源请求
• 减少无效资源的加载

• 并发加载的资源过多会阻塞js的加载

  
  image.png

---

image.png

预加载的方式

• 给需要加载的资源加一个display:none

• 使用image对象

  
  image.png

（2）资源压缩与请求

• 减少http请求数量
• 减小资源请求大小

js文件的加载会阻塞页面的渲染，但是不会阻塞其他静态资源的加载
vue跟react在浏览器端进行模板渲染

（3）缓存

cache-control

---

image.png

---

image.png

缓存流程

---

image.png

（4）重绘回流的实战优化点

image.png

（5）性能优化架构图

image.png

（6）Gzip压缩原理

Gzip 压缩背后的原理，是在一个文本文件中找出一些重复出现的字符串、临时替换它们，从而使整个文件变小。根据这个原理，文件中代码的重复率越高，那么压缩的效率就越高，使用 Gzip 的收益也就越大。

（7）js文件加载

将 script 标签放在 body 底部，因为 JS 文件执行会阻塞渲染。当然也可以把 script 标签放在任意位置然后加上 defer ，表示该文件会并行下载，但是会放到 HTML 解析完成后顺序执行。对于没有任何依赖的 JS 文件可以加上 async ，表示加载和渲染后续文档元素的过程将和 JS 文件的加载与执行并行无序进行。