前端性能优化 前端性能优化常用总结

浏览器缓存

深入理解HTTP缓存机制及原理

• 强制缓存：服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。

• 对比缓存/协商缓存：将缓存信息中的Etag（资源的唯一标识符）和Last-Modified（最近修改时间）通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

预加载

• 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件。

• 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。

• 启用方式

  <link rel="preload" href="http://example.com">
  

预渲染

• 可以通过预渲染将下载的文件预先在后台渲染。

• 预渲染虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户在之后打开，否则就白白浪费资源去渲染。

• 启用方式

  <link rel="prerender" href="http://example.com">
  

懒加载

• 将不关键的资源延后加载。
• 懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等。
• 原理：
  • 懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。
  • 对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

懒执行

• 将某些逻辑延迟到使用时再计算。
• 懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。