你可能不知道的JavaScript-1

标签：元素浏览器 DOM JavaScript 可能引擎知道 CSS

1.防御式CSS

2.js的应用领域

JavaScript中让人迷惑的知识点

3.一个网页URL从输入到浏览器中到显示经历过怎么样的解析过程呢

2. 使用 documentFragment

3. 避免使用表格布局

4. 使用 CSS 转换和动画

5. 避免使用内联样式

6. 使用 requestAnimationFrame

3. JavaScriptCore (JSC)

（本专栏将涉及作用域,高阶函数,闭包，面向对象，基础，原型链，原型，ES新特性，事件循环，宏任务，微任务，内存管理，Promise,异步函数，防抖，节流......一系列js高级语法欢迎大家订阅。）

1.防御式CSS

防御式CSS是一种编写CSS的方法，旨在提高样式的健壮性和可维护性。以下是一些实现防御式CSS的关键策略：

避免使用!important

- 尽量避免使用!important，因为它会破坏CSS的优先级规则，导致样式难以调试和维护。

使用具体的类名

- 使用具体且有意义的类名，而不是通用的选择器。例如，使用.button-primary而不是.btn。

模块化和组件化

- 将样式划分为独立的模块或组件，每个模块或组件负责一个特定的功能或样式。这有助于减少样式冲突和重复代码。

使用BEM命名规范

- BEM（Block Element Modifier）是一种命名约定，可以帮助你更好地组织和管理CSS类名。例如：

.block {}
.block__element {}
.block--modifier {}

避免过度嵌套

- 过度嵌套会导致选择器过于复杂，增加样式的特异性。尽量使用扁平化的选择器结构。

使用预处理器

- 使用CSS预处理器（如Sass、Less）可以提供变量、混合、嵌套等功能，使CSS代码更易于管理和维护。

媒体查询的合理使用

- 在响应式设计中，合理使用媒体查询来适应不同的屏幕尺寸。确保媒体查询的顺序和逻辑清晰。

默认值和回退

- 为属性提供默认值，并在必要时提供回退值，以确保在不同浏览器中的兼容性。例如：

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

使用CSS重置或规范化

- 使用CSS重置或规范化库（如Normalize.css）来消除不同浏览器之间的默认样式差异。

性能优化

- 避免使用昂贵的CSS属性（如box-shadow、filter等），并尽量减少布局重排和重绘。

通过以上策略，可以编写出更加健壮、可维护和高效的CSS代码。

2.js的应用领域

分类	技术
Web开发	JavaScript, React开发, Vue开发, Angular开发
移动端开发	React Native, Weex
小程序开发	微信小程序, 支付宝小程序, uniapp, Taro
桌面应用开发	Electron, 编辑器VSCode
后端开发	Node.js, Express, Koa, Egg.js,Nest.JS

JavaScript中让人迷惑的知识点

3.一个网页URL从输入到浏览器中到显示经历过怎么样的解析过程呢

DNS 解析：浏览器首先会检查本地缓存（包括操作系统缓存、浏览器缓存等），如果找不到对应的 IP 地址，则会向本地配置的 DNS 服务器发送请求查询域名对应的 IP 地址。DNS 服务器可能需要进一步查询根域名服务器或其他权威 DNS 服务器以获取正确答案。
建立 TCP 连接：获得正确的IP地址之后，浏览器使用HTTP或HTTPS协议与目标Web服务器建立TCP连接。对于HTTPS站点，还需要进行SSL/TLS握手来加密通信通道。
发送 HTTP 请求：一旦建立了连接，浏览器就会通过该连接向Web服务器发送一个HTTP GET请求，请求指定URL所指向的资源。
服务器处理请求并返回响应：Web服务器接收到请求后，根据请求中的信息找到对应的文件或者调用相关程序生成页面内容，然后将这些内容以HTTP响应的形式发回给浏览器。响应包含了HTML文档、CSS样式表、JavaScript脚本等。
渲染引擎解析HTML：浏览器接收到响应后，其内置的渲染引擎开始解析返回的HTML代码，构建DOM树结构；同时下载相关的CSS文件，并依据CSS规则计算样式布局；接着执行嵌入或引用的JavaScript脚本来动态修改页面内容及行为。
加载其他资源：根据HTML文档中标记出的各种外部链接（如图片、字体文件等），浏览器继续发起额外的网络请求来获取这些资源，并按照DOM模型的要求插入到适当位置。
呈现页面：最后，所有必要元素都加载完毕后，浏览器将完成绘制操作，使得用户能够看到完整的网页视图。此时，任何动态效果（由JavaScript驱动）也会开始展现出来。
交互：用户可以与已经完全加载并显示出来的网页进行交互，比如点击按钮、填写表单等，这可能会触发更多的异步请求（例如AJAX调用）从而更新部分页面内容而不需重新加载整个页面。

4.浏览器内核

1.是什么

浏览器内核是指浏览器中负责解析 HTML、CSS、JavaScript 等文件的核心组件，也被称为渲染引擎

常见的浏览器内核

Trident （三叉戟） Trident 内核最初是由 Microsoft 开发的，用于 Internet Explorer 浏览器

- 后来，一些国内的浏览器厂商（如 360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器）也采用了 Trident 内核

Gecko （壁虎） Gecko 内核最初是由 Mozilla 开发的，用于 Firefox 浏览器

- Gecko 内核的优势在于支持 HTML5、CSS3 等最新的 Web 标准，并且具有较高的性能和稳定性

Presto（急板乐曲）-> Blink （眨眼） Presto 内核最初是由 Opera 开发的，用于 Opera 浏览器

- 后来，Opera 采用了 Blink 内核，Blink 内核基于 WebKit 内核进行了改进和优化，能够更快地渲染页面，并且支持更多的 HTML5、CSS3 特性

Webkit WebKit 内核最初是由 Apple 开发的，用于 Safari 浏览器

- 现在，很多国内的浏览器厂商（如 360极速浏览器、搜狗高速浏览器）也采用了 WebKit 内核
- 除了桌面浏览器，WebKit 内核在移动设备上也得到了广泛的应用，如 iOS 和 Android 系统的浏览器

Webkit -> Blink Blink 内核最初也是由 Google 开发的，用于 Chrome 浏览器

- Blink 内核基于 WebKit 内核进行了改进和优化，并且具有更高的性能和更好的兼容性
- 现在，Microsoft Edge 也采用了 Blink 内核

2.浏览器的渲染过程

流程

（1）解析 HTML 文件，构建 DOM（文档对象模型）树。这个树代表了页面上所有元素的节点结构

（2）解析 CSS 文件，构建 CSSOM 树。

（3）将 DOM 树和 CSSOM 树合并成渲染树。

（4）生成布局树，计算每个元素在页面上的位置和大小。

（5）根据布局绘制渲染树，将渲染树上的元素绘制成屏幕上的像素。

（6）合成层，将多个图层合并成一个图层，以便使用 GPU 进行加速。

（7）使用 GPU 加速，对图层进行合成，形成最终的图像。

（8）如果发生重绘或回流操作，重新执行步骤 4-7。

（9）有些操作会触发重绘或回流，如改变元素的位置、大小、颜色等。这些操作会影响页面的性能和渲染速度，因此需要尽可能避免。（后续会详细讲解）

浏览器渲染流程(英语词汇总结)

英文	中文	名词含义
HTML Parser	HTML解析器	解析HTML文档，从中构建出DOM树
DOM Tree	DOM树	表示HTML文档的树形结构，每个节点都是文档中的一个对象
CSS Parser	CSS解析器	解析CSS文件或样式，生成页面的样式规则
Style Rules	样式规则	CSS解析后生成的具体样式指导，如字体大小、颜色等
Attachment	附加	将样式规则附加到DOM树的过程，用于构建渲染树
Render Tree	渲染树	包含要渲染元素的DOM树的版本，不包括不可见元素
Layout	布局	计算每个元素的准确位置和大小，准备用于绘制
Painting	绘制	根据布局和样式信息在屏幕上绘制内容的过程
Display	显示	最终渲染和显示页面的阶段，用户在屏幕上看到的结果

HTML解析

（1）获取 HTML 文件当用户在浏览器中输入网址时，浏览器会向服务器发送请求，请求下载网站的 HTML 文件。

（2）HTML 标记识别浏览器会将 HTML 文件解析成一个个标记（tag），如 div、p、img 等等。解析的过程中，浏览器会忽略一些不合法的标记，如没有闭合标签、属性值没有使用引号等等。

（3）DOM 树构建浏览器会将解析后的标记转化成一个个 DOM 节点（Node），构建成一棵 DOM 树（Document Object Model）。DOM 树是一个树形结构，根节点是 document，其他节点代表 HTML 文档中的元素、属性、文本等等。

在构建 DOM 树的过程中，浏览器会按照 HTML 文档的层次结构，将文档分成一个个的块（block），如文本块、段落块、表格块等等。每个块都会被转换成一个 DOM 节点，

CSS解析

生成 CSS 规则，是浏览器解析 HTML 文件的一部分。

在解析 HTML 文件的过程中，如果遇到 CSS 的 link 元素，浏览器会下载对应的 CSS 文件。
需要注意的是，下载 CSS 文件不会影响 DOM 的解析。

下载完成后，浏览器会对 CSS 文件进行解析，解析出对应的规则树。

在 CSSOM 中，每个节点代表一个 CSS 规则，包括选择器和声明。

选择器指定了哪些元素会被应用这个规则，声明则指定了这些元素的样式属性和值。
CSSOM 树的构建过程类似于 DOM 树的构建过程，也是一个逐步解析的过程

构建RenderTree

当有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree

注意一：
需要注意的是，link 元素不会阻塞 DOM 树的构建过程，但会阻塞 Render Tree 的构建过程。
这是因为 Render Tree 在构建时，需要对应的 CSSOM Tree。
注意二：
同时，需要注意的是 Render Tree 和 DOM Tree 并不是一一对应的关系。
例如，对于 display 为 none 的元素，它不会在 Render Tree 中出现。这是因为该元素被隐藏了，不会影响页面的呈现，因此也不需要在渲染树中进行渲染

3.回流与重绘

1.回流(重排）

回流是浏览器为了重新渲染部分或全部文档而重新计算文档中元素的位置和几何结构的过程。它通常是因为元素的尺寸、布局、隐藏等属性发生变化引起的

理解回流reflow：（也可以称之为重排）

第一次确定节点的大小和位置，称之为布局（layout）。
之后对节点的大小、位置修改重新计算称之为回流。

也就是说回流是指浏览器必须重新计算渲染树中部分或全部元素的几何信息（位置和大小），然后重新构建渲染树的过程。

触发回流的情况有很多，常见的包括：

（1）DOM 结构的变化，比如添加、删除、移动元素等操作；

（2）改变元素的布局，比如修改元素的宽高、padding、margin、border、position、display 等属性；

（3）页面的尺寸变化，比如浏览器窗口大小的变化，或者文档视口的变化；

（4）获取元素的几何属性，比如调用 getComputedStyle() 方法获取元素的尺寸、位置等信息。

回流的代价比较高，因为它会涉及到大量的计算和页面重排，这会导致页面的性能和响应速度下降。

2.重绘

重绘是当页面中元素样式的改变并不影响它在文档流中的位置时（如color、background-color、visibility等），浏览器将重新绘制这些元素的过程

理解重绘repaint：

第一次渲染内容称之为绘制（paint）。
之后重新渲染称之为重绘。

重绘是指浏览器不需要重新计算元素的几何信息，而只需要重新绘制元素的内容的过程。

触发重绘的情况有很多，常见的包括：

（1）修改元素的颜色、背景色、边框颜色、文本样式等属性

（2）修改元素的 box-shadow、text-shadow、outline 等属性

（3）使用 CSS3 transform 和 opacity 等属性

（4）添加、移除、修改元素的 class(仅影响元素的外观的部分)，如果改变影响了元素的布局属性（如宽度、高度、边距、定位等）则会触发回流

（5）使用 JavaScript 直接修改样式

重绘的代价比较小，因为它不涉及到元素的位置和大小等计算，只需要重新绘制元素的内容即可

回流一定会引起重绘，所以回流是一件很消耗性能的事情。

回流（Reflow）一定会引起重绘（Repaint）的原因在于它们的处理层级和影响范围。回流涉及到浏览器的布局过程，即对文档元素的尺寸、位置进行计算，这通常是因为DOM操作或样式的改变导致了布局变化。一旦元素的几何属性（如宽度、高度、位置等）发生变化，浏览器需要重新计算元素的位置和大小，然后按照新的布局绘制元素，因此回流必然引起重绘

3.页面性能优化

在网页开发中，回流（Reflow）是指浏览器为了重新计算元素的几何属性（如位置和大小）而进行的一系列操作。回流通常会导致页面的重新渲染，这可能会对性能产生负面影响。以下是一些常见的方法来减少和优化回流：

1. 减少 DOM 操作

批量修改：尽量减少对 DOM 的频繁操作，可以将多个操作合并为一次操作。

// 不好的做法
element.style.width = '100px';
element.style.height = '200px';

// 好的做法
element.style.cssText = 'width: 100px; height: 200px;';

2. 使用 `documentFragment`

文档片段：在内存中构建复杂的 DOM 结构，最后一次性插入到文档中。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = 'Item ' + i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

3. 避免使用表格布局

表格布局：表格布局在添加或删除单元格时会引起大量的回流。

<!-- 不好的做法 -->
<table>
  <tr>
    <td>Cell 1</td>

    <td>Cell 2</td>

  </tr>

</table>

<!-- 好的做法 -->
<div class="grid-container">
  <div class="grid-item">Cell 1</div>

  <div class="grid-item">Cell 2</div>

</div>

4. 使用 CSS 转换和动画

CSS 转换：使用 transform 和 opacity 进行动画效果，这些属性不会引起回流。

.animate {
  transition: transform 0.5s, opacity 0.5s;
}

.animate:hover {
  transform: translateX(100px);
  opacity: 0.5;
}

5. 避免使用内联样式

内联样式：内联样式会导致更多的回流，尽量使用外部样式表。

<!-- 不好的做法 -->
<div style="width: 100px; height: 100px; background-color: red;"></div>

<!-- 好的做法 -->
<style>
  .red-box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

<div class="red-box"></div>

6. 使用 `requestAnimationFrame`

请求动画帧：在下一次重绘之前执行某些操作，避免不必要的回流。

function updatePosition() {
  element.style.left = (element.offsetLeft + 1) + 'px';
  requestAnimationFrame(updatePosition);
}
requestAnimationFrame(updatePosition);

7. 避免读写混合

读写分离：避免在同一段代码中同时读取和写入 DOM 属性。

// 不好的做法
element.style.width = '100px';
console.log(element.offsetWidth); // 引起回流
//操作元素要重新获取页面的元素
element.style.height = '200px';
// 好的做法
const width = element.offsetWidth; // 先读取
const height = element.offsetHeight; // 再读取
element.style.cssText = 'width: 100px; height: 200px;'; // 最后写入

8. 使用 `will-change` 属性

预示变化：告知浏览器哪些元素将会发生变化，提前进行优化。

.element {
  will-change: transform, opacity;
}

通过以上方法，可以有效地减少和优化回流，提高网页的性能。

4.composite(合成)

绘制的过程，可以将布局后的元素绘制到多个合成图层中

这是浏览器的一种优化手段；

默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的；

而一些特殊的属性，会创建一个新的合成层（ CompositingLayer ），并且新的图层可以利用GPU来加速绘制；

有些属性可以触发合成层的创建，包括：

（1）3D 变换（3D Transforms）：如 rotateX、rotateY、translateZ 等属性，可以创建一个新的合成层。

（2）video、canvas、iframe 等标签：这些标签会创建一个新的合成层。

（3）opacity 动画转换时：当元素透明度发生变化时，会创建一个新的合成层。

（4）position: fixed：将元素定位为固定位置时，也会创建一个新的合成层。

（5）will-change 属性：可以通过这个实验性的属性，告诉浏览器元素可能会发生哪些变化，从而预先创建合成层。

（6）动画（Animation）或过渡（Transition）设置了 opacity、transform 属性时，也会创建一个新的合成层。

需要注意的是，过度使用合成层也会带来一些问题，如占用更多的内存、增加页面的复杂度等。

因此，在使用合成层时需要谨慎，避免滥用。

5.js引擎

1.是什么

JavaScript引擎是一个解释和执行JavaScript代码的程序，负责将JavaScript代码转换成可执行的机器代码。这个过程包括解析代码、进行优化，并最终执行。通过它，JS能在浏览器或服务器环境中运行，处理从简单的脚本到复杂应用的各种计算任务

当我们编写JavaScript代码时，它实际上是一种高级语言，这种语言并不是机器语言。

高级语言是设计给开发人员使用的，它包括了更多的抽象和可读性。
但是，计算机的CPU只能理解特定的机器语言，它不理解JavaScript语言。
这意味着，在计算机上执行JavaScript代码之前，必须将其转换为机器语言。

JavaScript引擎的作用：

事实上我们编写的JavaScript无论交给浏览器还是Node执行，最后都是需要被CPU执行的；
但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行；
所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；

2.常见的js引擎

当网页被加载时，浏览器内核首先解析HTML和CSS，构建DOM树和渲染树，也是我们讲过的重点内容。在此过程中，当内核遇到<script>标签时，它会调用JavaScript引擎来处理脚本，执行可能会影响DOM的操作(也就是我们上一章节所说的重绘与重排)。而JS代码就是在这时候参与进来的

JavaScript 引擎是浏览器或运行环境中的关键组件，负责解析和执行 JavaScript 代码。以下是一些常见的 JavaScript 引擎及其特点：

1. V8

开发者：Google
主要浏览器：Google Chrome, Node.js, Opera, Vivaldi, Brave, Microsoft Edge (Chromium 版)
特点：

- 高性能：通过即时编译（JIT）将 JavaScript 代码编译成机器码，实现高效的执行。
- 垃圾回收：具有高效的垃圾回收机制，自动管理内存。
- 广泛应用：不仅用于浏览器，还是 Node.js 的核心，使得 JavaScript 可以在服务器端运行。

2. SpiderMonkey

开发者：Mozilla
主要浏览器：Firefox
特点：

- 历史悠久：是最早的 JavaScript 引擎之一，随 Netscape Navigator 一起发布。
- 高性能：通过 JIT 编译和优化技术提高性能。
- 开源：广泛用于各种项目，包括 Firefox 和一些嵌入式系统。

3. JavaScriptCore (JSC)

开发者：Apple
主要浏览器：Safari, iOS Safari
特点：

- 高性能：通过 JIT 编译和优化技术提高性能。
- 集成：与 WebKit 渲染引擎紧密集成，优化了整体性能。
- 开源：部分代码是开源的，但某些优化和特性可能仅在 Apple 的产品中可用。

4. Chakra

开发者：Microsoft
主要浏览器：Internet Explorer, Microsoft Edge (2015-2019)
特点：

- 高性能：通过 JIT 编译和优化技术提高性能。
- 多平台：支持 Windows 和 Windows Phone。
- 已停用：自 2019 年起，Microsoft Edge 切换到基于 Chromium 的版本，使用 V8 引擎。

5. ChakraCore

开发者：Microsoft
主要用途：独立的 JavaScript 引擎，用于嵌入式系统和服务器端应用
特点：

- 高性能：继承了 Chakra 的高性能特性。
- 开源：完全开源，可以在多种平台上使用。
- 轻量级：适合嵌入式系统和资源受限的环境。

6. Hermes

开发者：Facebook
主要用途：React Native 应用
特点：

- 高性能：通过 AOT（Ahead-of-Time）编译技术提高性能。
- 轻量级：体积小，启动速度快。
- 专为移动设备优化：特别适合 React Native 应用，提高了移动设备上的性能和用户体验。

7. Duktape

开发者：Sami Vaarala
主要用途：嵌入式系统
特点：

- 轻量级：体积非常小，适合资源受限的嵌入式系统。
- 可移植：可以在多种平台上运行，包括嵌入式设备和微控制器。
- 开源：完全开源，社区活跃。

总结

V8：高性能的 JavaScript 引擎，广泛应用于现代浏览器和 Node.js。
SpiderMonkey：Mozilla 开发的 JavaScript 引擎，用于 Firefox。
JavaScriptCore (JSC)：Apple 开发的 JavaScript 引擎，用于 Safari。
Chakra：Microsoft 开发的 JavaScript 引擎，曾用于 Internet Explorer 和早期版本的 Microsoft Edge。
ChakraCore：Chakra 的独立版本，适合嵌入式系统和服务器端应用。
Hermes：Facebook 开发的 JavaScript 引擎，专为 React Native 应用优化。
Duktape：轻量级的 JavaScript 引擎，适合嵌入式系统。

这些 JavaScript 引擎各有特点，适用于不同的应用场景。了解这些引擎的特点有助于开发者选择合适的工具和技术来优化他们的项目。

3.V8引擎

V8 引擎：是一个高性能的 JavaScript 引擎，负责解析和执行 JavaScript 代码。
Chromium：是一个开源的浏览器项目，包含多个组件，包括 V8 引擎和 Blink 渲染引擎。
关系：V8 引擎是 Chromium 项目中的一个核心组件，负责处理 JavaScript 代码的解析和执行。

1.是什么

V8是用C++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等
它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32，ARM或MIPS处理器的Linux系统上运行(兼容性很好)
V8可以独立运行(很少这么做)，也可以嵌入到任何C ++应用程序中(比如Node.js)
WebAssembly (通常缩写为Wasm) 也是一种为高性能网络应用设计的编程语言，和JS是高度集成的，在V8中的作用主要是允许更多的复杂和计算密集型任务可以在浏览器中高效执行。不过我们暂时不需要太过于关系这点
毕竟V8引擎主要目标是提高JavaScript代码的性能和执行速度

2.执行过程

Parse模块会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识JavaScript代码；

函数不管有没有调用都会被转化为AST，因为即使函数没有被立即调用，它们可能在将来被用作回调或传递给其他函数。此外，函数内部可能包含需要提前处理的声明或表达式。所以解析器不能仅仅因为函数当前未被调用就忽略它们，必须分析所有代码以建立完整的程序结构
Parse的V8官方文档：v8.dev/blog/scanne…

Ignition作为解释器，会将AST转换成ByteCode（字节码）

同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
如果函数只调用一次，Ignition会执行解释执行ByteCode；
Ignition的V8官方文档：v8.dev/blog/igniti…

TurboFan作为编译器，可以将字节码编译为CPU可以直接执行的机器码；

如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；

3.V8引擎的处理流程

我们来详细分析一下 V8 引擎处理你提供的示例代码的流程。以下是 V8 引擎处理 JavaScript 代码的主要步骤：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>

  <body>
    <script>
      let a = 1;
      var x = 'Hello word';
      console.log(a);
      console.log(x);
    </script>

  </body>

</html>

解析（Parsing）

示例代码的 AST：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "let"
    },
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "x"
          },
          "init": {
            "type": "Literal",
            "value": "Hello word",
            "raw": "'Hello word'"
          }
        }
      ],
      "kind": "var"
    },
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          }
        },
        "arguments": [
          {
            "type": "Identifier",
            "name": "a"
          }
        ]
      }
    },
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          }
        },
        "arguments": [
          {
            "type": "Identifier",
            "name": "x"
          }
        ]
      }
    }
  ]
}

- 输入：JavaScript 代码
- 输出：抽象语法树（Abstract Syntax Tree, AST）
- 过程：V8 引擎首先将 JavaScript 代码解析成抽象语法树（AST）。这个过程会检查语法错误，并生成一个表示代码结构的树形数据结构。

编译（Compiling）

- 输入：抽象语法树（AST）
- 输出：字节码（Bytecode）
- 过程：V8 引擎将 AST 编译成字节码。字节码是一种中间表示形式，比原始的 JavaScript 代码更接近机器码，但仍然需要进一步编译才能执行。

解释执行（Interpreting）

示例代码的执行过程：

- 输入：字节码
- 输出：执行结果
- 过程：V8 引擎使用 Ignition 解释器来执行字节码。Ignition 解释器会逐条执行字节码指令，并生成执行结果。
- let a = 1;：在当前作用域中声明变量 a 并赋值为 1。
- var x = 'Hello word';：在全局作用域中声明变量 x 并赋值为 'Hello word'。
- console.log(a);：打印变量 a 的值，输出 1。
- console.log(x);：打印变量 x 的值，输出 Hello word。

即时编译（Just-In-Time Compilation, JIT）

示例代码的 JIT 编译：

- 输入：字节码
- 输出：机器码（Machine Code）
- 过程：为了提高性能，V8 引擎会使用 TurboFan 编译器对热点代码进行即时编译。TurboFan 会将频繁执行的字节码编译成高效的机器码，从而加速执行。
- 如果这段代码是热点代码（即频繁执行），TurboFan 编译器会将其编译成高效的机器码。

垃圾回收（Garbage Collection）

- 输入：内存中的对象
- 输出：释放不再使用的内存
- 过程：V8 引擎使用垃圾回收机制来管理内存。当对象不再被引用时，垃圾回收器会自动回收这些对象占用的内存，防止内存泄漏。

输出结果

在浏览器环境中，执行上述代码会输出：

1
Hello word

总结

解析：将 JavaScript 代码解析成抽象语法树（AST）。
编译：将 AST 编译成字节码。
解释执行：使用 Ignition 解释器执行字节码。
即时编译：使用 TurboFan 编译器对热点代码进行即时编译。
垃圾回收：管理内存，回收不再使用的对象。

标签：元素,浏览器,DOM,JavaScript,可能,引擎,知道,CSS
From： https://blog.csdn.net/weixin_67448099/article/details/143875861

你可能不知道的JavaScript-1

1.防御式CSS

2.js的应用领域

JavaScript中让人迷惑的知识点

3.一个网页URL从输入到浏览器中到显示经历过怎么样的解析过程呢

4.浏览器内核

1.是什么

2.浏览器的渲染过程

HTML解析

CSS解析

构建RenderTree

3.回流与重绘

1.回流(重排）

2.重绘

3.页面性能优化

1. 减少 DOM 操作

2. 使用 documentFragment

3. 避免使用表格布局

4. 使用 CSS 转换和动画

5. 避免使用内联样式

6. 使用 requestAnimationFrame

7. 避免读写混合

8. 使用 will-change 属性

4.composite(合成)

5.js引擎

1.是什么

2.常见的js引擎

1. V8

2. SpiderMonkey

3. JavaScriptCore (JSC)

4. Chakra

5. ChakraCore

6. Hermes

7. Duktape

总结

3.V8引擎

1.是什么

2.执行过程

3.V8引擎的处理流程

相关文章

赞助商

阅读排行

2. 使用 `documentFragment`

6. 使用 `requestAnimationFrame`

8. 使用 `will-change` 属性