看图看图,看图一下就懂了
一、浏览器渲染过程
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树)
好啦,就到这里啦