深入浏览器解析渲染

最新推荐文章于 2025-03-27 21:08:22 发布

原创最新推荐文章于 2025-03-27 21:08:22 发布 · 206 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #html5

Javascript 同时被 2 个专栏收录

75 篇文章

订阅专栏

前端总结

33 篇文章

订阅专栏

本文详细介绍了网页加载和渲染的基本过程，包括构建DOM树、CSSOM树和渲染树，以及Layout和Paint等关键步骤。此外，还探讨了JavaScript对渲染的影响及异步脚本的工作原理。

深入浏览器解析渲染

构建dom
1. 将HTML解析成许多Tokens
2. 将tokens解析成object
3. 将object组合成一个DOM树
构建cssom
1. 解析CSS文件，并构建出一个CSSOM树
构建renderTree(渲染树)
1. 结合DOM和CSSOM构建出一颗Render树
layout
1. 计算出元素相对于viewport的相对位置
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>，默认就是异步脚本