【前端性能优化摸索】浏览器发起的网络请求，经历了哪些阶段以及该如何优化

【一】发起的网络请求，经历了哪些阶段以及该如何优化

我们从开发者工具的network就可以清楚的看到每个请求的时长，以及网页加载的情况。

名称	指标含义
Queued at （准备去排队）	浏览器与同一个域名建立的TCP连接数是有限制的，chrome设置的6个，如果说同一时间，发起的同一域名的请求超过了6个，这时候就需要排队了，也就是这个Queued at时间。 图中这个被阻塞到424.48s，才被分配到执行资格。
Queueing （排队中）	获取到执行资格之后进行准备。 如： 浏览器正在硬盘上分配空间。
Start at （开始）	分配到的线程开始执行。
Stalled	是浏览器得到要发出这个请求的指令，到请求可以发出的等待时间。一般是等待代理商释放资源的时间。
Proxy negotiation	代理协商所用时间。
Initial Connection / Connecting	建立连接： TCP协议对应于传输层，HTTP协议对应于应用层。WEB项目中，HTTP协议是建立在TCP的基础上的。先建立TCP连接，再发起http请求。 *如果Connection为close，则一个TCP连接只对应一个HTTP请求。 *如果Connection为Keep-alive，则一个TCP连接可对应一个到多个HTTP请求。
SSL	如果网站使用了 HTTPS，这个就是浏览器与服务器建立安全性连接的时间。
Request sent/sending	请求时间
Waiting	等待初始响应所花费的时间，也称为Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还包括 1 次往返延迟时间及服务器准备响应所用的时间（服务器发送数据的延迟时间）
Content Download	下载资源的时间

DOMContentLoaded： 初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

load ： 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。
 

优化：（图片来源修言老师）前端性能优化原理与实践 - 修言 - 掘金小册

网络层面:

• waterFall瀑布流可以看到 两条线，应该是越靠前越好。可以通过优化请求顺序，请求时长长的优先请求。能够优化首屏渲染时间。
• 从瀑布流的高度来看，请求数量越少越好，特别是要减少不必要的，重复的请求。在某些业务条件下，比如只有登录后才有的效果，未登录的时候就不必请求。合理利用前端缓存，如果依赖的上一个接口返回的值并没有变动，就不必再多去请求一次下一个接口。运用客户端缓存机制以及离线存储技术。
• 从瀑布流的宽度来看，在load被触发前，整个页面的所有依赖资源如样式表和图片的数量和大小越少是越好，可以进行压缩图片等方法；使用webpack合并css和js，减少文件数量。
• 进行CDN优化，适合用于静态资源的cdn加速，提高内容下载速度：cdn——维基百科给出的解释是：内容分发网络（Content delivery network或Content distribution network，缩写：CDN）。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上，让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容，减少网络传输距离从而达到加速的目的。不太适合动态，因为动态资源比较活跃，有效期很快就过期，达不到cdn原理加速作用。

【二】 浏览器从服务器端，请求到的html资源解析：

在原生的js脚本中：

defer 与 DOMContentLoaded
如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。 所以这意味着什么呢？HTML 文档解析不受影响，等 DOM 构建完成之后 defer 脚本执行，但脚本执行之前需要等待 CSSOM 构建完成。在 DOM、CSSOM 构建完毕，defer 脚本执行完成之后，DOMContentLoaded 事件触发。

async 与 DOMContentLoaded
如果 script 标签中包含 async，则 HTML 文档构建不受影响，解析完毕后，DOMContentLoaded 触发，而不需要等待 async 脚本执行、样式表加载等等。

==>  异步脚本对于页面渲染的思考：

首屏优化？

• 页面懒加载方案
• DOM渲染的优化：1.事件循环eventloop 2.异步更新 3.回流与重绘

刮到了一个很nice的文章： 性能优化建议 - 移动开发平台 mPaaS - 阿里云

1. 及时清除无用代码，修正混乱的代码逻辑
2. 清理大图片和不必要的文件，减少包的体积
3. 控制首屏渲染的DOM节点。不论是什么框架，目前都有"diff“算法”。如果第一次要对比的dom节点层级很深，耗费时间也会很长。setData 数据量不宜过大，避免一次性传递过长的列表,首屏请勿一次性构造太多节点，服务端可能一次请求传递大量数据，请勿一次性 setData，可先 setData 一部分数据，然后等待一段时间（比如 400 ms，具体需要业务调节）再将其他数据传输过去。
4. 避免频繁的setData，导致一直要重绘重绘，就会延长触发DomContentLoad时间，页面就空白很久。