摘要：书接上文浏览器之硬件加速机制本章主要讲解中广泛使用的引擎和引擎。解释器在某些引擎中，解释器主要是接收字节码，解释执行这个字节码，同时也依赖垃圾回收机制等。
微信公众号：爱写bugger的阿拉斯加前言
如有问题或建议，请后台留言，我会尽力解决你的问题。
此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。
而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。
书接上文 浏览器之硬件加速机制
本章主要讲解 WebKit 中广泛使用的 JavaScriptCore 引擎和 V8 引擎。
1. javaScript 简介JavaScript 是一种脚本语言，主要用在 Web 的客户端，是控制网页客户端的逻辑，例如同用户的交互，异步通信等需求。
本质上它是一种解释语言，函数是它的第一等公民，也就是函数也能够当作参数或者返回值来传递。
JavaScript 语言的一个重大特点就是，它是一种无类型语言，或者说是动态类型语言。
这一特性导致我们没有办法有编译的时候知道变量的类型，所以只能在运行的时候才能确定。
推动 JavaScript 运行速度提高的另一大利器是 JIT（Just-In-Time）技术，它不是一项全新的技术，其作用是解决解释性语言的性能问题。
主要思想是当解释器将代码解释成内部表示的时候，JavaScript 的执行环境不仅是解释这些内部表示，而且将其中一些字节码（主要是使用率高的部分）转成本地代码（汇编代码），这样可以被 CPU 直接执行，而不是解释执行，从而极大提高性能。
1.2 JavaScript 引擎JavaScript 引擎就是能够将 JavaScript 代码处理并执行的运行环境。
JavaScript 引擎包括以下部分：
编译器：将源代码编译成抽象语法树，在某些引擎中还包含将抽象语法树转换成字节码。
解释器：在某些引擎中，解释器主要是接收字节码，解释执行这个字节码，同时也依赖垃圾回收机制等。
JIT 工具：一个能够 JIT 的工具，将字节码或者抽象语法树转换在本地代码，当然它也需要依赖牢记。
垃圾回收器和分析工具（Profiler）：负责垃圾回收和 收集引擎中的信息，帮助改善引擎的性能和功效。
1.3 JavaScript 引擎和渲染引擎从模块上看，它们是两个独立的模块，分别负责不同的事情：
JavaScript 引擎负责执行 JavaScript 代码，而渲染引擎负责渲染网页。
JavaScript 引擎提供调用接口给渲染引擎，以便让渲染引擎使用 JavaScript 引擎来处理JavaScript 代码并获取结果。
这并不是全部，JavaScript 引擎需要能够访问渲染引擎构建的 DOM 树，所以 JavaScript 引擎通常需要提供桥接的接口，而渲染引擎则根据桥接接口来提供让 JavaScript 访问 DOM 的能力。
在现在众多的 HTML5 能力中，很多是通过 JavaScript 接口提供给开发者的，所以这部分同样需要根据桥接接口来实现具体类，以便让 JavaScript 引擎能够回调渲染引擎的具体实现。
在 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 代码结构 1.2.2 V8 工作过程V8 工作过程有两个阶段，第一是编译，第二是运行。
鉴于 JavaScript 语言的工作方式，它们都是在用户使用它们的时候发生。
同时，V8 还有一个特点是 延迟（deferred）思想，这使得很多 JavaScript 代码的编译直到运行的时候被调用到才会发生，这样可以减少时间开销。
先看编译阶段：
从图中可以看出，首先它也是将源代码转变成抽象语法树，V8 引擎并不将抽象语法树转变成字节码或者其他中间表示，而是通过 JIT 编译器的全代码生成器（full code generator）从抽象语法树直接生成本地代码，这样子减少了转换时间。
再看运行阶段：
V8 支持 JavaScript 代码运行用到了一堆类。
V8 引擎是按照图 9-17 中描述的过程来执行的，实际过程更为复杂，而且还有垃圾回收等处理。
1.3 JavaScriptCore 引擎JavaScriptCore 引擎是 WebKit 中默认的 JavaScript 引擎，也是苹果开源 WebKit 项目之后，开源的另外一个重要的项目。
1.3.2 架构和模块 1.3.2.1 代码结构演进过程：
首先是词法和语法分析，然后使用底层解释器来解释那些字节码。
之后，通过简单的 JIT 编译器将它们转化成本地代码，最后就是引入 DFG JIT 编译器。
最后送上 编写高效JavaScript代码
希望本文对你有点帮助。
下期分享 【第九章 JavaScript 引擎】 敬请期待。
对 全栈开发 有兴趣的朋友可以扫下方二维码关注我的公众号 —— 爱写bugger的阿拉斯加
分享 web 开发相关的技术文章，热点资源，全栈程序员的成长之路。
大家一起交流成长。
只要关注公众号并回复 福利 便送你六套视频资源： Python、Java、Linux、Go、vue、react、javaScript
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97684.html
摘要：异步任务必须指定回调函数，当异步任务从任务队列回到执行栈，回调函数就会执行。事件循环主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。 参考链接：这一次，彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程，JS运行机制...
摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 ...
摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 ...
摘要：在中渲染树中的每个节点即是一个渲染器或者渲染器对象。计算的样式每个渲染器对象代表一个矩形区域通常是和一个节点的盒模型相对应。坐标系统是相对于根渲染器的。根渲染器的定位为和大小即为浏览器窗口的可视化部分比如。渲染器作废其在屏幕上的矩形区域。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 ...
摘要：译者注翻译一个对新手比较友好的工作原理解析系列文章注意以下全部是概念经验丰富的老鸟可以离场啦正文从这里开始随着的流行团队们正在利用来支持多个级别的技术栈包括前端后端混合开发嵌入式设备以及更多这篇文章旨在成为深入挖掘和实际上他是怎么工作的系列 译者注 翻译一个对新手比较友好的 JavaScript 工作原理解析系列文章 注意: 以下全部是概念,经验丰富的老鸟可以离场啦 正文从这里开始 随...
阅读 1663·2021-09-26 09:55
阅读 3677·2021-09-22 15:31
阅读 7178·2021-09-22 15:12
阅读 2186·2021-09-22 10:02
阅读 4593·2021-09-04 16:40
阅读 989·2019-08-30 15:55
阅读 2990·2019-08-30 12:56
阅读 1797·2019-08-30 12:44
