js的渲染

<!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>

猜你喜欢