一、浏览器渲染过程
在浏览器输入一个网址（如：juejin.cn/user/906424… ）
- 首先会拿到html资源，一般为index.html。
- 接下来浏览器将html标签解析为Dom树。再次过程中如果遇到js会暂停先解析js文件（因为js可操作 Dom 节点）。
- 浏览器会照样式规则，解析css样式。
- 解析完成的css样式和Dom树相结合，生成渲染树，会对渲染树经过布局之后最终展示出来。
二、js引擎
上文说到在资源加载过程中会有解析js的过程，就是不能直接会被cpu执行，要通过js引擎将js代码转化为机器代码。
浏览器内核和js引擎
如下图：webkit是浏览器内核，其包括两部分：WebCore(用于html解析、布局、渲染等工作)，JavaScriptCore(js引擎，用于解析、执行js代码)。
V8引擎执行js代码过程
v8引擎是谷歌浏览器的js引擎。其解析js代码的过程如下图：
- 首先将js代码解析为AST语法树。
- AST语法树通过解释器被解释为字节码。
- 根据不同的cpu将字节码转换为对应的机器代码。
- v8引擎可以通过解释器搜集函数的执行次数，通过TurboFan将函数标记为热函数，将其变为优化之后的机器码，以后再执行就可以直接执行机器码。
1.关于AST语法树
AST语法树应用广泛，如：ts转换为js语言就是先将ts转换为AST语法树，对AST语法树进行修改生成新的AST语法树，通过generate code将新的js语法树转换为js代码；vue的tamplate也是先转换为AST语法树，之后将AST语法树转换为虚拟节点。
2.为什么要把AST语法树解析为字节码，不直接解释为机器代码？
这是因为不同的cpu对应的机器代码不同，字节码转换为机器代码的效率比js代码直接转换更快，所以将其先转换为字节码。
3.关于ts和js的运行效率
js中的函数由于不能指定类型，对于数值和字符串的运算是不同的，会做一个反向操作将机器码转换为字节码再运行。ts可以指定类型，从某重程度上提高了运行效率。
4.解析和预解析
并不是所有的js代码一开始就会被执行，那么对所有js代码进行解析会影响效率，所以将不必要的函数进行预解析，也就是解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行。
本文是学习王元红老师深入JavaScript高级语法课程的个人总结，素材来源于课程。
