我用一张图彻底理解了浏览器的解析机制

Posted 2021-08-23 啊a阿花

浏览器对html、css和javascript的解析过程，对于前端学习相关知识的理解很有帮助，毕竟万丈高楼平地起吗,而且面试的时候很容易会问到浏览器解析过程的

🍔html+css渲染

前端页面实际上都是一些html代码，浏览器会通过html parse对html代码进行解析，生成dom树，css一样会进行解析然后通过attachment将html和css进行复加，生成render tree渲染树和layout tree布局树，两者结合起来进行绘制，便能在浏览器上看见展示的页面了。

当执行过程中遇到jacascript代码时会停止html解析，去加载javascript代码，因为JavaScript代码会操作dom，使dom树发生改变。

🍕javascript解析机制

javascript是高级语言，javascript引擎的作用就是将他们转换为汇编语言再转换为计算机能认识的机器语言

🍬javascript引擎解析Javascript代码会先将其抽象成语法树，解析器识别后解析成字节码，然后再解析成汇编代码，汇编代码再解析计算机能识别的机器语言，最后cpu执行。
🍬谷歌的v8引擎会在收集到足够的代码信息后直接将抽象语法树优化成机器码（这会省去后面的过程，极大的加快浏览器对JavaScript的解析时间），当收集到的代码信息突然发生改变时，优化后的机器码会反向优化成字节码，防止错误，也就是红线的路径，比如javascript传入的sun()函数一直都是number类型，突然变成了string就会反向优化成字节码

🍟chrome浏览器解析过程

当浏览器解析完html、css和javascript之后，中间层会根据他们发起的请求调用操作系统进行相应的操作，如文件读取等。