一个网页从输入地址回车，到完整展示网页内容这段时间里，做了哪些工作

1、浏览器本地缓存匹配；
2、本地hosts映射对比;
3、本地dns缓存解析；
4、远程dns解析获得服务器ip地址；
5、浏览器发送tcp连接请求包(syn)；
6、请求包经过传输层、网络层、数据链路层封装通过网卡到达路由器；
7、路由器转发数据包到所属运营商服务器；
8、运营商服务器通过寻址最短路径通过中继节点到达指定ip地址；
9、服务器端可能存在反向代理或者负载均衡，都是直接转发请求至上游服务器，当然也可以制定安全防御规则直接丢弃请求包；
10、上游服务器收到连接请求，在自身可用的情况下，返回(syn+ack)；
11、浏览器校验ack，再次发送(syn+ack)；
12、服务器校验ack切换连接状态至established，然后根据请求传输数据包；
13、当transform-encoding为chunked时，浏览器开始渲染页面；
14、四次挥手，连接关闭；
15、渲染数据完成。

渲染的细节

• html页面的解析与渲染
• 客户端浏览器加载了html文件后，由上到下解析html为DOM树（DOM Tree）。
• 遇到css文件，css中的url发起http请求。
• 这是第二次http请求，由于http1.1协议增加了Connection: keep-alive声明，故tcp连接不会关闭，可以复用。
• http连接是无状态连接，客户端与服务器端需要重新发起请求–响应。在请求css的过程中，解析器继续解析html，然后到了script标签。
• 由于script可能会改变DOM结构，故解析器停止生成DOM树，解析器被js阻塞，等待js文件发起http请求，然后加载。这是第三次http请求。js执行完成后解析器继续解析。
• 由于css文件可能会影响js文件的执行结果，因此需等css文件加载完成后再执行。
• 浏览器收到css文件后，开始解析css文件为CSSOM树（CSS Rule Tree）。
• CSSOM树生成后，DOM Tree与CSS Rule Tree结合生成渲染树（Render Tree）。
• Render Tree会被css文件阻塞，渲染树生成后，先布局，绘制渲染树中节点的属性(位置，宽度，大小等)，然后渲染，页面就会呈现信息。
• 继续边解析边渲染，遇到了另一个js文件，js文件执行后改变了DOM树，渲染树从被改变的dom开始再次渲染。
• 继续向下渲染，碰到一个img标签，浏览器发起http请求，不会等待img加载完成，继续向下渲染，之后再重新渲染此部分。
• DOM树遇到html结束标签，停止解析，进而渲染结束。

本作品采用《CC 协议》，转载必须注明作者和本文链接