说一说:浏览器渲染和JavaScript代码解析过程

thunderchen
504 阅读6分钟

浏览器渲染过程

渲染流程图

HTML代码经过Parser解析成DOM树,同样CSS代码经过相关规则进行解析,通过Attachment进行附加,两者结合生成Render Tree(渲染树)和Layout Tree(布局树),再次结合绘制生成浏览器所展示的页面. 当HTML解析的时候如果遇到了JavaScript代码会停止解析HTML.而去加载相关JS代码. 由于JS会操作DOM所以浏览器将HTML解析的DOM和JS操作之后的DOM进行结合生成最终的DOM树.

解析一

解析HTML，会构建DOM Tree

HTML

DOM-Tree

解析二:

生成CSS规则 , 在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件,此时下载CSS文件是不会影响DOM的解析的,浏览器下载完毕后,会对CSS文件进行为对应的规则树(CSSOM:CSS Object Model，CSS对象模型)

CSS

CSS-模型

解析三:

构建Render Tree,当有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree.

Render Tree

需要注意的是：

  1. link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程, 这是因为Render Tree 在构建时,需要对应的CSSOM Tree
  2. Render Tree和DOM Tree并不是一一对应的关系，比如对于display为none的元素，压根不会出现在render tree中；

解析四

布局（layout）和绘制（Paint）

  • 第四步是在渲染树(Render Tree)上运行布局以计算每个节点的几何体.

    • 渲染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸、位置等信息;
    • 布局是确定呈现树中所有节点的宽度、高度和位置信息.

  • 第五步是将每个节点绘制（Paint）到屏幕上

    • 在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点
    • 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）

遇到JS代码怎么办?

浏览器在解析HTML的过程中，遇到了script元素是不能继续构建DOM树的,它会停止继续构建，首先下载JavaScript代码，并且执行JavaScript的脚本,只有等到JavaScript脚本执行结束后，才会继续解析HTML，构建DOM树.

为什么会这样做? 因为JavaScript的作用之一就是操作DOM，并且可以修改DOM, 如果我们等到DOM树构建完成并且渲染再执行JavaScript，会造成严重的回流和重绘，影响页面的性能,所以会在遇到script元素时，优先下载和执行JavaScript代码，再继续构建DOM树.

JavaScript代码解析

JavaScript代码无论是交给浏览器或者Node执行，最终都是交给CPU执行，但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行；所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；

SpiderMonkey：蜘蛛猴，第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
Chakra：微软开发，用于IE浏览器；
JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；
举例：WebKit内核 :WebKit事实上由两部分组成的：WebCore：负责HTML解析、布局、渲染等等相关的工作；JavaScriptCore：解析、执行JavaScript代码；

V8引擎原理

copied coderwhy

JavaScript通过Parse内置模块将源代码转成AST（abstract syntax tree）抽象语法树，为后面的ignition（解释器）提供源数据，进而转成bytecode（字节码：他类似于汇编代码的代码，他需要进一步的转换成汇编代码，然后在转成机器码，最后被CPU执行）。通过解释器编译的时候会收集信息，比如函数的参数信息，将代码通过TurboFan模块直接将字节码转换成优化完毕的机器码，也就意味着不需要将字节码进行汇编的转化，这就是V8运行效率高的原因。需要注意的是，函数的参数默认都是Number类型并且在函数内部进行了相关运算，在调用函数传参的是String类型会进行拼接，优化后的机器码不知道如何执行，此时会通过Deoptimization （反向优化）再次转换成字节码。
补充：
编译语言：解释性语言（JS）：运行效率较低；编译性语言：运行效率较高；

V8引擎解析图

Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换,Scanner会进行词法分析（lexical analysis），词法分析会将代码转换成tokens；接下来tokens会被转换成AST树，经过Parser和PreParser：Parser就是直接将tokens转成AST树架构,PreParser称之为预解析,这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会影响网页的运行效率,所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行,比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析；生成AST树后，会被Ignition转成字节码（bytecode），之后的过程就是代码的执行过程(如下图).

后续解析过程

Parse:块会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识JavaScript代码；如果函数没有被调用，那么是不会被转换成AST的；
Parse的V8官方文档：v8.dev/blog/scanne…
Ignition:是一个解释器，会将AST转换成ByteCode（字节码）同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
如果函数只调用一次，Ignition会执行解释执行ByteCode；
Ignition的V8官方文档：v8.dev/blog/igniti…
TurboFan:是一个编译器，可以将字节码编译为CPU可以直接执行的机器码；如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码；
TurboFan的V8官方文档：v8.dev/blog/turbof…
垃圾回收:JavaScript代码的执行过程，事实上V8的内存回收也是其强大的另外一个原因;
Orinoco模块，负责垃圾回收，将程序中不需要的内存回收；
Orinoco的V8官方文档：v8.dev/blog/trash-…

详细参考图

Parse

Ignition

TurboFan

整体流程

avatar
文章
阅读
粉丝