:::tip{title="事件循环-原理"}
本文介绍了事件循环-原理，讲明白了JS如何在浏览器中运行
:::

> **`单线程`** 是 **`异步产生`** 的原因
> **`事件循环`** 是 **`异步的实现方式`**

# **浏览器的进程模型**

## 何为进程？

程序运行需要有它自己专属的内存空间，可以把这块 **`内存空间`** 简单的 **`理解为进程`**

![https://image.myxuechao.com/JS/1.png](https://image.myxuechao.com/JS/1.png)

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

## 何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为 **`主线程`**。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

![https://image.myxuechao.com/JS/2.png](https://image.myxuechao.com/JS/2.png)

![https://image.myxuechao.com/JS/2.png](https://image.myxuechao.com/JS/2.png)

## 浏览器有哪些进程和线程？

- **浏览器是一个多进程多线程的应用程序**
- 浏览器内部工作极其复杂。
- 为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

![https://image.myxuechao.com/JS/3.png](https://image.myxuechao.com/JS/3.png)

> 可以在 **`浏览器的任务管理器中`** 查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. **渲染进程**（ **`本章节课重点讲解的进程`** ）

   渲染进程启动后，会开启一个 **`渲染主线程`** ，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   > 将来该默认模式可能会有所改变，有兴趣的同学可参见[chrome 官方说明文档](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#Modes-and-Availability)

# 渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

> 思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

- 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
- 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
- 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
- ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

![https://image.myxuechao.com/JS/4.png](https://image.myxuechao.com/JS/4.png)

1.  在最开始的时候，渲染主线程会进入一个无限循环
2.  每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务

    执行，执行完一个后进入下一次循环;如果没有，则进入休眠状态。

3.  其他所有线程(包括其他进程的线程)可以随时向消息队列添加任务。新任
    务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会
    将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。
**整个过程，被称之为事件循环(消息循环)**

## 何为异步?

代码在执行过程中，会遇到一些无法立即处理的任务，比如:

- 计时完成后需要执行的任务 —— **`setTimeout`** 、 **`setInterval`**
- 网络通信完成后需要执行的任务 -- **`XHR`** 、 **`Fetch`**
- 用户操作后需要执行的任务 -- **`addEventListener`**

如果让渲染主线程等待这些任务的时机达到，就会导致主线程⻓期处于 「阻塞」的状态，从而导致浏览器「卡死」

**同步：例子**

![https://image.myxuechao.com/JS/5.png](https://image.myxuechao.com/JS/5.png)

**渲染主线程承担着极其重要的工作，无论如何都不能阻塞！**

因此，浏览器选择**异步**来解决这个问题

![https://image.myxuechao.com/JS/6.png](https://image.myxuechao.com/JS/6.png)

使用异步的方式，**渲染主线程永不阻塞**

> 面试题：如何理解 JS 的异步？
>
> 参考答案：
>
> JS 是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
>
> 而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
>
> 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
>
> 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
>
> 在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

## JS 为何会阻碍渲染？

- 先看代码

```html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '你很帅！';
    delay(3000);
  };
</script>
```

点击按钮后，会发生什么呢？

<见具体演示>

思考为啥 **`点击了按钮文本没有立刻变化`** 而逝等 **`delay函数`** 执行完毕后才变化

## 任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但**消息队列是有优先级的**

根据 W3C 的最新解释:

- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个 **`微队列`**，**`微队列中的任务优先所有其他任务执行`**
  [https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint](https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint)

> 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

- **`延时队列`** ：用于存放计时器到达后的回调任务，**`优先级「中」`**
- **`交互队列`** ：用于存放用户操作后产生的事件处理任务，**`优先级「高」`**
- **`微队列`** ：用户存放需要最快执行的任务，**`优先级「最高」`**

## 任务到微队列的主要方式有哪些？

- 添加任务到微队列的主要方式主要是使用 **`Promise`**、**`MutationObserver`**

```jsx
// 立即把一个函数添加到微队列
Promise.resolve().then(函数);
```

## 面试题-阐述一下 JS 的事件循环

> 参考答案:
> 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
> 在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息
> 队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到
> 队列末尾即可。
> 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的
> 浏览器环境，取而代之的是一种更加灵活多变的处理方式。
> 根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一
> 个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，
> 在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须
> 有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

## 面试题-JS中的计时器能做到精确计时吗? 为什么?

> 参考答案:
>
> 不行，因为:
>
> 1. 计算机硬件没有原子钟，无法做到精确计时
> 2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的
>
> 是操作系统的函数，也就携带了这些偏差 3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，
>
> 则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来
>
> 了偏差 4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此
>
> 又带来了偏差

事件循环-原理

:::tip{title=" webpack 自动编译 Ts"}
本文介绍了 `webpack` 编译 `TypeScript` 它将自动编译成 `JavaScript` 代码，并自动刷新浏览器。无需关心使用命令去转换成 `JS` 代码，只关心书写ts代码就行了可以直接在浏览器看到结果
:::
 


# 一、新建 index.html 页面

- 使用 `mkdir` 命令来创建 `public 目录`，然后再使用 `touch` 命令创建 `index.html 文件`。示例如下：

```bash
mkdir public
touch public/index.html
```

- 这将先创建一个名为 `public 的目录`，然后在该目录下创建 `index.html 文件`。现在你就可以在 `public/index.html` 文件中编写 `HTML` 代码了。
- 接下来，在 `public/index.html` 文件中编写 基本的 的代码。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack & TS</title>
  </head>
  <body></body>
</html>
```

# 二、新建入口文件 TS

- 使用 `mkdir` 命令来创建 `src 目录`，然后再使用 `touch` 命令创建 `main.ts 文件`。示例如下：

```bash
mkdir src
touch src/main.ts
```

- 这将先创建一个名为 `src 的目录`，然后在该目录下创建 `main.ts 文件`。现在你就可以在 `src/main.ts` 文件中编写 `TypeScript` 代码了。
- 接下来，在 `src/main.ts` 文件中编写 基本的 的代码。

```jsx
document.write('hello Webpack TS1!');
let arr: number = 100;
console.log('arr: ', arr);
```

# 三、安装依赖

- 首先，在项目的 `根` 目录，然后使用 `npm init -y` 命令初始化 `package.json` 文件。

```bash
npm init -y
```

- 接下来，使用 `npm install` 命令安装 `webpack`、`webpack-cli`、`typescript`、`ts-loader` 等相关依赖。

```jsx
npm i -D typescript
npm i -D webpack@4.41.5 webpack-cli@3.3.10
npm i -D webpack-dev-server@3.10.2
npm i -D html-webpack-plugin@4.5.0  clean-webpack-plugin@3.0.0
npm i -D ts-loader@8.0.17  -D cross-env@7.0.3
```

# 四、配置 webpack.config.js

- 首先，在项目的 `根` 目录，使用 `mkdir` 命令创建 `build` 文件夹， 然后在该目录下使用 `touch` 命令创建 `webpack.config.js 文件`。

```bash
mkdir build
touch build/webpack.config.js
```

- 接下来，在 `webpack.config.js` 文件中编写 `webpack` 的配置信息。

```jsx
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const isProd = process.env.NODE_ENV === 'production'; // 是否生产环境

function resolve(dir) {
  return path.resolve(__dirname, '..', dir);
}

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: {
    app: './src/min.ts',
  },

  output: {
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js',
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')],
      },
    ],
  },

  plugins: [
    new CleanWebpackPlugin({}),

    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },

  devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8083,
    open: true,
  },
};
```

# 五、配置 tsconfig.json

- 首先，在项目的 `根` 目录，使用 `touch` 命令创建 `tsconfig.json 文件`。

```bash
touch tsconfig.json
```

- 接下来，在 `tsconfig.json` 文件中编写 `TypeScript` 的配置信息。

```jsx
{
  "compileOnSave": true, // 保存时自动编译
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // 模块化规范
    "strict": false, // 严格模式
  }
}
```

# 六、在 package.json 配置启动命令

- 接下来，在 `package.json` 文件中编写 `scripts` 命令的配置信息。

```jsx
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
```

# 七、启动项目

- 接下来，终端启动在 `package.json` 文件中 `scripts` 命令的配置信息。

```bash
npm run dev
```

- 接下来，在浏览器中访问 `http://localhost:8083` 即可看到效果。
    
    ![https://image.myxuechao.com/TS/1.png](https://image.myxuechao.com/TS/1.png)
    

# 八、效果图

![https://image.myxuechao.com/TS/2.png](https://image.myxuechao.com/TS/2.png)

![https://image.myxuechao.com/TS/3.png](https://image.myxuechao.com/TS/3.png)

# 九、总结

- 以上，就是使用 `webpack` 自动编译 `TypeScript` 的过程。
- 接下来，我们就可以在 `src/main.ts` 文件中编写 `TypeScript` 代码了。
- 它将自动编译成 `JavaScript` 代码，并自动刷新浏览器。

# 十、项目地址

- [项目地址](https://gitee.com/lxc482113948/ts_webpack_auto-compile.git)

# 参考文档

- [webpack 中文网](https://www.webpackjs.com/)
- [TypeScript 中文网](https://www.tslang.cn/)
- [TypeScript 入门教程](https://ts.xcatliu.com/)
- [TypeScript 官方文档](https://www.typescriptlang.org/docs/handbook/basic-types.html)

webpack 自动编译 Ts

:::tip{title="TypeScript 自动编译示例项目"}
本项目演示了如何配置 `TypeScript` 自动编译，并且使用 `HTML` 文件引入编译后的 `JavaScript` 文件进行运行。
:::


# 一、全局安装 ts

## 1、安装

```jsx
npm install -g typescript
```

## 2、查安装是否成功

- 安装完成后，在控制台运行如下命令，检查安装是否成功：

```jsx
tsc - V
```

# 二、编写 TS 程序

## 1、创建一个 ts 文件

```jsx
touch hello.ts
```

## 2、编写代码

```jsx
// 定义一个变量let a: number = 10;// 定义一个函数function add(x: number, y: number): number {
  return x + y;}
// 定义一个类class Person {
  name: string;  constructor(name: string) {
    this.name = name;  }
  sayHello() {
    console.log(`Hello, ${this.name}!`);  }
}
// 创建一个实例const person = new Person('John');person.sayHello();
```

## 3、运行程序

```bash
// 编译 TS 文件
tsc hello.ts
```

## 4、运行结果

- 这时候会生成一个编译好的文件 hello.js：

```jsx
// 定义一个变量
var a = 100;
// 定义一个类
var Person = /** @class */ (function () {
  function Person(name) {
    this.name = name;
  }
  Person.prototype.sayHello = function () {
    console.log('Hello, '.concat(this.name, '!'));
  };
  return Person;
})();
// 创建一个实例
var person = new Person('John');
person.sayHello();
```

## 5、运行编译后的文件

```jsx
node hello.js
```

## 6、运行结果

```jsx
Hello, John!
```

> 这个时候其实已经完成了 ts 的基本运行、但是这样很累，每次写完 ts 代码想看结果的时候得先编译、再运行，这样就太麻烦了，所以我们需要一个自动编译的配置，只需要关注 ts 代码的编写，不用每次都编译，只需要运行 ts 文件即可。
> 

# 三、自动编译

## 1、配置自动编译

- 首先，在项目根目录下生成一个`tsconfig.json` 文件

```jsx
 tsc --init
```

- 然后，在 `tsconfig.json` 文件中添加以下的配置，这样每次保存 `ts` 文件的时候，都会自动编译成 `js` 文件：

```json
{
  "compileOnSave": true, // 保存时自动编译
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // 模块化规范
    "strict": false, // 严格模式
    "outDir": "./js" // 编译后的文件输出到 js 目录
  }
}
```

## 2、启动监视

- 启动监视后，每次保存 `ts` 文件，都会自动编译成 `js` 文件：

```jsx
tsc --watch
```

## 3、编辑文件

- 根目录创建一个 `autoTest.ts` 文件，添加以下代码：

```jsx
// 定义一个变量
let b: number = 10;
console.log('b: ', b);
```

## 4、保存文件

- 保存文件后，会自动编译成 `js` 文件：

## 5、运行结果

- 为啥方便查看已经编译好的 `js` 文件呢？每次使用 `node js/autoTest.js` 太麻烦所以我们创建一个 `index.html` 把自己当起写的文件引入进去
    
    ```html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        
        <script src="./js/autoTest.js"></script>
      </body>
    </html>
    ```
    
- 运行 `index.html` 即可在控制台看到结果

> 这样就完成了 ts 的基本运行，每次保存 ts 文件，都会自动编译成 js 文件，运行 js 文件即可 || 直接把当起自动编译成 js 文件引入到 html 中刷新当起的 html 页面控制台中查看结果。
> 

# 四、项目地址

- [项目地址](https://gitee.com/lxc482113948/vscode_ts.git)

TypeScript 自动编译示例项目

:::tip{title="让JS控制台永远Debuger状态"}
本文介绍了让JS控制台永远Debuger状态，禁止F12控制台调试JavaScript
:::



# 前言

分享一个禁止用户调试我们的JavaScript脚本的代码。代码很简单，加了几层的闭包，让调试的时候，没那么容易找到然后删除。

当然加密前手动添加各个位置效果会更好。最好配合无限循环。

## 禁用JavaScript调试代码

```bash
(function (a) {
    return (function (a) {
        return (Function('Function(arguments[0]+"' + a + '")()'))
    })(a)
})('bugger')('de', 0, 0, (0, 0));
```

让JS控制台永远Debuger状态，禁止F12控制台调试JavaScript

:::tip{title="VsCode中文语言包插件"}
本文介绍了VsCode中文语言包插件变成中文无效的解决方案
:::



> Vscode是一款开源的跨平台编辑器。默认情况下，vscode使用的语言为英文(us)，如何将其显示语言修改成中文了？
> 

# 一、打开vscode工具

## 1、语言设置

## （1）快捷键

- **`Windows`** 、**`Linux`** 环境使用快捷键 **`Ctrl + Shift + p`**
- **`Mac`** 环境使用快捷键 **`command + Shift + p`**

## （2）搜索：配置语言 或者 Configure Language

![https://image.myxuechao.com/cli/6.png](https://image.myxuechao.com/cli/6.png)

选择 **`中文（简体）（zh-cn）`** 后点击,重启之后切换成功

![https://image.myxuechao.com/cli/7.png](https://image.myxuechao.com/cli/7.png)

![https://image.myxuechao.com/cli/8.png](https://image.myxuechao.com/cli/8.png)

# 二、重点

> 如果你发现当前选择的语言已经是 **`中文`**，但界面仍然显示为 **`英文`**，你可以按照以下步骤重新设置语言
> 
1. 使用快捷键打开命令面板。
2. 在搜索框中输入“配置语言”或者“Configure Language”。
3. 选择相关选项并将语言设置为其他语言，然后重新启动 VS Code。
4. 再次按照上述步骤将语言设置为 **`中文`**，然后重新启动 VS Code。

通过这种方式重新组织语言设置，可以让用户更容易理解并找到解决问题的方法。