浏览器之 javaScript 引擎

简介: 此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。书接上文 浏览器之硬件加速机制本章主要讲解 WebKit 中广泛使用的 JavaScriptCore 引擎和 V8 引擎。

前言


此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。

而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。

书接上文 浏览器之硬件加速机制


本章主要讲解 WebKit 中广泛使用的 JavaScriptCore 引擎和 V8 引擎。


1. javaScript


简介

JavaScript 是一种脚本语言,主要用在 Web 的客户端,是控制网页客户端的逻辑,例如同用户的交互,异步通信等需求。


本质上它是一种解释语言,函数是它的第一等公民,也就是函数也能够当作参数或者返回值来传递。


JavaScript 语言的一个重大特点就是,它是一种无类型语言,或者说是动态类型语言。

这一特性导致我们没有办法有编译的时候知道变量的类型,所以只能在运行的时候才能确定。


推动 JavaScript 运行速度提高的另一大利器是 JIT(Just-In-Time)技术,它不是一项全新的技术,其作用是解决解释性语言的性能问题。


主要思想是当解释器将代码解释成内部表示的时候,JavaScript 的执行环境不仅是解释这些内部表示,而且将其中一些字节码(主要是使用率高的部分)转成本地代码(汇编代码),这样可以被 CPU 直接执行,而不是解释执行,从而极大提高性能。


1.2 JavaScript 引擎


JavaScript 引擎就是能够将 JavaScript 代码处理并执行的运行环境。


微信图片_20220512123239.png


JavaScript 引擎包括以下部分:


  • 编译器:将源代码编译成抽象语法树,在某些引擎中还包含将抽象语法树转换成字节码。
  • 解释器:在某些引擎中,解释器主要是接收字节码,解释执行这个字节码,同时也依赖垃圾回收机制等。
  • JIT 工具:一个能够 JIT 的工具,将字节码或者抽象语法树转换在本地代码,当然它也需要依赖牢记。
  • 垃圾回收器和分析工具(Profiler):负责垃圾回收和 收集引擎中的信息,帮助改善引擎的性能和功效。


1.3 JavaScript 引擎和渲染引擎


从模块上看,它们是两个独立的模块,分别负责不同的事情:


JavaScript 引擎负责执行 JavaScript 代码,而渲染引擎负责渲染网页。


JavaScript 引擎提供调用接口给渲染引擎,以便让渲染引擎使用 JavaScript 引擎来处理JavaScript 代码并获取结果。


这并不是全部,JavaScript 引擎需要能够访问渲染引擎构建的 DOM 树,所以 JavaScript 引擎通常需要提供桥接的接口,而渲染引擎则根据桥接接口来提供让 JavaScript 访问 DOM 的能力。


在现在众多的 HTML5 能力中,很多是通过 JavaScript 接口提供给开发者的,所以这部分同样需要根据桥接接口来实现具体类,以便让 JavaScript 引擎能够回调渲染引擎的具体实现。


微信图片_20220512123340.png


在 WebKit 中,两种引擎通过桥接接口来访问 DOM 结构,这对性能来说是一个重大的损失,因为每次 JavaScript 代码访问 DOM 都需要通过复杂和低效的桥接接口来完成。


1.2 V8 引擎


1.2.1 基础


V8 是一个开源项目,也是一个 JavaScript 引擎的实现。


V8 支持众多的操作系统。包括但是不限于 Windows、Liunx、Android、Mac OSX 等。同时它也能够支持众多的硬件架构,例如 IA32、X64、ARM 、MIPS 等。


1.2.1.1 代码结构


微信图片_20220512123412.png


1.2.2 V8 工作过程


V8 工作过程有两个阶段,第一是编译,第二是运行。



鉴于 JavaScript 语言的工作方式,它们都是在用户使用它们的时候发生。

同时,V8 还有一个特点是 延迟(deferred)思想,这使得很多 JavaScript 代码的编译直到运行的时候被调用到才会发生,这样可以减少时间开销。


先看编译阶段:


微信图片_20220512123435.png


从图中可以看出,首先它也是将源代码转变成抽象语法树,V8 引擎并不将抽象语法树转变成字节码或者其他中间表示,而是通过 JIT 编译器的全代码生成器(full code generator)从抽象语法树直接生成本地代码,这样子减少了转换时间。


再看运行阶段:


V8 支持 JavaScript 代码运行用到了一堆类。


微信图片_20220512123454.png


V8 引擎是按照图 9-17 中描述的过程来执行的,实际过程更为复杂,而且还有垃圾回收等处理。


1.3 JavaScriptCore 引擎


JavaScriptCore 引擎是 WebKit 中默认的 JavaScript 引擎,也是苹果开源 WebKit 项目之后,开源的另外一个重要的项目。


1.3.2 架构和模块


1.3.2.1 代码结构


微信图片_20220512123527.png

演进过程:


首先是词法和语法分析,然后使用底层解释器来解释那些字节码。


之后,通过简单的 JIT 编译器将它们转化成本地代码,最后就是引入 DFG JIT 编译器

相关文章
|
14天前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
23 1
|
3月前
|
JavaScript 前端开发 算法
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?
|
3月前
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
388 0
|
4月前
|
Web App开发 JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
280 0
|
1天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
9 4
|
8天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
12天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
20 3
|
2月前
|
JavaScript 前端开发 开发工具
Python之JavaScript逆向系列——3、浏览器的开发工具——源代码的使用
Python之JavaScript逆向系列——3、浏览器的开发工具——源代码的使用
17 0
|
3月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
JavaScript DOM 操作:如何检测浏览器是否支持某个特性?
24 0