一、访问某网址完成HTML页面的过程
以请求文章浅谈前端中的内存泄漏为例。文章网址URL是https://www.jianshu.com/p/64e8b60a97d9。
1、浏览器拿到网址URL后，首先解析出对应的域名www.jianshu.com；
2、得到域名后，前端需要与该服务器建立连接，而TCP/IP协议中连接的前提是需要该域名映射的IP地址，所以走DNS查询后解析得到域名IP；
3、获取IP地址后，在通信传输层进行三次经典的握手后建立TCP连接；
4、如果协议头是HTTP则与目标IP的80端口通信，如果是HTTPS则是443端口；
5、建立好TCP连接后，就可以发送HTTP/HTTPS请求了，告诉服务器需要获取/p/64e8b60a97d9这个地址下的文章内容；
6、服务器收到请求后，将/p/64e8b60a97d9下的页面超文本返回给浏览器；
7、浏览器拿到该HTML后开始进行解析和加载处理，最终就是所呈现的页面内容。
二、如何查看页面加载时长
Chrome开发者模式的Network标签：
底下的数据反应了请求的个数、数据的大小、以及页面加载过程中的3个时间点：finish/DOMContentLoaded/load
1、finish：页面的最后一个请求截止的时长，如果页面加载完后，触发了异步请求（如：ajax请求），那么该时长会变更。
2、DOMContentLoaded：dom内容加载并解析完成的时长。
dom内容开始加载到加载完毕的过程：当开始打开一个页面时，页面首先是空白的，这是因为页面中这时候还没有dom结构，正在加载dom；过一会，页面会展示出内容，但是页面中的部分资源（如：图片资源或者视频资源）还无法看到，此时页面是可以正常的交互；过一段时间后，图片或者音视频资源才完成显示在页面。
从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。
当文档中没有脚本时，浏览器解析完HTML文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。
在任何情况下，DOMContentLoaded 的触发不需要等待图片/音视频等其他资源加载完成。
3、load：页面所有的资源（图片，音频，视频等）加载完成的时长。
页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件的触发顺序是在DOMContentLoaded被触发之后。
总结：DOMContentLoaded就是页面从空白到有内容展示出来这个过程的时长，load指页面上的所有dom、请求以及资源加载完成的时长，即页面已经稳定不再变化。
三、影响页面加载的因素
1、JS脚本阻塞
浏览器解析过程中，遇到<script>标签时，便会停止解析过程，转而先去处理脚本。如果脚本是内联的（即JS代码段直接在HTML文档中编写的），浏览器会直接执行这段内联的脚本；如果是外联的（即脚本是引用文档外部脚本文件的形式），那么会先去加载脚本，然后再执行。
等此处的脚本被加载和执行完后，浏览器才会向下继续解析HTML文档。
2、请求阻塞
页面卡顿时，可以先在Network标签中查看页面具体的加载时间，以及每个请求的详细耗时。
pending状态的请求
在Network中的请求，status为200的都是正常的。
如果其中有请求是pending状态的话，浏览器会一直等待该请求的返回，直至超时或failed，才会触发load事件。这种请求就是页面加载慢的罪魁祸首之一。
3、同域名下的请求数过多
在Network界面，将鼠标悬停在请求瀑布流waterfall字段，可以看到某个请求具体的耗时，即timeline。
在timeline里，每一种颜色代表请求一个时间段，比如DNS查询是深绿色，content download是蓝色。
html页面在解析渲染过程中会有大量的其他请求，如外联的CSS、JS、图片音视频等这些资源都需要浏览器重新发起http请求
每个请求的各个时间段的含义：
1、Queueing：请求排队的时间
浏览器与同一个域名建立的TCP连接数是有限制的，chrome默认为6个。如果在同一时间内，发起的同一域名的请求超过了6个，这时候请求就需要排队，也就是Queueing时间。
2、Stalled：浏览器得到要发出这个请求的指令，到请求可以发出的等待时间
一般是代理协商的时间，或者等待可复用的TCP连接释放的时间。不包括DNS查询、建立TCP连接等时间。
3、DNS Lookup：DNS查询的时间
页面内任何新的域名，都需要走一遍完整的DNS查询过程，已经查询过的则走缓存。
例如：在 https://www.jianshu.com/p/64e8b60a97d9 文章中，请求了一张新域名的图片https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=761162548,2318597114&fm=26&gp=0.jpg，则需要走ss0.bdstatic.com域名的DNS查询。
4、Initial Connection / Connecting：建立TCP连接的时间
包括TCP的三次握手和SSL的认证。
5、SSL：完成ssl认证的时间
6、Request sent/sending：请求上传时间
指的是请求的第一个字节发出前到最后一个字节发出后的时间。
7、Waiting：收到响应的第一个字节所花费的时间
在请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)。
8、Content Download：下载时间
指的是从收到服务器响应的第一个字节，到接受完最后一个字节的时间。
网友评论