从输入URL到页面渲染发生了什么

布满荆棘的人生 2022-11-11 14:58 249阅读 0赞

**例如：从输入http://hackr.jp/xss/web到页面渲染发生了下方如图的事情。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2][]

详细的过程：

（1）客户端将URL输入到浏览器地址栏，向DNS服务器请求获取指定域名的IP地址；

（2）DNS服务器解析从客户端发来的域名，获取到对应的IP地址，将IP地址传回到客户端；

（3）客户端获取到IP地址后，在应用层按照HTTP协议，生成针对目标web服务器的HTTP请求报文。在传输层，应用TCP协议，为了方便通信，将HTTP请求报文分割成报文段，按照序号分为多个报文段，把每个报文可靠地传输给对方；

（4）请求报文传输至网络层，应用IP协议，搜索对方的地址，一边中转，一边传送，一直路由到目标web服务器。

（5）到达web服务器，遵循TCP/IP四层结构，将请求报文逐层处理传到服务器。在传输层，按照TCP协议，将客户端的报文按照原来的顺序重组请求报文；

（6）在应用层，按照HTTP 协议，对web服务器请求的内容处理，传至客户端。

（7）请求的报文发送至客户端，再依据四层协议，逐层去首部报文等操作获取到请求的内容。

（8）请求的内容传至浏览器，接下来进行浏览器对内容的渲染过程；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3][]

（9）浏览器将从服务器获取的HTML文档构建成文档对象模型DOM(Document Object Model).；

（10）样式将被载入和解析，构成层叠样式表模型CSSOM(CSS Object Model).；

（11）在DOM和CSSOM之上，渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象；

（12）渲染树映射除了不可见元素（例如**<head>**或者含有**display:none;**的标签）外的所有DOM结构。每一段文本字符串都将划分在不同的渲染对象中，每一个渲染对象都包含了它相应的DOM对象以及计算后的样式。

（13）渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout.浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素；

（14）当页面元素样式的改变不影响元素在文档流中的位置时，浏览器只会将新样式赋予元素并进行重绘操作，这是浏览器的重绘；

（15）当改变影响文档内容或者结构，或者元素位置时，回流操作就会被触发。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/8d227f509f7b4cf8a449ec33c8a9b387.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210321142832133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210321132505458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210321150019209.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ==,size_16,color_FFFFFF,t_70