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

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 协议》,转载必须注明作者和本文链接
讨论数量: 1

🆙 🆙

2个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!