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

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 协议》，转载必须注明作者和本文链接