纪录机能优化相干的学问。
Chrome DevTools — Network
DOMContentLoaded： DOM树构建完成的时候Load: 页面加载终了。即DOM树构建完成后，加载完图片等外部资本的时候Finish: 是页面上一切 HTTP 要求发送到相应完成的时候
Waterfall
依据 HTTP 要求的差别阶段来举行排序
Start Time：要求最先的时候Response Time：资本最先下载的时候End Time：要求完毕的时候Total Duration：要求全部完全历程的时候Latency 要求守候相应的时候
如下图所示，Waterfall 右键以后挑选 Total Duration，则要求根据全部持续时候排序，差别的色彩代表差别的资本文件，淡色的部份代表资本的守候时候，深色的部份代表下载时候。
懒加载
一、为何要用懒加载？
二、懒加载的完成道理
- 起首，将图片的地点放在别的属性(data-url)中，而不是 src。
- 页面加载时依据 scrollTop 的值推断图片是不是在可视地区,假如在可视地区，则将 data-url 属性中的值掏出存放到src属性中（首屏的图片可以直接加载）。
- 在转动历程当中，推断图片是不是在可视地区，假如在，则将 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…
