JS基础运行知识

JS代码是如何在浏览器中运行的?

1. 浏览器通过DNS解析域名为IP地址,访问IP地址返回html文件
2. html文件下载完成后,解析html文件
   (1) 解析到script标签,就会去服务器下载对应的JS文件
   (2) 遇到link标签,就会去服务器下载对应的css文件
3. 等到js文件下载完成后,浏览器就会通过浏览器内核,解析运行JS代码

浏览器渲染过程

1. 将html解析形成DOM树,此时遇到JS标签则会体质解析html,优先通过JS引擎加载和执行JS代码(这里可能会执行DOM操作),最后形成DOM结构树
2. 将css层叠样式表解析成样式规则
3. 将DOM树和样式规则组合形成渲染树(RenderTree)并且布局引擎(Layout)进行布局操作
4. 绘制引擎(paint)将渲染树绘制并且展示在浏览器页面上

注意: 在html被浏览器解析过程中,如果遇到了JS标签,则会停止解析html,优先加载和执行JS代码

JS引擎(V8引擎)

1. 浏览器内核与JS引擎的关系

   浏览器内核包含JS引擎,JS引擎只负责解析和JS代码

2. V8引擎工作原理
   (1) 解析JS源代码(词法解析,语法解析)
   (2) 解析后形成AST抽象语法树
   (3) 通过Ignition库收集信息并编译成字节码,再把字节码编译成机器码执行运行结果

3. Q: 如果有一段JS代码频繁被使用,每次都把这部分代码转成字节码再编译成机器码会消耗很多性能,该如何解决?
   A: Ignition库会将频繁调用的JS代码标记为hot,之后通过TurboFan库转换为优化后的机器码进行存储,下次再调用时直接调用存储的机器码运行

4. Q: 因为JS代码是弱类型语言,如果在一段频繁调用的JS代码使用逻辑运算时,更改了参数类型的值,导致计算方式不一致生成的机器码也不一致,该如何解决?
   A: JS引擎会有逆优化(Deoptimization)的操作,反向转为字节码,再通过字节码转为机器码,当然这是一个比较消耗性能的操作
   M: 这也是为什么在解析TypeScript转换的JS代码时效率更高的原因之一,TypeScript做了类型的强校验,省去了逆优化的操作

5. Q: JS引擎为什么先转为字节码,再转为机器码,而不是直接转为机器码?
   A: 因为机器码比较占内存空间,字节码所占用的空间远远低于了机器码,总结就是牺牲时间来换取空间