Web浏览器

2769279883
118 阅读4分钟

浏览器组成

  1. shell部分
  2. 内核部分：渲染引擎（语法规则和渲染）、js引擎、其他模块

浏览器内核

  1. Gecko :早期被Mozilla Firefox浏览器浏览器使用;
  2. Trident :微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink ;
  3. Webkit :苹果基于KHTML开发、开源的,用于Safari , Google Chrome之前也在使用;
  4. Blink :是Webkit的一一个分支, Google开发,目前应用于Google Chrome、Edge、 Opera等 ;
  • 浏览器内核又称排版引擎、也称浏览器引擎、页面渲染引擎或样板引擎

浏览器的渲染过程

  1. 但是在这个执行过程中，HTML解析的时候遇到了JavaScript标签,应该怎么办呢?
    • 会停止解析HTML ,而去加载和执行JavaScript代码; image.png
  2. 那么, JavaScript代码由谁来执行呢?
  • JavaScript引擎

常见的js引擎

  • SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开放
  • Chakra：微软开发，由于IE浏览器
  • JavaScriptCore：Webkit的JavaScript引擎，Apple公司开发
  • V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多的浏览器中脱颖而出

js引擎历史

  1. 2001年发布ie6，首次实现对js引擎的优化。
  2. 2008年Google发布最新浏览器Chrome，它是采用优化后的javascript引擎，引擎代号V8，因能把js代码直接转化为机械码来执行，进而以速度快而闻名。

浏览器内核与js引擎的关系

以Webket为例，Webkit事实上由两部分组成：

  • WebCore：负责HTML解析、布局渲染等等相关工作
  • JavaScriptCore：解析、执行JavaScript代码

v8引擎的原理

  • v8是用C++编写的开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等
  • 它实现了ECMAScript和WebAssembly，并在Window7或更高版本，macOS 10.12+和使用x64,IA-32,ARM或MIPS处理器的Linux系统。
  • v8可以独立运行，也可以嵌入到任何C++应用程序中。

image.png

v8引擎的架构

V8引擎本身的源码非常复杂,大概有超过100w行C+ +代码,通过了解它的架构,我们可以知道它是如何对JavaScript执行的:

  1. Parse模块会将JavaScript代码转换成AST (抽象语法树) , 这是因为解释器并不直接认识JavaScript代码;
    • 如果函数没有被调用,那么是不会被转换成AST的;
    • Parse的V8官方文档: v8.dev/blog/scanne…
  2. Ignition是一个解释器,会将AST转换成ByteCode (字节码)
    • 同时会收集TurboFan优化所需要的信息(比如函数参数的类型信息,有了类型才能进行真实的运算) ;
    • 如果函数只调用一-次 , Ignition会执行解释执行ByteCode ;
    • Ignition的V8官方文档: v8.dev/blog/igniti…
  3. TurboFan是一个编译器,可以将字节码编译为CPU可以直接执行的机器码;
    • 如果一个函数被多次调用,那么就会被标记为热点函数,那么就会经过TurboFan转换成优化的机器码,提高代码的执行性能;
    • 但是,机器码实际上也会被还原为ByteCode ,这是因为如果后续执行函数的过程中,类型发生了变化(比如sum函数原来执行的是number类型,后来执行变成了string类型) , 之前优化的机器码并不能正确的处理运算,就会逆向的转换成字节码;
    • TurboFan的V8官方文档: v8.dev/blog/turbof…

v8引擎的官方解析图

image.png

v8执行的细节

  1. 那么我们的JavaScript源码是如何被解析( Parse过程)的呢?
  2. Blink将源码交给V8弓|擎, Stream获取到源码并且进行编码转换;
  3. Scanner会进行词法分析( lexical analysis ) ,词法分析会将代码转换成tokens ;
  4. 接下来tokens会被转换成AST树,经过Parser和PreParser :
    • Parser就是直接将tokens转成AST树架构;
    • PreParser称之为预解析,为什么需要预解析呢?
      • 这是因为并不是所有的JavaScript代码,在一 开始时就会 被执行。那么对所有的JavaScript代码进行解析,必然会影响网页的运行效率;
      • 所以V8弓|擎就实现了Lazy Parsing (延迟解析)的方案，它的作用是将不必要的函数进行预解析,也就是只解析暂时需要的内容,而对函数的全量解析是在函数被调用时才会进行;
      • 比如我们在一个函数outer内部定义 了另外一个函数inner ,那么inner函数就会进行预解析;
  5. 生成AST树后,会被Ignition转成字节码( bytecode) ,之后的过程就是代码的执行过程(后续会详细分析)。
avatar
文章
阅读
粉丝