浏览器之 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 编译器

相关文章
|
25天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
44 1
|
29天前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
104 48
|
1月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
1月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
29天前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
34 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
111 1
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
246 9
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
146 0
|
2月前
|
JavaScript 前端开发 Java
JS引擎V8
【10月更文挑战第9天】
33 0
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
29 0