前端性能优化 之 加载性能优化

前端性能优化，分为两个部分：

• 加载性能优化
• 渲染性能优化

本篇随笔介绍加载性能优化。

加载性能优化

本质：

• 1、减少请求次数
• 2、减少请求资源的大小
• 3、网络优化

1、减少请求次数

为什么要减少请求次数？

答：浏览器能够并行发送请求，但是每次并行发送请求的个数是有限制的，以chrome浏览器为例子：

• 同一个域名下，同一个GET请求的并发数是1，也就是说只有上一个请求结束，才会执行下一个请求，否则置入队列等待发送。
• 同一个域名下，不同GET/POST请求的并发数是6。当发送的请求数量达到6个，并且都没有得到响应时，后面的请求会置入队列等待发送。

因此，资源请求的数量，肯定会直接影响网页的加载速度。

减少请求次数的方式

• 1、图片资源的处理
  • CSS雪碧图技术
    • 将一些常用的、重复使用的小图合并成一张大图，使用的时候通过背景图片定位（background-position），定位到具体的某一张小图。
    • 但随着字体图片、svg图片的流行，该技术逐渐退出了历史舞台。
  • 图片懒加载
    • 视区之外的图片先不加载，当进入视区或者进入视区之前的某个位置再加载图片。
    • 实现：
      • css的loading属性
      • getBoundingClientRect方法，获取dom元素的top、left、bottom、right、height、width等信息，对比视区大小，进行图片的加载（需要结合节流）
      • IntersectionOberser方法，能够监听元素是否达到当前视口的事件
  • 字体图标
    • 一个字体图标加载了，图标就会马上渲染出来，不需要下载，可以减少HTTP请求。
  • base64编码
    • 图片的base64编码可以将一张图片编码成一串字符串，可以使用该字符串代替图像地址url，减少HTTP请求数量。
    • 但是，由于base64编码用8位字符表示信息中的6位，所以编码后的大小会比原始值大33%，需要均衡css体积增大和http请求减少之间的收益。
• 2、css/js 文件合并
  • 不合并的缺陷
    • 文件与文件之间插入的上行请求，增加了n-1个网络延迟。
    • 受丢包问题的影响会更加严重。
    • 经过代理服务器的时候，可能会被断开。
  • 文件合并存在的问题
    • 首屏渲染问题
      • 合并后的文件显然会比合并之前要大，请求速度必然会更慢一些。如果页面的渲染需要依赖JS的话，如果JS请求慢，就会有影响。
    • 缓存失效问题
      • 假如a，b，c三个js文件合成一个js，只要abc任意一个js有变动，都会导致合并后的文件有变动，使得js缓存失效。
    • 建议：
      • 公共库合并成一个文件，因为公共库的改动不大。然后业务代码合成一个。
      • 不同页面的合并，单页应用。当路由到某个页面的时候，才去加载这个页面。
• 3、合理利用缓存
  • 避免一行代码的修改而导致整个bundle的缓存失效
  • 浏览器缓存（资源）
    • 强缓存
    • 协商缓存
  • DNS缓存（DNS查找时间）
  • 分包加载（Bundle Spliting）
• 4、不使用CSS的@import
  • 因为@import会造成额外的请求

2、减少请求资源的大小

相同的网络环境下，更小的资源体积就意味着传输的速度更快。

资源压缩

• HTML压缩
  • 能减少1~2KB。按照google的浏览量，每次请求 1MB 减少一个字节，每年可以节省流量近 500TB，所以不要轻视。
  • node.js提供了html-minifier工具。
  • 后端模板引擎渲染压缩（可以在渲染方法中进行压缩）
• CSS压缩
  • html-minifier可以压缩卸载html中的CSS
  • 工具：使用clean-css对css进行压缩
• js的压缩与混乱
  • 作用：
    • 无效字符的删除。回车，空格
    • 剔除注释
    • 代码语义的缩减和优化（把变量名变短）
    • 代码保护（可以混乱你的代码，让别人看不懂）
  • 工具：
    • 写在html中的js可以使用html-minifier进行压缩
    • 使用uglifyjs2对JS进行压缩

webp

在安卓下可以使用webp格式的图片，它具有更优的图像数据压缩算法，能够带来更小的图片体积，同等画质下，体积比jpg、png少了25%以上，并且同时具备无损和有损的压缩模式、Alpha透明以及动画的特性。

如何鉴别浏览器是否支持webp？

• 通过canvas来判断（常用）
  • 创建一个canvas元素，然后把它转成image/webp格式的data_url，如果这个data_url里面包含webp，则代表当前浏览器支持webp格式， 反之则不支持。

    document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp');
    

• 在服务端根据请求header信息判断浏览器是否支持webp
  • 图片请求发出的时候，Request Headers 里有 Accept，服务端可以根据Accept 里面是否有 image/webp 进行判断。
• 通过加载一张 webp 图片进行判断。

gzip压缩

nginx配置中可以开启，资源传输体积压缩变小，相应会增加服务器压缩和浏览器资源解压的压力；对于图片资源压缩效率不明显。

Tree Shaking技术（按需引入）

Tree Shaking 指的就是当引入一个模块的时候，不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。

3、网络优化

使用CDN（就近原则）

CDN全称是Content Delivery Network，即内容分发网络。

它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

使用DNS预解析

当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。

在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址。

DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度。

方法是在 head 标签里面写上几个 link 标签：

<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">

对以上几个网站提前解析 DNS，由于它是并行的，不会堵塞页面渲染，这样可以缩短资源加载的时间。

并行连接

由于在HTTP1.1协议下，chrome每个域名的最大并发数是6个。使用多个域名，可以增加并发数。

持久连接

使用keep-alive或presistent来建立持久连接，持久连接降低了时延和连接建立的开销，将连接保持在已调谐状态，而且减少了打开连接的潜在数量。

管道化连接

在HTTP2协议中，可以开启管道化连接，即单条连接的多路复用。

每条连接中并发传输多个资源，这里就不需要添加域名来增加并发数了。

学习参考：

• https://zhuanlan.zhihu.com/p/514222781
• https://www.cnblogs.com/SuremoWang/p/15735993.html