web前端基础知识之浏览器内核与页面渲染流程

浏览器内核

浏览器/RunTime|：内核（渲染引擎）|JavaScript 引擎
–：|：–|：–
Chrome |Blink（28~） Webkit（Chrome 27） |V8
FireFox |Gecko | SpiderMonkey
Safari |Webkit| JavaScriptCore
Edge |EdgeHTML |Chakra(for JavaScript)
IE |Trident |Chakra(for JScript)
PhantomJS |Webkit |JavaScriptCore
Node.js - |V8|-

浏览器组成

1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XikoYL5D-1608210834254)(/images/browser-layer.webp)]

浏览器引擎工作流程

1. 浏览器获取 HTML 文件，然后对文件进行解析，形成 DOM Tree
2. 与此同时，进行 CSS 解析，生成 Style Rules
3. 接着将 DOM Tree 与 Style Rules 合成为 Render Tree
4. 接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
5. 随后调用 GPU 进行绘制（Paint），遍历 Render Tree 的节点，并将元素呈现出来
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f7hedweR-1608210834257)(/images/browser-render.webp)]

DOM 解析和渲染

1. CSS 不会阻塞 DOM 的解析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwNyBTAn-1608210834258)(/images/browser-chunk.webp)]

2. CSS 阻塞页面渲染

3. JS 阻塞 DOM 解析,但浏览器会"偷看"DOM，预先下载相关资源。

4. 浏览器遇到 <script>且没有 defer 或 async 属性的 标签时，会触发页面渲染，因而如果前面 CSS 资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。

CSS 解析

浏览器如何解析

浏览器工作流程
CSS 从右往左解析，因此可以想到 HTML 性能调优的时候，尽量减少层级嵌套

CSS 优先级

• !important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

DOM Tree 构建

1. 转码: 浏览器将接收到的二进制数据按照指定编码格式转化为 HTML 字符串
2. 生成 Tokens: 之后开始 parser，浏览器会将 HTML 字符串解析成 Tokens
3. 构建 Nodes: 对 Node 添加特定的属性，通过指针确定 Node 的父、子、兄弟关系和所属 treeScope
4. 生成 DOM Tree: 通过 node 包含的指针确定的关系构建出 DOM Tree
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-umgHWFvm-1608210834261)(/images/dom-tree-render.png)]