使用 acme.sh 为 Synology NAS 配置 HTTPS 证书

准备

1. 公网IP，动态的也可以
2. 域名，有权限添加dns解析

安装 acme.sh

1
2
3
4
5
6
7

sudo su
cd ~
wget https://github.com/acmesh-official/acme.sh/archive/master.tar.gz
tar xvf master.tar.gz
cd acme.sh-master/
./acme.sh --install --nocron --home /usr/local/share/acme.sh --accountemail "email@gmail.com"
source ~/.profile

配置 DNS

对于 Aliyun，我们将设置两个环境变量，acme.sh（特别是 dnsapi 子目录中的 dns_ali 脚本）将读取这些变量来设置 DNS 记录。您可以在这里获取您的 aliyum API 密钥。

1
2

export Ali_Key="<key>"
export Ali_Secret="<secret>"

别忘了添加【管理云解析（DNS）的权限】

如果您使用其他 DNS 服务，请检查 dnsapi 目录和 DNS API 指南。许多 DNS 提供商的说明已包含在内。您还可以找到如何添加其他 DNS 服务的说明，但这需要一

创建证书

现在是时候为您的域名创建证书了：

1
2
3
4
5

# 这些命令假设您仍在同一个终端中，并已运行上面描述的必要命令。
cd /usr/local/share/acme.sh
export CERT_DOMAIN="example.com"
export CERT_DNS="dns_ali"
./acme.sh --issue --server letsencrypt --home . -d "$CERT_DOMAIN" -d "*.$CERT_DOMAIN" --dns "$CERT_DNS" --keylength 2048

部署默认证书

我们将使用 Synology DSM 的 deployhook 来部署我们的证书。这将覆盖默认证书（如果您尚未为其设置任何描述），您可以在本节稍后了解如何创建用于其他服务的新证书。

以下代码块中的命令假设您仍在同一个终端中，并执行了必要的命令。

使用临时或现有管理员用户部署

（推荐）使用自动创建的临时管理员用户部署

如果您在 DSM 中安装了 acme.sh，建议您尝试自动临时用户身份验证方法进行部署（DSM 应该已经具备所需的内置工具，如果没有，我们会告诉您）：

1
2

export SYNO_USE_TEMP_ADMIN=1
./acme.sh --deploy --home . -d "$CERT_DOMAIN" --deploy-hook synology_dsm

通过这种方式，您无需提供任何管理员凭据，部署脚本本身将利用 Synology 内置工具完成身份验证，因此它设计仅支持本地部署，不能用于 Docker 部署或远程部署。

脚本将加载之前保存的配置以供后续部署，因此如果您想回到使用现有管理员用户进行部署，您需要首先执行 export CLEAR_SYNO_USE_TEMP_ADMIN=1。部署脚本退出后，临时管理员用户应该未被创建或已经被删除，但如果脚本意外退出（例如，通过按“Ctrl+C”中止），它可能仍然保留，在这种情况下，您可以安全地通过“控制面板”删除它。

使用现有管理员用户部署

如果您更喜欢使用现有的管理员用户进行部署，或者上述方法不可用（例如，安装在 Docker 中，想要远程部署等），您需要提供自己的凭据：

1
2
3
4

# 单引号防止某些特殊字符的转义问题
export SYNO_USERNAME='Admin_Username'
export SYNO_PASSWORD='Admin_Password!123'
./acme.sh --deploy --home . -d "$CERT_DOMAIN" --deploy-hook synology_dsm

请注意，如果由 SYNO_USERNAME 指定的用户启用了双因素身份验证（2FA），脚本将要求您手动输入 TOTP 代码，就像在网页界面登录一样（如果您没有通过 export SYNO_OTP_CODE=XXXXXX 提供代码）。它还将要求您输入设备名称进行验证（也可以通过 export SYNO_DEVICE_NAME=CertRenewal 提供），然后获取必要的信息，以便在未来的操作中省略 TOTP，因此您无需再次手动输入。

顺便提一下，如果您以前使用此脚本进行部署，所需的信息现在被称为参数“设备 ID”，如果您是专业用户并希望手动获取它，您仍然可以，方法简要说明：通过其网站登录到 DSM，确保在要求输入 OTP 时选择“记住此设备”，获取 did cookie 的值并设置环境变量 SYNO_DEVICE_ID：

1
2

export SYNO_DEVICE_ID='YOUR VALUE'
./acme.sh --deploy --home . -d "$CERT_DOMAIN" --deploy-hook synology_dsm

使用 HTTPS 部署

当我们希望使用 HTTPS 部署新证书并连接到“localhost”时，需要在部署命令中添加 --insecure 选项以防止 curl 错误。请参阅 [https://github.com/acmesh-official/acme.sh/wiki/Options-and-Params]。如果您启用了 HTTP/2，您仍然可能会收到 curl 16 错误，这可能是由于 NAS 上缺少 http2 依赖项，但脚本仍会成功。

1
2
3
4

# export SYNO_HOSTNAME="localhost" # 如果不使用 localhost，则指定
export SYNO_SCHEME="https"
export SYNO_PORT="5001"
./acme.sh --deploy --insecure --home . -d "$CERT_DOMAIN" --deploy-hook synology_dsm

此外，如果您使用临时管理员方法进行部署，为了避免混淆，SYNO_HOSTNAME 的值必须指向当前本地计算机（可以是 localhost 或 127.0.0.1），但是如果您的自定义 SYNO_HOSTNAME 确实指向当前本地计算机，则应在部署前执行 export SYNO_LOCAL_HOSTNAME=1。

部署额外证书

通过指定不同的 SYNO_CERTIFICATE（并设置 SYNO_CREATE=1 用于创建），我们可以向 DSM 部署多个证书。

1
2
3
4

# SYNO_CERTIFICATE 是在 DSM 控制面板的“安全性 -> 证书”下显示的描述
export SYNO_CERTIFICATE="不同的证书描述"
export SYNO_CREATE=1 # 表示如果证书不存在则创建
./acme.sh --deploy --home . -d "subdomain.$CERT_DOMAIN" --deploy-hook synology_dsm

配置证书续订

要在未来自动续订证书，您需要在任务调度器中配置一个任务。不建议将其设置为自定义 cronjob（如之前在本维基页面中描述的那样），因为 DSM 安全顾问会告诉您有关未知 cronjob 的严重警告。

在 DSM 控制面板中，打开“任务调度器”，并为用户定义的脚本创建一个新计划任务。

• 常规设置：任务 - 更新默认证书。用户 - root
• 计划：设置每周续订。例如，每周六上午 11:00。
• 任务设置：用户定义的脚本：

1
2

# 续订证书
/usr/local/share/acme.sh/acme.sh --cron --home /usr/local/share/acme.sh

修复 Synology DSM 升级后的环境问题

1

./acme.sh --force --upgrade --nocron --home .

或者手动将以下行添加到 /root/.profile 中：

1

. "/usr/local/share/acme.sh/acme.sh.env"

windows下同时连接多个openvpn的办法

• WIN+R 打开运行， 输入 C:\Program Files\TAP-Windows\bin 回车
• 右键，以管理员身份运行 addtap.bat 创建虚拟网络适配器，需要几个就运行几次
• 同时连接多个openvpn配置

Windows下构建electron开发调试环境

环境依赖

• Windows 10 / Server 2012 R2 或更高版本
• Visual Studio 2022 (>=17.0.0)
  • 参考Chromium构建文档，了解需要安装的Visual Studio组件
• Nodejs
• Git

构建工具

Electrong构建工具build-tools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 全局安装构建工具
$ npm i -g @electron/build-tools

# 初始化 Electron 本地开发环境
$ e init

# 从主分支制作 “release” 和 “testing” 构建版本。
$ e init main-releaseg -i release --root=/project
Creating '/project'
New build config 'main-releaseg' created
Now using config 'main-releaseg'

# 显示已经初始化的配置
$ e show configs
* main-release

# 显示当前配置
$ e show current
main-release

# 切换到指定配置
$ e use main-testing
Now using config 'main-testing'

# 显示项目目录
$ e show root
/project

# 同步代码
$ e sync
Running "gclient sync --with_branch_heads --with_tags" in '/project/src'
[sync output omitted]

概述

虽然 Webpack 多数情况下被用于构建 Web 应用，但与 Rollup、Snowpack 等工具类似，Webpack 同样具有完备的构建 NPM 库的能力。与一般场景相比，构建 NPM 库时需要注意：

• 正确导出模块内容；
• 不要将第三方包打包进产物中，以免与业务方环境发生冲突；
• 将 CSS 抽离为独立文件，以方便用户自行决定实际用法；
• 始终生成 Sourcemap 文件，方便用户调试。

本文将从最基础的 NPM 库构建需求开始，逐步叠加上述特性，最终搭建出一套能满足多数应用场景、功能完备的 NPM 库构建环境。

开发一个 NPM 库

• 为方便讲解，假定我们正在开发一个全新的 NPM 库，暂且叫它 test-lib 吧，首先需要创建并初始化项目：

1
2

mkdir test-lib && cd test-lib
npm init -y

虽然有很多构建工具能够满足 NPM 库的开发需求，但现在暂且选择 Webpack，所以需要先装好基础依赖：

1

yarn add -D webpack webpack-cli

接下来，可以开始写一些代码了，首先创建代码文件：

1
2

mkdir src
touch src/index.js

之后，在 test-lib/src/index.js 文件中随便实现一些功能，比如：

1
2

// test-lib/src/index.js
export const add = (a, b) => a + b

至此，项目搭建完毕，目录如下：

1
2
3
4

├─ test-lib
│  ├─ package.json
│  ├─ src
│  │  ├─ index.js

使用 Webpack 构建 NPM 库

接下来，我们需要将上例 test-lib 构建为适合分发的产物形态。虽然 NPM 库与普通 Web 应用在形态上有些区别，但大体的编译需求趋同，因此可以复用前面章节介绍过的大多数知识点。例如 test-lib 所需要的基础编译配置如下：

1
2
3
4
5
6
7
8
9
10
11

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  }
};

• 提示：我们还可以在上例基础上叠加任意 Loader、Plugin，例如： babel-loader、eslint-loader、ts-loader 等。

上述配置会将代码编译成一个 IIFE 函数，但这并不适用于 NPM 库，我们需要修改 output.library 配置，以适当方式导出模块内容：

1
2
3
4
5
6
7
8
9
10
11
12

module.exports = {
  // ...
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
+   library: {
+     name: "_",
+     type: "umd",
+   },
  },
  // ...
};

这里用到了两个新配置项：

• output.library.name：用于定义模块名称，在浏览器环境下使用 script 加载该库时，可直接使用这个名字调用模块，例如：

  1 2 3 4 5 6 7 8 9 10 11 12

  <!DOCTYPE html> <html lang="en"> ... <body> <script src="https://examples.com/dist/main.js"></script> <script> // Webpack 会将模块直接挂载到全局对象上 window._.add(1, 2) </script> </body> </html>

• output.library.type：用于编译产物的模块化方案，可选值有：commonjs、umd、module、jsonp 等，通常选用兼容性更强的 umd 方案即可。

• 提示：JavaScript 最开始并没有模块化方案，这就导致早期 Web 开发需要将许多代码写进同一文件，极度影响开发效率。后来，随着 Web 应用复杂度逐步增高，社区陆陆续续推出了许多适用于不同场景的模块化规范，包括：CommonJS、UMD、CMD、AMD，以及 ES6 推出的 ES Module 方案，不同方案各有侧重点与适用场景，NPM 库作者需要根据预期的使用场景选择适当方案。

修改前后对应的产物内容如下：

可以看到，修改前(对应上图左半部分)代码会被包装成一个 IIFE ；而使用 output.library 后，代码被包装成 UMD(Universal Module Definition) 模式：

1
2
3
4
5
6
7
8
9
10
11
12

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["_"] = factory();
    else
        root["_"] = factory();
})(self, function() {
 // ...
});

这种形态会在 NPM 库启动时判断运行环境，自动选择当前适用的模块化方案，此后我们就能在各种场景下使用 test-lib 库，例如：

1
2
3
4
5
6
7
8
9
10
11
12

// ES Module
import {add} from 'test-lib';

// CommonJS
const {add} = require('test-lib');

// HTML
<script src="https://examples.com/dist/main.js"></script>
<script>
    // Webpack 会将模块直接挂载到全局对象上
    window._.add(1, 2)
</script>

正确使用第三方包

接下来，假设我们需要在 test-lib 中使用其它 NPM 包，例如 lodash：

1
2
3
4
5
6

// src/index.js
import _ from "lodash";

export const add = (a, b) => a + b;

export const max = _.max;

此时执行编译命令 npx webpack，我们会发现产物文件的体积非常大：

这是因为 Webpack 默认会将所有第三方依赖都打包进产物中，这种逻辑能满足 Web 应用资源合并需求，但在开发 NPM 库时则很可能导致代码冗余。以 test-lib 为例，若使用者在业务项目中已经安装并使用了 lodash，那么最终产物必然会包含两份 lodash 代码！

为解决这一问题，我们需要使用 externals 配置项，将第三方依赖排除在打包系统之外：

1
2
3
4
5
6
7
8
9
10
11
12
13

// webpack.config.js
module.exports = {
  // ...
+  externals: {
+   lodash: {
+     commonjs: "lodash",
+     commonjs2: "lodash",
+     amd: "lodash",
+     root: "_",
+   },
+ },
  // ...
};

• 提示： Webpack 编译过程会跳过 externals 所声明的库，并假定消费场景已经安装了相关依赖，常用于 NPM 库开发场景；在 Web 应用场景下则常被用于优化性能。

• 例如，我们可以将 React 声明为外部依赖，并在页面中通过 <script> 标签方式引入 React 库，之后 Webpack 就可以跳过 React 代码，提升编译性能。

改造后，再次执行 npx webpack，编译结果如下：

改造后，主要发生了两个变化：

1. 产物仅包含 test-lib 库代码，体积相比修改前大幅降低；
2. UMD 模板通过 require、define 函数中引入 lodash 依赖并传递到 factory。

至此，Webpack 不再打包 lodash 代码，我们可以顺手将 lodash 声明为 peerDependencies：

1
2
3
4
5
6
7

{
  "name": "6-1_test-lib",
  // ...
+ "peerDependencies": {
+   "lodash": "^4.17.21"
+ }
}

实践中，多数第三方框架都可以沿用上例方式处理，包括 React、Vue、Angular、Axios、Lodash 等，方便起见，可以直接使用 webpack-node-externals 排除所有 node_modules 模块，使用方法：

1
2
3
4
5
6
7
8

// webpack.config.js
const nodeExternals = require('webpack-node-externals');

module.exports = {
  // ...
+  externals: [nodeExternals()]
  // ...
};

抽离 CSS 代码

假设我们开发的 NPM 库中包含了 CSS 代码 —— 这在组件库中特别常见，我们通常需要使用 mini-css-extract-plugin 插件将样式抽离成单独文件，由用户自行引入。

这是因为 Webpack 处理 CSS 的方式有很多，例如使用 style-loader 将样式注入页面的 <head> 标签；使用 mini-css-extract-plugin 抽离样式文件。作为 NPM 库开发者，如果我们粗暴地将 CSS 代码打包进产物中，有可能与用户设定的方式冲突。

为此，需要在前文基础上添加如下配置：

1
2
3
4
5
6
7
8
9
10
11
12

module.exports = {  
  // ...
+ module: {
+   rules: [
+     {
+       test: /\.css$/,
+       use: [MiniCssExtractPlugin.loader, "css-loader"],
+     },
+   ],
+ },
+ plugins: [new MiniCssExtractPlugin()],
};

• 提示：关于 CSS 构建的更多规则，可参考《如何借助预处理器、PostCSS 等构建现代 CSS 工程环境？》

生成 Sourcemap

Sourcemap 是一种代码映射协议，它能够将经过压缩、混淆、合并的代码还原回未打包状态，帮助开发者在生产环境中精确定位问题发生的行列位置，所以一个成熟的 NPM 库除了提供兼容性足够好的编译包外，通常还需要提供 Sourcemap 文件。

接入方法很简单，只需要添加适当的 devtool 配置：

1
2
3
4
5

// webpack.config.js
module.exports = {  
  // ...
+ devtool: 'source-map'
};

再次执行 npx webpack 就可以看到 .map 后缀的映射文件：

1
2
3
4
5
6
7
8
9
10
11

├─ test-lib
│  ├─ package.json
│  ├─ webpack.config.js
│  ├─ src
│  │  ├─ index.css
│  │  ├─ index.js
│  ├─ dist
│  │  ├─ main.js
│  │  ├─ main.js.map
│  │  ├─ main.css
│  │  ├─ main.css.map

此后，业务方只需使用 source-map-loader 就可以将这段 Sourcemap 信息加载到自己的业务系统中，实现框架级别的源码调试能力

其它 NPM 配置

至此，开发 NPM 库所需的 Webpack 配置就算是介绍完毕了，接下来我们还可以用一些小技巧优化 test-lib 的项目配置，提升开发效率，包括：

• 使用 .npmignore 文件忽略不需要发布到 NPM 的文件；

• 在 package.json 文件中，使用 prepublishOnly 指令，在发布前自动执行编译命令，例如：

  1 2 3 4 5 6 7 8 9

  // package.json { "name": "test-lib", // ... "scripts": { "prepublishOnly": "webpack --mode=production" }, // ... }

• 在 package.json 文件中，使用 main 指定项目入口，同时使用 module 指定 ES Module 模式下的入口，以允许用户直接使用源码版本，例如：

  1 2 3 4 5 6 7 8 9 10

  { "name": "6-1_test-lib", // ... "main": "dist/main.js", "module": "src/index.js", "scripts": { "prepublishOnly": "webpack --mode=production" }, // ... }

总结

站在 Webpack 角度，构建 Web 应用于构建 NPM 库的差异并不大，开发时注意：

• 使用 output.library 配置项，正确导出模块内容；
• 使用 externals 配置项，忽略第三方库；
• 使用 mini-css-extract-plugin 单独打包 CSS 样式代码；
• 使用 devtool 配置项生成 Sourcemap 文件，这里推荐使用 devtool = 'source-map'。

遵循上述规则，基本上就能满足开发一个 NPM 库所需的大部分需求

中文官网：https://verdaccio.org/zh-CN/

使用verdaccio建立npm仓库

步骤如下：

安装

nodejs版本14及以上

1

npm install --location=global verdaccio

配置修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# https://verdaccio.org/docs/configuration#uplinks
# a list of other known repositories we can talk to
uplinks:
  npmjs:
    # 修改npm代理地址为淘宝源
    url: https://registry.npmmirror.com

# Learn how to protect your packages
# https://verdaccio.org/docs/protect-your-dependencies/
# https://verdaccio.org/docs/configuration#packages
packages:
  "@*/*":
    # scoped packages
    # 访问权限 $all 对所有人开放
    access: $all
    
    # 发布权限，只对登录用户开放
    publish: $authenticated
    # 取消发布，只有admin用户可以操作
    unpublish: admin
    # if package is not available locally, proxy requests to 'npmjs' registry
    # 关闭代理，代理的包会缓存到设备上，占用大量空间
    # proxy: npmjs

auth:
  htpasswd:
    file: ./htpasswd
    # Maximum amount of users allowed to register, defaults to "+inf".
    # 设为-1，关闭注册功能
    # max_users: 1000
    # Hash algorithm, possible options are: "bcrypt", "md5", "sha1", "crypt".
    algorithm: bcrypt # by default is crypt, but is recommended use bcrypt for new installations
    # Rounds number for "bcrypt", will be ignored for other algorithms.
    rounds: 10

listen:
  - 0.0.0.0:4873 # listen on all addresses (INADDR_ANY)

配置nginx反向代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

server {
    listen 80;
    # 域名
    server_name npm.etsme.com;
    charset utf-8;

    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;
      proxy_set_header X-NginX-Proxy true;
      # npm仓库地址
      proxy_pass http://127.0.0.1:4873/;
      proxy_redirect off;
    }
}

创建系统服务

1
2
3
4
5
6
7
8

# 从verdaccio拷贝服务配置文件
sudo cp /usr/lib/node_modules/verdaccio/systemd/verdaccio.service /lib/systemd/system/
# 重载系统服务配置
sudo systemctl daemon-reload
# 启动verdaccio服务
sudo systemctl start verdaccio
# 设置verdaccio服务开机自启
sudo systemctl enable verdaccio

修改verdaccio.service文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

[Unit]
Description=Verdaccio lightweight npm proxy registry

[Service]
Type=simple
Restart=on-failure
# 指定用户
User=etsme
# 添加环境变量
Environment=PATH=/usr/bin:/usr/local/bin:/home/etsme/.nvm/versions/node/v20.17.0/bin
# 修改启动指令
ExecStart=/home/etsme/.nvm/versions/node/v20.17.0/bin/verdaccio -c /home/etsme/verdaccio/config.yaml

[Install]
WantedBy=multi-user.target

1

开始使用

添加 @etsme:registry 之后，操作 @etsme/* 的包就不再需要添加 --registry 参数了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 添加npm仓库地址
npm config set @etsme:registry=http://npm.etsme.com/

# 注册用户
npm adduser --registry http://npm.etsme.com

# 发布包
npm publish --registry

# 发布测试版本
npm publish --registry --tag beta

# 取消发布当前版本
npm unpublish --force

# 取消发布全部版本
npm unpublish package --force

# 取消发布指定版本
npm unpublish package@version --force

#取消发布当前测试版本，会删除所有beta版本
npm unpublish --force --tag beta

# 安装包
npm install @etsme/*
yarn add @etsme/*

# 安装测试版本
npm install @etsme/*@beta

# 查看包
npm view @etsme/*

事件循环

浏览器的进程模型

何为进程？

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

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

何为线程？

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

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

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

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

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

浏览器是一个多进程多线程的应用程序

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

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

其中，最主要的进程有：

1. 浏览器进程

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

2. 网络进程

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

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

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

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

   将来该默认模式可能会有所改变，有兴趣的同学可参见chrome官方说明文档

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

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

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

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

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

比如：

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

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

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

整个过程，被称之为事件循环（消息循环）

若干解释

何为异步？

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

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

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

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

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

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

面试题：如何理解 JS 的异步？

参考答案：

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

JS为何会阻碍渲染？

先看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<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>

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

<见具体演示>

任务有优先级吗？

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

但消息队列是有优先级的

根据 W3C 的最新解释:

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

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

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

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

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

例如：

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

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

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

参考答案：

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为：

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

CSS 属性计算过程

你是否了解 CSS 的属性计算过程呢？

有的同学可能会讲，CSS属性我倒是知道，例如：

1
2
3

p{
  color : red;
}

上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。

但是要说 CSS 属性的计算过程，还真的不是很清楚。

没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。

首先，不知道你有没有考虑过这样的一个问题，假设在 HTML 中有这么一段代码：

1
2
3

<body>
  <h1>这是一个h1标题</h1>
</body>

上面的代码也非常简单，就是在 body 中有一个 h1 标题而已，该 h1 标题呈现出来的外观是如下：

目前我们没有设置该 h1 的任何样式，但是却能看到该 h1 有一定的默认样式，例如有默认的字体大小、默认的颜色。

那么问题来了，我们这个 h1 元素上面除了有默认字体大小、默认颜色等属性以外，究竟还有哪些属性呢？

答案是该元素上面会有 CSS 所有的属性。你可以打开浏览器的开发者面板，选择【元素】，切换到【计算样式】，之后勾选【全部显示】，此时你就能看到在此 h1 上面所有 CSS 属性对应的值。

换句话说，我们所书写的任何一个 HTML 元素，实际上都有完整的一整套 CSS 样式。这一点往往是让初学者比较意外的，因为我们平时在书写 CSS 样式时，往往只会书写必要的部分，例如前面的：

1
2
3

p{
  color : red;
}

这往往会给我们造成一种错觉，认为该 p 元素上面就只有 color 属性。而真实的情况确是，任何一个 HTML 元素，都有一套完整的 CSS 样式，只不过你没有书写的样式，大概率可能会使用其默认值。例如上图中 h1 一个样式都没有设置，全部都用的默认值。

但是注意，我这里强调的是“大概率可能”，难道还有我们“没有设置值，但是不使用默认值”的情况么？

嗯，确实有的，所以我才强调你要了解“CSS 属性的计算过程”。

总的来讲，属性值的计算过程，分为如下这么 4 个步骤：

• 确定声明值
• 层叠冲突
• 使用继承
• 使用默认值

确定声明值

首先第一步，是确定声明值。所谓声明值就是作者自己所书写的 CSS 样式，例如前面的：

1
2
3

p{
  color : red;
}

这里我们声明了 p 元素为红色，那么就会应用此属性设置。

当然，除了作者样式表，一般浏览器还会存在“用户代理样式表”，简单来讲就是浏览器内置了一套样式表。

在上面的示例中，作者样式表中设置了 color 属性，而用户代理样式表（浏览器提供的样式表）中设置了诸如 display、margin-block-start、margin-block-end、margin-inline-start、margin-inline-end 等属性对应的值。

这些值目前来讲也没有什么冲突，因此最终就会应用这些属性值。

层叠冲突

在确定声明值时，可能出现一种情况，那就是声明的样式规则发生了冲突。

此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤：

• 比较源的重要性
• 比较优先级
• 比较次序

来来来，我们一步一步来看。

比较源的重要性

当不同的 CSS 样式来源拥有相同的声明时，此时就会根据样式表来源的重要性来确定应用哪一条样式规则。

那么问题来了，咱们的样式表的源究竟有几种呢？

整体来讲有三种来源：

• 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式。
• 网页的作者可以定义文档的样式，这是最常见的样式表，称之为页面作者样式。
• 浏览器的用户，可以使用自定义样式表定制使用体验，称之为用户样式。

对应的重要性顺序依次为：页面作者样式 > 用户样式 > 用户代理样式

更详细的来源重要性比较，可以参阅 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade

我们来看一个示例。

例如现在有页面作者样式表和用户代理样式表中存在属性的冲突，那么会以作者样式表优先。

1
2
3
4

p{
  color : red;
  display: inline-block;
}

可以明显的看到，作者样式表和用户代理样式表中同时存在的 display 属性的设置，最终作者样式表干掉了用户代理样式表中冲突的属性。这就是第一步，根据不同源的重要性来决定应用哪一个源的样式。

比较优先级

那么接下来，如果是在在同一个源中有样式声明冲突怎么办呢？此时就会进行样式声明的优先级比较。

例如：

1
2
3

<div class="test">
  <h1>test</h1>
</div>

1
2
3
4
5
6
7

.test h1{
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代码中，同属于页面作者样式，源的重要性是相同的，此时会以选择器的权重来比较重要性。

很明显，上面的选择器的权重要大于下面的选择器，因此最终标题呈现为 50px。

可以看到，落败的作者样式在 Elements>Styles 中会被划掉。

有关选择器权重的计算方式，不清楚的同学，可以进入此传送门：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

比较次序

经历了上面两个步骤，大多数的样式声明能够被确定下来。但是还剩下最后一种情况，那就是样式声明既是同源，权重也相同。

此时就会进入第三个步骤，比较样式声明的次序。

举个例子：

1
2
3
4
5
6
7

h1 {
  font-size: 50px;
}

h1 {
  font-size: 20px;
}

在上面的代码中，同样都是页面作者样式，选择器的权重也相同，此时位于下面的样式声明会层叠掉上面的那一条样式声明，最终会应用 20px 这一条属性值。

至此，样式声明中存在冲突的所有情况，就全部被解决了。

使用继承

层叠冲突这一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。

那么如果没有声明的属性呢？此时就使用默认值么？

No、No、No，别急，此时还有第三个步骤，那就是使用继承而来的值。

例如：

1
2
3

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

1
2
3

div {
  color: red;
}

在上面的代码中，我们针对 div 设置了 color 属性值为红色，而针对 p 元素我们没有声明任何的属性，但是由于 color 是可以继承的，因此 p 元素从最近的 div 身上继承到了 color 属性的值。

这里有两个点需要同学们注意一下。

首先第一个是我强调了是最近的 div 元素，看下面的例子：

1
2
3
4
5

<div class="test">
  <div>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

1
2
3
4
5
6

div {
  color: red;
}
.test{
  color: blue;
}

因为这里并不涉及到选中 p 元素声明 color 值，而是从父元素上面继承到 color 对应的值，因此这里是谁近就听谁的，初学者往往会产生混淆，又去比较权重，但是这里根本不会涉及到权重比较，因为压根儿就没有选中到 p 元素。

第二个就是哪些属性能够继承？

关于这一点的话，大家可以在 MDN 上面很轻松的查阅到。例如我们以 text-align 为例，如下图所示：

使用默认值

好了，目前走到这一步，如果属性值都还不能确定下来，那么就只能是使用默认值了。

如下图所示：

前面我们也说过，一个 HTML 元素要在浏览器中渲染出来，必须具备所有的 CSS 属性值，但是绝大部分我们是不会去设置的，用户代理样式表里面也不会去设置，也无法从继承拿到，因此最终都是用默认值。

好了，这就是关于 CSS 属性计算过程的所有知识了。

一道面试题

好了，学习了今天的内容，让我来用一道面试题测试测试大家的理解程度。

下面的代码，最终渲染出来的效果，a 元素是什么颜色？p 元素又是什么颜色？

1
2
3
4

<div>
  <a href="">test</a>
  <p>test</p>
</div>

1
2
3

div {
  color: red;
}

大家能说出为什么会呈现这样的结果么？

解答如下：

实际上原因很简单，因为 a 元素在用户代理样式表中已经设置了 color 属性对应的值，因此会应用此声明值。而在 p 元素中无论是作者样式表还是用户代理样式表，都没有对此属性进行声明，然而由于 color 属性是可以继承的，因此最终 p 元素的 color 属性值通过继承来自于父元素。

你答对了么？-）

-EOF-

你不知道的 CSS 之包含块

一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。

但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像从来没有听说过这玩意儿。

好吧，如果你对包含块的知识一无所知，那么系好安全带，咱们准备出发了。

包含块英语全称为containing block，实际上平时你在书写 CSS 时，大多数情况下你是感受不到它的存在，因此你不知道这个知识点也是一件很正常的事情。但是这玩意儿是确确实实存在的，在 CSS 规范中也是明确书写了的：

https://drafts.csswg.org/css2/#containing-block-details

并且，如果你不了解它的运作机制，有时就会出现一些你认为的莫名其妙的现象。

那么，这个包含块究竟说了什么内容呢？

说起来也简单，就是元素的尺寸和位置，会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

来吧，少年，让我们从最简单的 case 开始看。

1
2
3
4
5

<body>
  <div class="container">
    <div class="item"></div>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10

.container{
  width: 500px;
  height: 300px;
  background-color: skyblue;
}
.item{
  width: 50%;
  height: 50%;
  background-color: red;
}

请仔细阅读上面的代码，然后你认为 div.item 这个盒子的宽高是多少？

相信你能够很自信的回答这个简单的问题，div.item 盒子的 width 为 250px，height 为 150px。

这个答案确实是没有问题的，但是如果我追问你是怎么得到这个答案的，我猜不了解包含块的你大概率会说，因为它的父元素 div.container 的 width 为 500px，50% 就是 250px，height 为 300px，因此 50% 就是 150px。

这个答案实际上是不准确的。正确的答案应该是，div.item 的宽高是根据它的包含块来计算的，而这里包含块的大小，正是这个元素最近的祖先块元素的内容区。

因此正如我前面所说，很多时候你都感受不到包含块的存在。

包含块分为两种，一种是根元素（HTML 元素）所在的包含块，被称之为初始包含块（initial containing block）。对于浏览器而言，初始包含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。它是作为元素绝对定位和固定定位的参照物。

另外一种是对于非根元素，对于非根元素的包含块判定就有几种不同的情况了。大致可以分为如下几种：

• 如果元素的 positiion 是 relative 或 static ，那么包含块由离它最近的块容器（block container）的内容区域（content area）的边缘建立。
• 如果 position 属性是 fixed，那么包含块由视口建立。
• 如果元素使用了 absolute 定位，则包含块由它的最近的 position 的值不是 static （也就是值为fixed、absolute、relative 或 sticky）的祖先元素的内边距区的边缘组成。

前面两条实际上都还比较好理解，第三条往往是初学者容易比较忽视的，我们来看一个示例：

1
2
3
4
5
6
7

<body>
    <div class="container">
      <div class="item">
        <div class="item2"></div>
      </div>
    </div>
  </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.container {
  width: 500px;
  height: 300px;
  background-color: skyblue;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  border: 5px solid;
  margin-left: 100px;
}
.item2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 10px;
  top: 10px;
}

首先阅读上面的代码，然后你能在脑海里面想出其大致的样子么？或者用笔和纸画一下也行。

公布正确答案：

怎么样？有没有和你所想象的对上？

其实原因也非常简单，根据上面的第三条规则，对于 div.item2 来讲，它的包含块应该是 div.container，而非 div.item。

如果你能把上面非根元素的包含块判定规则掌握，那么关于包含块的知识你就已经掌握 80% 了。

实际上对于非根元素来讲，包含块还有一种可能，那就是如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

• transform 或 perspective 的值不是 none
• will-change 的值是 transform 或 perspective
• filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
• contain 的值是 paint (例如: contain: paint;)

我们还是来看一个示例：

1
2
3
4
5
6
7

<body>
  <div class="container">
    <div class="item">
      <div class="item2"></div>
    </div>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.container {
  width: 500px;
  height: 300px;
  background-color: skyblue;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  border: 5px solid;
  margin-left: 100px;
  transform: rotate(0deg); /* 新增代码 */
}
.item2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 10px;
  top: 10px;
}

我们对于上面的代码只新增了一条声明，那就是 transform: rotate(0deg)，此时的渲染效果却发生了改变，如下图所示：

可以看到，此时对于 div.item2 来讲，包含块就变成了 div.item。

好了，到这里，关于包含块的知识就基本讲完了。

我们再把 CSS 规范中所举的例子来看一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
  <head>
    <title>Illustration of containing blocks</title>
  </head>
  <body id="body">
    <div id="div1">
      <p id="p1">This is text in the first paragraph...</p>
      <p id="p2">
        This is text
        <em id="em1">
          in the
          <strong id="strong1">second</strong>
          paragraph.
        </em>
      </p>
    </div>
  </body>
</html>

上面是一段简单的 HTML 代码，在没有添加任何 CSS 代码的情况下，你能说出各自的包含块么？

对应的结果如下：

首先 HTML 作为根元素，对应的包含块就是前面我们所说的初始包含块，而对于 body 而言，这是一个 static 定位的元素，因此该元素的包含块参照第一条为 html，以此类推 div1、p1、p2 以及 em1 的包含块也都是它们的父元素。

不过 strong1 比较例外，它的包含块确实 p2，而非 em1。为什么会这样？建议你再把非根元素的第一条规则读一下：

• 如果元素的 positiion 是 relative 或 static ，那么包含块由离它最近的块容器（block container）的内容区域（content area）的边缘建立。

没错，因为 em1 不是块容器，而包含块是离它最近的块容器的内容区域，所以是 p2。

接下来添加如下的 CSS：

1
2
3
4

#div1 { 
  position: absolute; 
  left: 50px; top: 50px 
}

上面的代码我们对 div1 进行了定位，那么此时的包含块会发生变化么？你可以先在自己思考一下。

答案如下：

可以看到，这里 div1 的包含块就发生了变化，变为了初始包含块。这里你可以参考前文中的这两句话：

• 初始包含块（initial containing block）。对于浏览器而言，初始包含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。它是作为元素绝对定位和固定定位的参照物。
• 如果元素使用了 absolute 定位，则包含块由它的最近的 position 的值不是 static （也就是值为fixed、absolute、relative 或 sticky）的祖先元素的内边距区的边缘组成。

是不是一下子就理解了。没错，因为我们对 div1 进行了定位，因此它会应用非根元素包含块计算规则的第三条规则，寻找离它最近的 position 的值不是 static 的祖先元素，不过显然 body 的定位方式为 static，因此 div1 的包含块最终就变成了初始包含块。

接下来我们继续修改我们的 CSS：

1
2
3
4
5
6
7
8
9
10

#div1 { 
  position: absolute; 
  left: 50px; 
  top: 50px 
}
#em1  { 
  position: absolute; 
  left: 100px; 
  top: 100px 
}

这里我们对 em1 同样进行了 absolute 绝对定位，你想一想会有什么样的变化？

没错，聪明的你大概应该知道，em1 的包含块不再是 p2，而变成了 div1，而 strong1 的包含块也不再是 p2 了，而是变成了 em1。

如下表所示：

好了，这就是 CSS 规范中所举的例子。如果你全都能看明白，以后你还能跟别人说你是看过这一块知识对应的 CSS 规范的人。

另外，关于包含块的知识，在 MDN 上除了解说了什么是包含块以外，也举出了很多简单易懂的示例。

具体你可以移步到：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block

好了，这就是有关包含块的所有内容了，你学会了么？-）

-EOF-

浏览器渲染原理面试题

浏览器是如何渲染页面的？

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画

每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。

这样，整个渲染流程就形成了一套组织严密的生产流水线。

渲染的第一步是解析 HTML。

解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。

如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。

如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。

渲染的下一步是样式计算。

主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。

在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255,0,0)；相对单位会变成绝对单位，比如em会变成px

这一步完成后，会得到一棵带有样式的 DOM 树。

接下来是布局，布局完成后会得到布局树。

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。

大部分时候，DOM 树和布局树并非一一对应。

比如display:none的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然 DOM 树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应。

下一步是分层

主线程会使用一套复杂的策略对整个布局树中进行分层。

分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。

滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。

再下一步是绘制

主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。

完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。

合成线程首先对每个图层进行分块，将其划分为更多的小区域。

它会从线程池中拿取多个线程来完成分块工作。

分块完成后，进入光栅化阶段。

合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化。

GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。

光栅化的结果，就是一块一块的位图

最后一个阶段就是画了

合成线程拿到每个层、每个块的位图后，生成一个个「指引（quad）」信息。

指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。

变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。

合成线程会把 quad 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像。

什么是 reflow？

reflow 的本质就是重新计算 layout 树。

当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。

为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。

也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。

浏览器在反复权衡下，最终决定获取属性立即 reflow。

什么是 repaint？

repaint 的本质就是重新根据分层信息计算了绘制指令。

当改动了可见样式后，就需要重新计算，会引发 repaint。

由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint。

为什么 transform 的效率高？

因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段

由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化。