JS进阶（一）浏览器工作原理

最近对js进行深入学习，以下是自己对浏览器工作原理进行了一下总结。

浏览器工作原理

第一阶段：

1. 地址栏输入url，服务器返回网页（html文件）等资源；
2. 浏览器开始解析该网页，解析的过程中遇到css，则去服务器下载对应css文件；遇到script标签，则再去下载js文件。

浏览器渲染页面过程

浏览器下载这些html、css和js文件之后，浏览器内核（浏览器引擎）就开始解析这些文件，最后渲染成网页。

第二阶段：

1. 首先，HTML解析器先将HTML解析，构造DOM树；
2. 解析过程中遇到JavaScript标签时，会停止解析HTML流程，而去加载js代码，并由js引擎来执行这些js代码；
3. 接着，解析CSS样式，根据CSS规则确定每个DOM节点的计算样式，生成渲染树；
4. 渲染树根据DOM树和计算好的样式生成Layout Tree；
5. 通过遍历Layout Tree生成绘制顺序表，根据顺序表来绘制，然后转化为像素点，经过一序列转化，最终渲染完成；

问题：为什么不直接跳过js代码的加载和执行，等解析HTML解析完后再执行？
因为浏览器不知道js执行是否会改变当前页面的HTML结构，如果js对DOM进行操作，那么之前的HTML解析就没有意义了。所以要script标签放在合适的位置，或异步加载执行js，提高执行效率。

JavaScript引擎

因为js是高级语言，需要使用js引擎将js代码翻译成机器语言，才能被执行。 而V8引擎便是js引擎中的其中一种。

v8引擎原理：

原理流程：

1. 首先，v8引擎将js源代码进行Parse解析，转换成AST（抽象语法树）；
2. Ignition解释器将AST抽象语法树转换为对应可跨平台的bytecode字节码；同时收集TurboFan优化所需要的信息；
3. 再由字节码再转成汇编码，接着转成机器码，最后执行；
4. TurboFan是个编译器，可以将bytecode字节码直接转换为机器码；
   • 如果一个函数执行频率很高时，将会被标记为热函数，经过TurboFan转换成优化后的机器码，下次再执行该函数时，不需要再进行字节码的转换过程了（第三步），提高代码运行效率。
   • 如果在后续该函数的执行中，类型发生了改变，优化后的机器码将不能正常处理，会逆向转换为字节码，再进行字节码的转换过程。

问题：为什么AST不直接转为机器码，而是要先转换成bytecode字节码？
因为浏览器不知道js执行是否会改变当前页面的HTML结构，如果js对DOM进行操作，那么之前的HTML解析就没有意义了。所以要script标签放在合适的位置，或异步加载执行js，提高执行效率。

以上便是我自己对浏览器渲染页面的过程和V8引擎原理的一些总结。