一个浏览器上面呈现的内容 是怎么生成的呢?

 

浏览器的渲染过程:

浏览器从服务器下载完文件后,就要对其进行解析和渲染.
HTML Parser将HTML解析转换成DOM树.
CSS Parser将样式表解析转换成CSS规则树.
转换完成后的DOM树和CSS规则树,附加在一起形成渲染树.
形成渲染树之后,并没有马上进行渲染,而是需要进行布局一番,才进行重画出来

 

js由谁来执行呢? js由JavaScript引擎来解析并执行.

js引擎做的事情就是让js能够变成cpu能够执行的指令.
所以引擎里的三个功能分别做了三件事:
1: parse模块:将JavaScript代码转换成AST(抽象语法树), 主要对js源代码进行词法分析和语法分析
2: Ignition模块：一个解释器，可以将AST转换成ByteCode（字节码）。
3: TurboFan模块：一个编译器，可以将字节码编译为CPU认识的机器码。

 

V8引擎执行过程

V8引擎的官方在Parse过程提供了以下这幅图，最后就来详细了解一下Parse具体的执行过程。

• ①Blink内核将JS源码交给V8引擎；
• ②Stream获取到JS源码进行编码转换；
• ③Scanner进行词法分析，将代码转换成tokens；
• ④经过语法分析后，tokens会被转换成AST，中间会经过Parser和PreParser过程：
  • Parser：直接解析，将tokens转成AST树；
  • PreParser：预解析（为什么需要预解析？）
    • 因为并不是所有的JavaScript代码，在一开始时就会执行的，如果一股脑对所有JavaScript代码进行解析，必然会影响性能，所以V8就实现了Lazy Parsing（延迟解析）方案，对不必要的函数代码进行预解析，也就是先解析急需要执行的代码内容，对函数的全量解析会放到函数被调用时进行。
• ⑤生成AST后，会被Ignition转换成字节码，然后转成机器码，最后就是代码的执行过程了；