前端性能优化总结

记录性能优化相关的知识。

Chrome DevTools — Network

DOMContentLoaded： DOM树构建完成的时间
Load: 页面加载完毕。即DOM树构建完成后，加载完图片等外部资源的时间
Finish: 是页面上全部 HTTP 请求发送到响应完成的时间

Waterfall

根据 HTTP 请求的不一样阶段来进行排序

Start Time：请求开始的时间
Response Time：资源开始下载的时间
End Time：请求结束的时间
Total Duration：请求整个完整过程的时间
Latency 请求等待响应的时间

以下图所示，Waterfall 右键以后选择 Total Duration，则请求按照整个持续时间排序，不一样的颜色表明不一样的资源文件，浅色的部分表明资源的等待时间，深色的部分表明下载时间。

懒加载

1、为何要用懒加载？

2、懒加载的实现原理

1. 首先，将图片的地址放在其它属性(data-url)中，而不是 src。
2. 页面加载时根据 scrollTop 的值判断图片是否在可视区域,若是在可视区域，则将 data-url 属性中的值取出存放到src属性中（首屏的图片能够直接加载）。
3. 在滚动过程当中，判断图片是否在可视区域，若是在，则将 data-url 属性中的值放到 src 属性中。

图片优化

图片优化的几种方式：

CSS Sprite 和 BASE64 的对比

各个类型图片的对比

延迟加载第三方 JS

• defer 属性：渲染 DOM 的过程将和 JS 脚本加载的过程异步进行，可是 JS 脚本的执行要在全部元素解析完成以后（只适用于外部脚本文件）
• async 属性：加载和渲染 DOM 的过程将和 JS 脚本的加载与执行的过程异步进行（只适用于外部脚本文件）
• defer 按照加载顺序执行脚本文件，async 则不会按照声明顺序执行

具体区别见下图：

绿色线表明 HTML 解析；蓝色线表明 JS 脚本读取时间；红色线表明 JS 脚本执行时间。

Preload 和 Prefetch

preload 提供了一种声明式的命令，让浏览器提早加载指定资源(加载后并不执行)，在须要执行的时
候再执行。

• 将加载和执行分离开，不阻塞渲染和 document 的 onload 事件
• 提早加载指定资源

使用：

prefetch: 告诉浏览器将来可能会使用到的某个资源，浏览器就会在闲时去加载对应的资源。

使用：

Gzip -> Brotil

Brotli 压缩算法具备多个特色，最典型的是如下 3 个：

• 针对常见的 Web 资源内容，Brotli 的性能相比 Gzip 提升了 17-25%；
• 当 Brotli 压缩级别为 1 时，压缩率比 Gzip 压缩等级为 9（最高）时还要高；
• 在处理不一样 HTML 文档时，Brotli 依然可以提供很是高的压缩率。

DNS预解析

默认状况下浏览器会对页面中和当前域名不在同一个域的域名进行预获取，而且缓存，这就是隐式的 DNS Prefetch。若是想对页面中没有出现的域进行预获取，那么就要使用显示的 DNS Prefetch 。

DNS 预解析是浏览器试图在用户访问连接以前解析域名,若是一个页面有多个域名的连接，DNS 预解析会在用户点击连接以前，使用最少的CPU和网络在后台进行解析。当用户点击已经预解析的域名时，能够平均减小 200 ms 的等待时间，提高用户体验 。

<meta http-equiv="x-dns-prefetch-control" content="on">
 <link rel="dns-prefetch" href="//domain.com">

参考文档：

https://segmentfault.com/a/11...
DNS预解析: https://www.cnblogs.com/golov...