浏览器页面--渲染的流程

朴灿烈づ我的快乐病毒、 2023-10-01 09:53 2阅读 0赞

原文网址：[浏览器页面--渲染的流程\_IT利刃出鞘的博客-CSDN博客][--_IT_-CSDN]

## 简介 ##

本文介绍浏览器的网页的渲染的原理。

## 浏览器介绍 ##

### 结构 ###

![48831c21e0224145a80d254924f81f28.png][]

浏览器包括八个子系统：

1.  用户界面
    
    1.  用户界面即浏览器的外壳，是我们平时所看到的浏览器界面，包括了搜索栏、书签、前进后退按钮等。
    2.  当我们在用户界面进行操作时，它将我们的操作转入到浏览器引擎进行处理。
2.  浏览器引擎
    
    1.  浏览器引擎用于接收用户界面传递的“操作命令”，然后调用对应的渲染引擎接口。
3.  渲染引擎
    
    1.  渲染引擎是浏览器的重中之重，渲染引擎主要的工作就是把我们获取到的html、css等资源进行解析，然后进行页面的渲染工作。
4.  网络模块
    
    1.  负责网络请求，如http请求。
    2.  它包括平台无关的接口和各平台独立的实现
5.  JS解释器
    
    1.  用于解析、编译执行JS代码。
6.  UI后台
    
    1.  绘制基础元件，如组合框与窗口。
7.  数据持久子系统
    
    1.  浏览器需要把所有数据存到硬盘上，如cookies。
    2.  新的HTML5规范规定了一个完整（虽然轻量级）的浏览器中的数据库 web database。
8.  显示后台
    
    1.  用于显示

各大浏览器的渲染引擎和JavaScript引擎如下：

<table style="width:404.4pt;"> 
 <tbody> 
 <tr> 
 <td> 浏览器 </td> 
 <td style="width:116px;"> 渲染引擎 </td> 
 <td style="width:325px;"> JavaScript引擎 </td> 
 </tr> 
 <tr> 
 <td> Chrome </td> 
 <td style="width:116px;"> Webkit-&gt;Blink </td> 
 <td style="width:325px;"> V8 </td> 
 </tr> 
 <tr> 
 <td> Firefox </td> 
 <td style="width:116px;"> Gecko </td> 
 <td style="width:325px;"> SpiderMonkey（1.0-3.0） TraceMonkey（3.5-3.6） JaegerMonkey（4.0-） </td> 
 </tr> 
 <tr> 
 <td> Safari </td> 
 <td style="width:116px;"> Webkit </td> 
 <td style="width:325px;"> Nitro（4-） </td> 
 </tr> 
 <tr> 
 <td> Opera </td> 
 <td style="width:116px;"> Presto-&gt;Blink </td> 
 <td style="width:325px;"> LinearA（4.0-6.1） LinearB（7.0-9.2） Futhark（9.5-10.2） Carakan（10.5-） </td> 
 </tr> 
 <tr> 
 <td> IE </td> 
 <td style="width:116px;"> Trident </td> 
 <td style="width:325px;"> JScript（IE3.0-IE8.0） Chakra（IE9+之后） </td> 
 </tr> 
 <tr> 
 <td> Edge </td> 
 <td style="width:116px;"> EdgeHTML </td> 
 <td style="width:325px;"> Chakra </td> 
 </tr> 
 </tbody> 
</table>

### 多进程 ###

浏览器采用多进程的架构，每新开一个标签页相当于新起了一个进程，多进程带来了更高的响应速度、安全性。多进程同时也会消耗更多的资源，在处理时，如果是不跨站点的两个标签页，浏览器将会使其公用一个进程，从而节省一定的内存空间。

浏览器有这几个进程：浏览器进程、渲染进程、GPU进程、插件进程

1.  浏览器进程
    
    1.  浏览器的主线程，主要负责浏览器的页面管理、书签、前进后退、资源下载管理以及创建和销毁其他进程等工作，整个浏览器应用程序只有一个，对应上述浏览器组成中的浏览器引擎。
    2.  其里边有如下几个线程
        
        1.  UI线程
            
            1.  绘制浏览器的按钮和输入字段
        2.  网络线程
            
            1.  处理网络请求以及从服务器接收数据
        3.  存储线程
            
            1.  控制对文件的访问
2.  渲染进程
    
    1.  内核进程，负责页面渲染、JS执行，对应的是上述的渲染引擎和JS引擎
    2.  一个浏览器可以包含多个渲染进程，每个Tab窗口页对应一个渲染进程。
    3.  渲染进程下面还划分了多个线程，具体为：
        
        1.  GUI线程
            
            1.  主要负责解析HTML、CSS和构建 DOM 树和 RenderObject树，布局和绘制等，重绘和回流被触发时就会执行该线程。
            2.  JS引擎线程：负责解析和执行JS代码。
        2.  事件线程
            
            1.  控制事件循环，比如当JS引擎执行到setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应的任务添加到事件线程中。
        3.  定时器线程
            
            1.  浏览器通过定时器线程来创建一个定时器，完成计时操作（如果放到JS引擎线程，可能会由于阻塞导致计时不准确），计时完毕后，会将任务添加到事件队列，等JS引擎空闲后执行，setInterval与setTimeout所在的线程。
        4.  异步请求线程
            
            1.  在XMLHttpRequest连接后浏览器会创建一个异步请求线程来检测请求的状态变更，如果设置有回调函数，异步线程就产生状态变更事件放到JS引擎的处理队列中等待处理。
3.  GPU进程
    
    1.  负责GPU渲染，整个浏览器应用程序只有一个，用于 3D 绘制等。
4.  插件进程
    
    1.  浏览器安装的插件(扩展程序)，每个插件会创建一个进程

## 页面渲染流程 ##

### **大致过程** ###

1.  构建DOM树：渲染进程将 HTML 内容转换为浏览器能够理解的 DOM 对象。
2.  CSS解析：渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。CSS解析与构建DOM树并行执行
3.  DOM结构与样式合并：CSSOM树和DOM树合并，形成Render树。
4.  布局：创建布局树，并计算元素的布局信息。
5.  生成图层树：对布局树进行分层，并生成图层层树。
6.  绘制图层：为每个图层生成绘制列表，并将其提交到合成线程。
7.  生成图块：合成线程将图层分成图块。
8.  栅格化：栅格化线程池将图块转换成位图。
9.  合成：合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
10. 显示：浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

### **详述** ###

1.  构建DOM树
    
    1.  浏览器无法识别html文件，需要将html解析成DOM树。
    2.  解析过程是一个深度遍历的过程，只有当某个节点下所有子节点都遍历完成了才会去解析下一个兄弟节点。
2.  CSS解析
    
    1.  与构建DOM树并行执行，浏览器将识别所有的CSS样式信息，并构建形成CSSOM树。
3.  DOM结构与样式合并
    
    1.  CSSOM树和DOM树合并，形成Render树。
    2.  形成Render树的过程中，浏览器会筛选出所有可见的节点（visibility: hidden的元素在Render Tree中），针对可见节点匹配其CSSOM树种的CSS规则。
4.  布局
    
    1.  布局过程需要两个任务：创建布局树和计算布局信息。
    2.  概述：将Render树遍历，将元素嵌套关系以盒子模型的形式写入文档流。计算出每个树节点应该占据的空间以及在视图中的位置，一些布局的样式如float、absolute、fixed造成的偏移就会在这个阶段生效。
        
        1.  创建布局树
            
            1.  这个过程会去掉不可见的元素，如head标签，display：none的元素，额外地构建一颗只包含可见元素的布局树，遍历DOM树种所有节点，忽略掉不可见元素，把可见元素加入到布局树
        2.  计算布局信息
            
            1.  有了布局树之后还要进行坐标位置计算，输入布局树，输出计算了位置的布局树。
5.  生成图层树
    
    1.  分层用于处理这些效果：复杂的3D变换，页面滚动，或者z-index控制的图层等效果。
    2.  渲染引擎需要为特定的节点生成专用的图层，并生成一颗对应的图层树(LayerTree)，浏览器的页面其实被分成了很多图层，这些图层叠加后合成了最终的页面，并不是布局树中的每一个节点都包含一个图层，如果一个节点没有对应的图层，那么他属于父节点的图层。
6.  绘制图层
    
    1.  完成了图层树的构建之后，渲染引擎会对图层树中的每个图层进行绘制。
    2.  渲染引擎把每个图层的绘制拆分成很多小的绘制指令，然后把绘制指令按照顺序组成一个图层绘制列表。
7.  生成图块
    
    1.  当图层绘制列表准备好之后，主线程会把绘制列表提交给渲染引擎的合成线程，合成线程将图层分成图块。
8.  栅格化
    
    1.  栅格化线程池将图块转换成位图。
    2.  格栅化过程通常使用GPU来加速生成，生成后的位图保存在GPU内存中。
    3.  在一个页面上，我们把用户可以看到的这个部分叫做视口(viewport)，合成线程会优先生成视口附近的位图，生成位图的操作是由格栅化来执行的。
9.  合成
    
    1.  合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
10. 显示
    
    1.  浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

[--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121984762
[48831c21e0224145a80d254924f81f28.png]: https://img-blog.csdnimg.cn/48831c21e0224145a80d254924f81f28.png