浏览器工作原理和V8引擎

看图看图，看图一下就懂了

一、浏览器渲染过程

1.1首先会下载html，把html转化成dom树（dom操作后面再说，js引擎）

1.2解析css形成样式规则，然后与1.1结合在一起

1.3形成渲染树，然后再进行布局（不同的浏览器布局有差异）（回流）

1.4最后进行绘制元素，展示效果（重绘）

二、V8引擎

2.1首先说一下常见的js引擎

①spiderMonkey，第一代js引擎，是由js作者开发的（Brendan Eich）

②chakra，用于ie浏览器的，由微软开发

③javaScriptCore（简称JsCore），Webkit中的js引擎，由apple开发，用于小程序...

④V8，由Google开发，在github搜v8，你会发现v8是大部分是由c++开发的（如下图）

2.2重点来了

先说一下，把js代码交给cpu执行，但是cpu是不认识js的，因为js是高级程序语言，因此要把js转换为机器语言，如0010101

①内核blink从html中下载js文件，然后把js代码给v8引擎

②进行一系列的编码，来到了scanner扫描器

③scanner扫描器，先处理词法分析，再处理语法分析，然后形成AST树（抽象语法树）

（ProParser是预解析，即在js代码中如果定义了一个函数，却从头到尾没调用过，那么就会对这个函数先进行预解析，不转字节码，等这个函数被调用时再转码。好处：一个函数根本就没用过，还去cpu中执行的话就浪费资源了）

这个是自动生成ast树网址，AST explorer

这个过程会创建GO，javaScript作用域提升/GO、VO，AO，VE什么意思_ispaomoya博客-CSDN博客

④ast树使用Ignition解释器转换为字节码，然后将字节码通过TurboFan编译器转为机器码

（为什么先要转字节码？在不同的操作系统，cpu执行的机器指令是不同的，如liunx，win，ios，转字节码就是为了适配各种系统）

（上图是V8官方图）

（上图是将js代码转成AST树）

好啦，就到这里啦