浏览器渲染页面和v8引擎的底层原理

浏览器渲染页面和v8引擎的底层原理

浏览器的工作原理

总结：首先访问一个地址之后，先从你的服务器中请求静态资源。它是一个最基本的html文件。然后遇到link标签引入的css文件后，再去服务器中请求并下载。遇到script标签的js文件，也去服务器中请求并下载。

浏览器页面渲染过程

总结：html通过HTMLPaeser来进行一个解析，转换成DOM Tree的形式。上面的DOM指的是js对html的一些操作。style Sheets通过CSS Parse来进行一个解析，专换成相对应的Style Rules也就是css规则。然后通过Attachment进行一个结合，然后会组合成Render Tree。然后通过Layout进行一个布局，通过Painting一个绘画最后是一个展示。

JS引擎的一个理解

JavaScript是一门高级的编程语言。

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

常见的一些Javascript引擎

• SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
• Chakra：微软开发，用于IT浏览器；
• JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
• V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；
• 等等…

V8引擎的原理

解析JavaScript源代码，首先通过Parse来进行一个词法分析、语法分析。然后根据你的词法分析转换成AST抽象语法树，AST抽象语法树通过ignition解析成字节码。当我们js中有使用频繁的函数后会做一个标记通过TueboFan来进行一个·优化。MachineCode是优化后的机器码、

下面是V8引擎官方的解析：

V8引擎执行的细节

• Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换；

• Scanner会进行词法分析（lexical analysis），词法分析会将代码转换成tokens；

• 接下来tokens会被转换成AST树，经过Parser和PreParser：

• ​ Parser就是直接将tokens转成AST树架构；

• ​ PreParser称之为预解析，为什么需要预解析呢？

  ​ 这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会 影响网页的运行效率；

  ​ 所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂 时需要的内容，而对函数的全量解析是在函数被调用时才会进行；

  ​ 比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析；

​ 比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析；

• 生成AST树后，会被Ignition转成字节码（bytecode），之后的过程就是代码的执行过程（后续会详细分析）。