深入浏览器解析渲染

妖狐艹你老母 2023-01-16 02:16 189阅读 0赞

#### 深入浏览器解析渲染 ####

1.  构建dom
    
    1.  将HTML解析成许多Tokens
    2.  将tokens解析成object
    3.  将object组合成一个DOM树
2.  构建cssom
    
    1.  解析CSS文件，并构建出一个CSSOM树
3.  构建renderTree(渲染树)
    
    1.  结合DOM和CSSOM构建出一颗Render树
4.  layout
    
    1.  计算出元素相对于viewport的相对位置
5.  paint
    
    1.  将renderTree转换成像素，显示在屏幕上

上面 的过程并不是依次进行的，而是存在一定的交叉。

## 构建DOM ##

DOM（Docttmernt Obiecl Model,文档对象模型)，构建DOM是必不可少的一环，浏览器从发出请求开始到得到  
HTML文件后，第一件事就是将HTML解析成许多Tokens，再将Tokens转换成object，最后将object组合成一颗DOM树。这个过程是循序渐进的，我们假设HTML文件很大，一个RTT(Roumd-Trip Tihme，往返时延)只能得到一部分，浏览器得到这部分之后就会开始构建DOM，并不会等到整个文档就位才开始渲染。这样做可以加快构建过程，而且由于自顶向下构建，后面的构建不会对前面造成影响。而后面我们将会看到，CSSOM则必须等到所有字节收到才开始构建。  
过程：html/字符 →tokens→节点→DOM对象→生成DOM树

## 构建CSSOM ##

CSSOM(CSS Object Model，CSS对象模型)，构建过程类似DOM，当HTML解析中遇到标签时，会请求对应的CSS文件，当CSS文件就位时便开始解析它（如果遇到行内<style>时则直接解析），这一解析过程可以和构建DOM同时进行。  
如果是外部样式，**CSSOM的构建必须要获得一份完整的CSS文件**，而不像DOM的构建是一个循环渐进的过程。因为CSS文件包含大量的样式，后面的样式会覆盖前面的样式，如果我们提前就构建CSSOM，可能会得到错误的结果。

1.如果是内联样式，CSSOM构建包含在parseHTML过程中 (和HTML一起解析)  
2.如果是外部样式，包含在 parseStylesheel(解析样式表) 过程中  
3.如果没有设置样式，使用userAgentStyle(浏览器默认) 则包含在parseHTML过程中

## 构建Render Tree (渲染树) ##

这样也是关键的一步，浏览器使用DOM和CSSOM构建出RenderTree，此时不像构建DOM一样把所有节点构建出来，浏览器之构建需要在屏幕显示的部分，因此<head>,<meta>这些标签就无需构建了，同时对于display:none的元素，也无需构建。visibility:hidden占空间位置需要放在渲染树种中构建。

> display:none 告诉浏览器这个元素无需出现在RenderTree中，但是visibility:hidden 只是隐藏了这个元素，但是元素还占空间，会影响到后面的Layout，因此仍需要出现在RenderTree中。

### CSS匹配规则为何从右往左 ###

body ← parent ← child \{ color : red \}  
要找到child，body里面更大的范围里找child 要匹配的东西非常多，费时间。要是先从精确的地方去找，就匹配到比较少的内容，在向上匹配那就更少。

### Layout (布局) ###

我们现在为止已经得到所有元素的自身信息，但是还不知道它们相遇对Viewport的位置和大小，Layout这一过程需要计算的就是这两个信息。 (计算出元素在页面的具体位置和大小)

### Paint ###

浏览器将每一个节点以像素显示在屏幕上，最终我们看到页面。

### 引入JavaScript ###

1.解析HTML构建DOM时，遇到JavaScript会被阻塞。  
2.JavaScript执行会被CSSOM构建阻塞，也就是说，JavaScript必须等到CSSOM构建完成才会执行。  
3.如果使用异步脚本，脚本的网络请求优先级降低，且网络请求期间不阻塞DOM构建，直到请求完成才开始执行脚本。

### Async Script ###

1.无需阻塞DOM，在对Script执行网络请求期间可以继续构建DOM，直到拿到Script之后在去执行。  
2.将该Script的网络请求优先级降低，延长响应时间  
注意：  
1.异步脚本是网络请求期间不阻塞DOM，拿到脚本后马上执行，执行时会阻塞dom，响应时间被延长，这个时候DOM已经构建玩了，异步脚本的执行发生在第一次渲染之后。  
2.只有外部脚本可以使用async关键字变成异步，且与其延时脚本的区别，后者是在Dcoument被解析完毕而DOMcontentLoaded事件触发之前执行，前者则是下载完毕后执行  
3.对于使用document。createElement创建的<script>，默认就是异步脚本