链路流程

0、浏览器本地缓存匹配；

1、本地hosts映射对比;

2、本地dns缓存解析；

3、远程dns解析获得服务器ip地址；

4、浏览器发送tcp连接请求包(syn)；

5、请求包经过传输层、网络层、数据链路层封装通过网卡到达路由器；

6、路由器转发数据包到所属运营商服务器；

7、运营商服务器通过寻址最短路径通过中继节点到达指定ip地址；

8、服务器端可能存在反向代理或者负载均衡，都是直接转发请求至上游服务器，当然也可以制定安全防御规则直接丢弃请求包；

9、上游服务器收到连接请求，在自身可用的情况下，返回(syn+ack)；

10、浏览器校验ack，再次发送(syn+ack)；

11、服务器校验ack切换连接状态至established，然后根据请求传输数据包；

12、当transform-encoding为chunked时，浏览器开始渲染页面；

13、四次挥手，连接关闭；

14、渲染数据完成。

渲染的细节

• 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结束标签，停止解析，进而渲染结束。

希望能够与大家共同培育出良好的Swoole生态，对Swoole有兴趣的朋友可以加我微信好友，进入SW-X框架官方交流群。
该群以Swoole生态发展交流为主，若出现争吵，攻击其他人等行为，立即剔除。