js的渲染

矫情吗；* 2021-10-19 07:56 314阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript">  
/\*从一个url地址到最终页面渲染完成发生了什么？  
\* 1.DNS解析，将域名解析为ip地址  
\* --浏览器DNS解析  
\* --系统DNS解析  
\* --路由DNS解析  
\* --网络运营商DNS解析  
\* --递归搜索，blog.baidu.com  
2.TCP连接，TCP三次握手  
\-------第一次握手：由浏览器发起，告诉服务器我要发送请求了  
\-------第二次握手：由服务器发起，告诉浏览器我要准备接收了，你发吧  
\-------第三次握手：由浏览器发起，告诉服务器，我要发了，准备接收吧  
3.发送请求  
\---请求报文，HTTP协议的通信内容  
4.接收响应  
\----响应报文  
5.渲染页面  
\-----遇见HTML标记，浏览器调用HTML解析器解析成Token并创建成dom树；  
\-----遇见style/link标记，浏览器会调用css解析器，处理css标记并创建css树；  
\-----遇见script标记，调用javascript解析器，处理script代码（绑定事件，修改dom树/css树）；  
\-----将dom树和css树合并成一个渲染树  
\-----根据渲染书来计算布局，计算每个节点的几何信息；  
\-----将各个节点颜色绘制到屏幕上（渲染）  
  
  
注意:  
这五个步骤不一定是顺序执行的，如果dom树或css树被修改了，可能会执行多次布局和渲染。  
往往实际页面中，这些步骤会执行多次；  
  
6.断开连接，TCP四次挥手  
第一次挥手：有浏览器发起的，发送给服务器，我东西发送完了（请求报文），你准备关闭吧；  
第一次挥手：有服务器发起的，发送给浏览器，我东西接收完了（请求报文），我准备关闭吧，你也准备吧；  
第一次挥手：有服务器发起的，发送给浏览器，我东西发送完了（响应报文），你准备关闭吧；  
第一次挥手：有浏览器发起的，发送给服务器，我东西发送完了（响应报文），我准备关闭吧，你也准备吧；  
  
  
  
  
\*  
\* \*/  
</script>  
</head>  
<body>  
</body>  
</html>

转载于:https://www.cnblogs.com/dys6/p/11303916.html