想要自己搭建一个代码仓库无非是以下几点原因：

1. 公司内部项目
2. 自己的项目，但不适合在公网
3. 大部分的 git 仓库虽然有私有服务，但价格都不便宜，甚至不如一台云服务器来的便宜

配置及安装文档 Gitlab

• 由于 gitlab 会用到 22 端口端口转发的化就走不了 git clone 的默认配置，且占用内存较高，不推荐使用 docker 进行部署；
• 由于 gitlab 自带 nginx 默认情况下会与属主机的 nginx 冲突，因此推荐只使用 gitlab 自带的 nginx 进行端口转发；

最小化配置

# path /etc/gitlab/gitlab.rb

external_url 'http://git.demo.com'

# SMTP
gitlab_rails['smtp_enable'] = true
gitlab_rails['smtp_address'] = 'smtp.163.com'
gitlab_rails['smtp_port'] = 465
gitlab_rails['smtp_user_name'] = 'xxxx@163.com'
gitlab_rails['smtp_password'] = 'xxxx'
gitlab_rails['smtp_authentication'] = 'login'
gitlab_rails['smtp_enable_starttls_auto'] = false
gitlab_rails['smtp_tls'] = true
gitlab_rails['gitlab_email_from'] = 'xxxx@163.com'
gitlab_rails['smtp_domain'] = 'smtp.163.com'
gitlab_rails['gitlab_email_from'] = 'xxxx@163.com'
gitlab_rails['gitlab_email_display_name'] = 'xxxx'
gitlab_rails['gitlab_email_reply_to'] = 'xxxx@163.com'

# NGINX 
nginx['client_max_body_size'] = '250m'
# 添加自己的 NGINX 代理
nginx['custom_nginx_config'] = 'include /etc/nginx/conf.d/*.conf;'

# PGSQL
postgresql['shared_buffers'] = '128MB'

# Terraform
gitlab_rails['terraform_state_enabled'] = false

# Usage Statistics
gitlab_rails['usage_ping_enabled'] = false
gitlab_rails['sentry_enabled'] = false
grafana['reporting_enabled'] = false

# 关闭容器仓库功能
gitlab_rails['gitlab_default_projects_features_container_registry'] = false
gitlab_rails['registry_enabled'] = false
registry['enable'] = false
registry_nginx['enable'] = false

# 包仓库
gitlab_rails['packages_enabled'] = false
gitlab_rails['dependency_proxy_enabled'] = false

# GitLab KAS
gitlab_kas['enable'] = false
gitlab_rails['gitlab_kas_enabled'] = false

# Mattermost
mattermost['enable'] = false
mattermost_nginx['enable'] = false

# Kerberos
gitlab_rails['kerberos_enabled'] = false
sentinel['enable'] = false

# GitLab Pages
gitlab_pages['enable'] = false
pages_nginx['enable'] = false

# 禁用 PUMA 集群模式
puma['worker_processes'] = 1
puma['min_threads'] = 1
puma['max_threads'] = 2
puma['per_worker_max_memory_mb'] = 256

# 降低后台守护进程并发数
sidekiq['concurrency'] = 8

# 关闭监控
prometheus_monitoring['enable'] = false
alertmanager['enable'] = false
node_exporter['enable'] = false
redis_exporter['enable'] = false
postgres_exporter['enable'] = false
pgbouncer_exporter['enable'] = false
gitlab_exporter['enable'] = false
grafana['enable'] = false
sidekiq['metrics_enabled'] = false

gitlab_rails['env'] = {
  'MALLOC_CONF' => 'dirty_decay_ms:1000,muzzy_decay_ms:1000'
}

gitaly['env'] = {
  'MALLOC_CONF' => 'dirty_decay_ms:1000,muzzy_decay_ms:1000',
  'GITALY_COMMAND_SPAWN_MAX_PARALLEL' => '2'
}

安装 gitlab 后，启动完成后，修改 admin 页面上的设置可能 500 ，其原因是有些密钥需要重置，原因可能是首次启动未启动完全导致（博主的机子性能不够，导致安装后用默认配置启动出现卡死的情况），使用以下代码尝试修复

# 检查密钥
gitlab-rake gitlab:doctor:secrets

# 根据检查结果 可能需要执行以下内容
# 1 进入 dbconsole 更新密钥，可能要执行很久，耐心等待
gitlab-rails dbconsole

UPDATE application_settings SET runners_registration_token_encrypted = null;
UPDATE application_settings SET runners_registration_token_encrypted = null;
UPDATE application_settings SET encrypted_ci_jwt_signing_key = null;

ghost 博客系统，其优点如下

• 轻量，完全以博客为中心，没有复杂的功能，这就代表着占用内存小，系统消耗也小；
• 界面支持完全的定制化，扩展性极强；

services:
  db:
    image: mysql:8.0
    volumes:
      - ./mysql:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: PASSWORD
      MYSQL_DATABASE: ghost

  ghost:
    image: ghost:5
    restart: always
    ports:
      - '10002:2368'
    volumes:
      - ./content:/var/lib/ghost/content
    depends_on:
      - db
    environment:
      database__client: mysql
      database__connection__host: db
      database__connection__user: root
      database__connection__password: PASSWORD
      database__connection__database: ghost
      url: http://blog.demo.com

volumes:
  mysql_data:
    driver: local
  ghost_data:
    driver: local

verdaccio 私服搭建，搭建过程中的一些问题以及解决：

• docker compose 启动后，可能会报错：配置找不到，添加 config.yaml 文件到映射的 ./conf 目录即可，config.yaml 具体内容可在官网找到，下方也有最小化配置。

services:
  verdaccio:
    image: verdaccio/verdaccio
    container_name: 'verdaccio'
    networks:
      - node-network
    environment:
      - VERDACCIO_PORT=4873
      - VERDACCIO_PUBLIC_URL=http://npm.demo.com
    ports:
      - '10001:4873'
    volumes:
      - './storage:/verdaccio/storage'
      - './plugins:/verdaccio/plugins'
      - './conf:/verdaccio/conf'

networks:
  node-network:
    driver: bridge

# path /path/to/verdaccio-docker/conf/config.yaml

storage: ./storage

plugins: ./plugins

web:
  title: NPM
  primary_color: '#1b7e76'
  favicon: http://npm.demo.com/favicon.ico
  logo: http://npm.demo.com/logo.png
  showFooter: false
  publicPath: http://npm.demo.com/

auth:
  htpasswd:
    file: ./htpasswd
    # max_users: 1000

uplinks:
  npmjs:
    url: https://registry.npmjs.org/

packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

server:
  keepAliveTimeout: 60

publish:
  allow_offline: false

middlewares:
  audit:
    enabled: true

i18n:
  web: zh-CN

大家好，我是小斑，于 2020-8-1 诞生，一个起于 Markdown 却不止于 Markdown 的富文本编辑器。

又一个编辑器？

编辑器的世界里，前辈众多，知名编辑器比比皆是 Word、Page、 Idea、Vscode 等等，但大阵营可以分为两个：

• 纯文本编辑器 - 只能输入字符的编辑器，程序员电脑里的 IDE ，大多属于这一类；
• 富文本编辑器 - 可以进行图文的混排，功能丰富，文字有单独样式、格式的编辑器，主要活跃与 Web 端；

纯文本编辑常被用来写程序，但其中却有个身在曹营心在汉的异类：Markdown 编辑器，这类编辑器虽说只能输入文字，样式也单一，但生成的内容却可以和富文本编辑器媲美。

另一类，便是富文本编辑器了，顺便提一下，小斑我也是富文本编辑器，流行于 Web 端的富文本编辑器有很多，但我的主人为什么还要费劲心思造小斑呢？这就得请我的主人来说道说道了，下面有请阿飞先生来讲述讲述。

“咳咳！不是说自我介绍的任务交给你了嘛~ 我已经和你说过啦，你自己来吧！”

“老大，你怎么还害羞上了。。。那行，我自己来！”

“故事发生在一个月黑风高的夜晚，只有主人面前的电脑亮着，电脑屏幕里不知放着什么，阴暗的屏幕上有一口很深的井，突然···”

“小斑！”

“好好好！那我正式开始了！”

不得已的妥协

其实吧，最早的时候，大概 3 年前，我还不存在，老大想找个称手的富文本编辑器来搭自己的博客，谁让老大是个程序员，最大的特点就是喜欢折腾，奈何 3 年前的老大还是只小菜鸡，没有能力自己弄一个博客系统，看了一遍市场上成熟的博客框架后，选了 Ghost 这个简约的博客系统，也结识上了 Markdown 这门干练的语言。

但没过多久，老大他就开始哔哔了：“作为一个前端，连个图文混排的博客都没有，太 Low 了！”

接着就开始折腾，刚开始，他只是想简单的增强 Markdown 以达到自己想要的效果，一顿写 Markdown-It 的插件，但是增强来增强去，还是不爽，毕竟编辑 Markdown 时是没有效果的（当然，双屏 + 同步滚动是个不错的解决方案），牢骚话也变成了：“我都在公司面对了一天的纯文本编辑器，回来写博客还得面对纯文本，写点东西可太不容易了。”

哎！没得办法，富文本编辑器必须得搞起来，老大也不想再造轮子，综合考虑试用下来，最终还是做出了决定：那就是造一个！！但话得说说清楚：别的编辑器也很不错，但却并没有满足老大的需求，就比如老大在折腾期间选中的一款富文本： DraftJs。

DraftJs

DraftJs 如它的名字一样：草稿，在记事方面，绝对的够用，但对于生成网页来说，却有几个痛点：

• 图片不能连着放，中间的空行删除不了；
• 图片不能塞到文字中，老大那一大箱的表情包可都用不了了，虽说老大还是通过曲线救国的方式给添加上了；
• 不能生成 Markdown ，虽说能生成 Html ，但是 Html 结构复杂，语法不如 Markdown 来的简洁干练；
• Table 表格，不支持；
• 文字的样式输入截断不了，比如光标输入前的字符是加粗的那么之后的文字永远都是加粗的状态，不能截断样式，有点难受；
• ···

相信这些，知乎的前端大佬们应该很懂，老大看了他们的编辑器，用的就是 DraftJs ，想必塞由公式生成图片费了不少劲吧~

其实老大那时也还没开始重复造个轮子（没准是实力不够呢！😜），深入看了 DraftJs 源码，并翻译了整个 DrafrJs 文档后，写了个 Draft-X 用于增强 DraftJs。

但是没过多久，还是不爽！（可真是难伺候~ 😅）

思前想后，老大决定放弃 DraftJs 在看看别的富文本编辑器，或自己从头写一个。

决定

在重新找一个编辑器之前，老大列了下自己的需求：

• 样式能够完全的自定义（至少对于编辑器开发者而言）；
• 直接添加样式还不够，还要加起来方便，比如宽度的修改直接拖动角标等；
• 文字和图片能连续排放，表情包必须安排上；
• 文字样式能截断，输入空格后，文字还原为默认样式；
• 必须支持 Table；
• 最好还能直接像 Highlight 那样，通过修改 Css ，直接定制文章的整体样式；
• 既然提到了 Highlight 那代码块要支持高亮；
• 当然，其他的一切都要向别的编辑器靠齐；
• 最后，也是很重要的一点：与 Markdown 要有互动：
  1. 直接导入 Markdown 文件；
  2. 支持导出 Markdown 文件；
  3. 支持直接复制 Markdown 文本；
  4. Markdown 支持的内容，编辑器必须要支持，编辑器的功能应该是大于等于 Markdown 的；

大概也就这么多吧~

“多吗？？？不多吧！！！”

“不多不多😂 😂~ 老大你怎么来了！” 高要求才能有小斑我呀！

带着这些要求，老大看遍了目前能搜到的富文本编辑器，与预期的功能相比，都差了一两点。

• TinyMCE、CKEditor、UEditor、wangEditor 之类的富文本编辑器为纯 Html 编辑器，是对 contenteditable 容器的增强，它们很优秀，但却不符合老大的要求，老大理想中的富文本编辑器是能生成别的内容，不只是 Html，比如 Markdown ，因此内容必须是由 JavaScript 来控制。这点还真不是老大挑，试想一下，如果你写错了一个字，是在 Html 里找容易呢，还是在 Markdown 里容易，而且如果内容由 JavaScript 控制，没准，还能生成别的东西！比如说小程序的页面？不过这都是后话了，但这一切实现的基础就是内容在自己的掌控范围内！因此，这点其实还挺重要的！
• Quill、DraftJs 内容由 JavaScript 控制，但是功能有点不够用，最重要的原因是不支持 Table；

当然，以上两类都可以通过一些曲线救国的方法来支持老大的想法，比如在 TinyMCE 上加一个 Html 解析器，生成抽象语法树后，在生成别的内容，或是继续增强 DraftJs 。思来想去，3 个月前，老大决定：要做就做最正确的事，做一个连一个字符都在自己掌控中的编辑器，这样无论自己想干什么，都能实现。于是，3 个月后，小斑正式诞生！👏

能干嘛？

我是小斑，一个功能完整且丰富的富文本编辑器，相关的说明文档就在我的编辑器里，打开就能见到，说明书即是了解小斑的途径，也是能够编辑的哦，放心大胆的去改吧，说明书随便改，小斑并不会保存。想恢复？刷新一下就好啦！也希望大家好好阅读后再开始探索哦~ 在这简单的谈谈我的特点和强大的功能吧：

1. 使用但不依赖于 contenteditable 容器，简单来说，老大只用了该容器的光标用于定位输入或是操作的位置，其他的内容一概不用（包括文章历史栈的管理），也就是说：如果哪天老大想把光标也折腾折腾，那么 contenteditable 容器大概会被老大抛弃吧；
2. 内容完全由 JavaScript 所控制，小到一个字符，只要配合适当的生成器，就能生成所需要的内容（目前能生成 Html 和 Markdown）；
3. 样式随意添加，小斑的核心完全支持，但对于一个面向用户的小斑而言，老大考虑后，提供操作，但未开放；
4. 与 Markdown 有着良好的互动，包括直接打开，导入导出，直接复制 Markdown 内容；
5. 快捷生成，小斑有一套完整的快速生成指令，在空行内直接输入指令，按下 Tab 键即可快速生成段落类型，并且这些指令与 Markdown 的标记完全一致，比如在空行输入 # 键，在按下 Tab 键，就能直接生成一级标题，当然详细内容请参考说明书；
6. 代码由 Highlight 进行高亮，编辑与高亮同步进行；
7. 文章可设置主题，一键修改文章的整体呈现；
8. 支持 PWA，使用 Chrome 打开，地址栏右侧会有 + 号哦，点击一下就会生成本地应用，只要不切换代码和文章主题，没网也能用！

接下来

接下来，老大想把小斑诞生过程中遇到的一些问题，以及整体的架构给好好梳理一下，并记录下来。

这部分老大已经全权交给我整理了！那我就不客气了，偷偷告诉大家，我的内部是一个井然有序的世界，各个部门担任着各自的职责，忙碌而有序。

好啦！今天嘚吧嘚的说了这么久，也是希望大家能多多使用我，爱你们哟~

哦！对了，为了避免使用低版本的浏览器时，造成问题，小斑主动做了浏览器版本校验，请把浏览器升级到最高版本哦~ ps: 生成的文章不受浏览器版本影响。

本文由 ZebraEditor 编辑并生成，我是小斑，我为自己带盐。

本文翻译自 sessionstack.com，该系列共 19 篇文章，解释了 JavaScript 是如何在浏览器中工作，深入到了 JavaScript 解释器的工作原理，以及 JavaScript 技术实现细节。

原文链接: How JavaScript works: an overview of the engine, the runtime, and the call stack

前言

伴随着 JavaScript 越来越流行，越来越多的领域都能看到它的身影比如：前端、后端、APP 混合应用程序、嵌入式设备等。

该篇文章是本系列文章的第一篇，旨在深入探讨 JavaScript 及其工作方式。我们认为：通过了解 JavaScript 的组成以及这些组成如何一起工作，能够写出更好的代码和应用。我们还将分享构建 SessionStack 网站时的一些经验和代码原则，SessionStack 网站是一个轻量级的 JavaScript 应用，为了保持网站竞争力，它的代码强大且高效。

根据 GitHut 统计信息所示（下图），以目前仍在维护的项目和 GitHub 中各类语言的推送总数而言，JavaScript 排名第一。

当然你也可以查看最新的数据排行。

由此可见越来越多的项目开始依赖 JavaScript，这意味着开发者必须能够利用 JavaScript 生态提供的内容，并且对其内部结构需要更加深入的了解，才能构建出优秀的软件。

但就目前而言，很多开发者每天都在使用 JavaScript，却不知道这背后发生了什么。

总览

几乎每个使用过 JavaScript 的开发者都听说过 V8 引擎，其中大部分也知道 JavaScript 以单线程的形式运行在浏览器中，或明白 JavaScript 使用回调的方式来处理任务。

在这篇文章中，我们将详细介绍这些概念，并解释 JavaScript 是如何运行的。相信了解这些细节后，大家将能够利用宿主环境（浏览器或是 node ）下提供的 API 编写更好、非阻塞的应用。

如果你是 JavaScript 新手，那么该篇文章将助你了解：为何 JavaScript 与其他语言相比如此 “古怪” ？

如果你是一位经验丰富的 JavaScript 开发人员，希望它能带给你对 JavaScript 运行时新的见解。

Engine 引擎

谷歌的 V8 引擎是最常见的 JavaScript 引擎，V8 引擎被用在 Chrome 以及 Node.js 中，下图是 V8 引擎的构成（简化版）：

该引擎主要由两部分组成：

1. Memory Heap（内存堆）：发生内存分配回收的地方（变量的创建及销毁）
2. Call Stack（调用栈）：代码执行的地方（函数的调用）

Runtime 运行时

在浏览器中，有些经常被开发者使用到的 API（比如 setTimeout），这些 API 并非由 JavaScript 引擎提供。

那么，这些 API 哪儿来的？

这说起来有点复杂。

下图的 Web APIs 都是这类 API，一个完整的 JavaScript 运行时如下图所示：

因此，仅仅拥有 JavaScript 引擎还不足以完成所有的任务，除了引擎提供的 API 我们还拥有 Web APIs，这些 API 由浏览器提供，比如 DOM 操作、AJAX、setTimeout 等等。

当然，一个完整的运行时，还包括了 Event Loop（事件循环）以及 Callback Queue（事件队列）。

Call Stack 调用栈

JavaScript 是单线程语言，这意味着它只拥有一个调用栈（Call Stack），因此同一时间，它只能干一件事。

调用栈是一种数据结构，它记录程序执行到的函数。如果程序进入某个函数，那么 JavaScript 引擎将生成一个调用帧并将它压入栈顶，如果程序从这个函数返回，那么该函数对应的调用帧便会从栈顶弹出，这就是调用栈所能做的一切。

我们通过一个简单的例子来了解这个过程：

function multiply(x, y) {
    return x * y;
}

function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}

printSquare(5);

当 JavaScript 引擎开始执行代码时，调用栈是空的，接着就会发生下图所示内容：

调用栈中的每个条目被称为调用帧。

异常

当发生异常时，调用栈将被保存，这也是显示异常信息最基本的条件。我们来看下面的代码：

function foo() {
    throw new Error('Call Stack will help you resolve crashes :)');
}

function bar() {
    foo();
}

function start() {
    bar();
}

start();

当上述代码运行在 Chrome 时，将会发生如下图的错误提示：

栈溢出

栈溢出 - 当程序的调用栈达到一定程度后，JavaScript 引擎便会报出栈溢出的错误。这很容易发生，尤其当你使用递归编写代码但却不进行大量测试时。以下代码就是一个例子：

function foo() {
    foo();
}

foo();

当 JavaScript 引擎开始执行这段代码时，它首先调用函数：foo，但这个函数递归且在没有任何终止条件的情况下调用了自己。这导致的结果就是：在执行的每个步骤中，相同的函数被一次又一次地添加到调用栈中，从而导致栈溢出。就如下图所示：

在浏览器中，当发生栈溢出时，会导致程序出错，就如下图所示：

线程

在单线程的环境下运行代码很简单，因为不需要处理多线程场景下会发生的问题，比如：死锁。

但是单线程的运行环境也有所限制，由于 JavaScript 仅拥有一个调用栈，当某段代码运行变慢时，会发生什么？

并发 & Event Loop（事件循环）

当在调用栈中的函数调用要花费大量时间才能完成时，会发生什么？比如，你想在浏览器中使用 JavaScript 进行一些复杂的图像转换。

你可能会问：这也是一个问题？

试着想想：当调用栈里有函数需要执行，但浏览器却不能做任何事（因为它被阻塞了）。这意味着浏览器不能进行页面渲染，不能运行任何其他代码，它卡住了。这导致的问题就是：页面不能顺畅的渲染，给了使用者一个糟糕的体验。

但这并不是唯一的问题：当浏览器开始处理调用栈里如此多的任务时，它可能会停止响应很长时间，绝大部分的浏览器都会发出一个警告，询问使用者是否终止这个目前无法响应的页面，就如下图一样：

这并不是一个良好的用户体验！！

那么，我们该如何才能在不阻塞 UI 或照成浏览器无响应的情况下执行大量代码？

异步回调！！

这部分内容将在该系列的下篇文章中进行详细的解释：深入 V8 引擎 & 编写优化代码的 5 个技巧！。

JS 的本质？复读机？忍者！

“躺好吧！”JS老大拿起一旁的咖啡，对函数说道。

“好！”

老大按下工作台旁的按钮，函数眼中射出两道光芒，投在了工作台前的白幕。工作台一侧，出现了一个小盆，里面空空如也。

“来吧，开始执行！”老大狠狠的抿了一口手中的咖啡，按下了工作台侧边的按钮。

嘿！你好

工作台上方的白幕上出现了函数保存的第一行代码：

let num1 = 1;

老大大手一挥，造了个新数据：1，分配到了变量大厅的 0x007 号单间，于此同时工作台旁的小盆内出现了一个身影，头上标着 num1，身上写着 0x007。

“嘿！小不点，你好呀！”老大对刚出现的身影挥了挥手。

“你才是小不点！” num1 挥了挥那只小手，呛了老大一句。

老大嘿嘿一笑，摇了摇头。“不管你了，继续执行！”说着，再次按了下按钮。

白幕上出现了第二行代码：

let num2 = 2;

“又是一个赋值操作啊！简单！” 大手一挥，小盆内又蹦出一个身影，头上标着 num2，身上写着 0x008。

“嘿！你好呀！” num2 看到 num1 出现后便脱口而出：“天王盖地虎！”

“小鸡炖蘑菇！” num1 相视一笑。把 num2 拉到了身边。

“继续！”老大并没有管小盆内的 num1 与 num2。

融和

let num3 = num1 + num2;

“终于开始有点难度了，num1 num2 过来，干活了。”老大朝着小盆说道。

“好嘞，有何吩咐！”。

“过来吧，让我看看你们的类型，都是数字，OK。” 老大说着，从工作台上拿起累加器，把 num1 与 num2 丢了进去。不一会，累加器给了老大一个结果：3。老大大手一挥，小盆里又蹦出一个身影，头上标着 num3。

“快去见见你们的新伙伴吧！” 老大朝着 num1 与 num2 说道。

“天王盖地虎！” num1 与 num2 对新来的小伙伴说道。

“小鸡炖蘑菇！”

“嘿嘿，是我们的人！”

争议

let prefix = "question";

“赋值操作，简单。” 老大刚说完，小盆中又蹦出一个身影，头上标着 prefix。

“喂喂，那个新来的，天王盖地虎！” num1 对 prefix 喊道。

“宝塔镇河妖？？？？” prefix 满脸的疑问。

“你别过来！非我族人，哪儿凉快哪儿呆着去！” num1 拉了拉旁边的 num2 与 num3。

prefix 还在蒙圈中，下一句代码随之而来：

let question = prefix + num1;

“嘿，prefix 和 num1 过来，配合一下，求个值！” 老大说道。

“什么！我要和它一起？还求值！非我族类，弄不了！” num1 恶狠狠的说道：“求值是不可能求值的！这辈子都不会和它一起求值的！抛错吧！”

“...” prefix 一脸委屈，继而转为愤怒：“你以为你谁啊！谁愿意与你一起，个渣渣！”

“行了！谁让你们一起的，看把你们能的！” 说着老大拿出一旁的类型转换器，自言自语道：“我记得有个偏向性啥的，+号 的偏向性是什么来着，让我看一看说明书：JavaScript 类型转换”

若 +号 两侧的类型中有字符类型，则其偏向性为字符串。

“现在两边是有字符类型，那么整体的偏向性应该为字符，那就要把数字转换成字符串！得嘞，num1 你过来，我给你转转！”

说着，老大拿出 String 转换器，放入 num1（String(num1)）一顿操作后，蹦出个字符串："1"。

“回去吧！接下来就没你的事了！” 老大对着 num1 说道。

“接下来就好办了，字符串拼接。” 说着老大拿出字符串拼接器，放入了 prefix 与刚生成的 "1"。一会就生成了 question。

“过来！过来！那边那些变量可不咋地！” prefix 对 question 说道。

“我刚刚都瞧见了！个渣渣！” 说着 question 走向了 prefix。

“对对对！同类连感觉都一样。” prefix 兴奋的说道。

各自为营

let null1 = null, null2 = null;

转眼间，小盒内又出现了两个身影。

“个渣渣？” prefix 对着 null1 与 null2 说道。

“？？ 你才渣渣！” null1 有点恼怒。

“哦！不好意思，认错人了！我就对对暗号，不好意思哈！” prefix 略带抱歉的说道。

“天王盖地虎？” prefix 刚说完，num1 紧接着问道。

“宝塔镇河妖？” null1 有点不知所措。

“你别过来！非我族人，哪儿凉快哪儿呆着去！” num1 脱口而出。

null1 终于怒了，大喊道：“水能载舟！”

“也能煮粥！” 一旁的 null2 脱口而出。

“走我们去那边！一个个的了不起啊！谁还没个暗号！”

看着小盆里快要闹翻了天，老大终于忍不住了：“你们一个个的干嘛呢！要反了不成！”

“非我族类，其心必异！” 变量们突然统一了口径。

“呦呵，这倒挺齐！”

“谁和它们齐了！” 虽然这么说着，但这句依旧齐的不像话。

“停停停！这个给你们，这个盆被我分成了七间，数值，字符，null，undefined，布尔值，引用值，Symbol各一间，行了吧！”

“行！”

“你们还学！”

“还学！”

“哼！”

“哎~”老大拍了拍毛发日渐稀疏的脑袋，“真是些冤家！”

引用值

let obj = {
    toString() {
        return "this is a string";
    },
    valueOf() {
        return 1;
    }
};

随着代码的执行，引用值的单间也终于入住了一个变量：obj。

let sum = num1 + obj;

“num1 你过来，obj 你也过来。这是个求和操作！”

“偏向性如何？” obj 来了一句。

“你！知道偏向性？”老大一惊。

“对啊，我可是对象，什么都知道，说吧说吧！我还想着装饰下我的房间呢！快点。”

“emmmm 说明书上说如果有字符的话是字符，没的话是数值！” 老大看着类型转换说明念了出来。“应该是数值，这里并没有字符。”

“了解，反正偏向性不能确定是字符，对吧？” obj 问道。

“嗯，是的，这个 +号 运算的偏向性不确定。”

“好，那我调用我的 valueOf 方法吧，是个数值，给你！现在能确定偏向性了吧！”

“嗯，是数值！”

“那接下来该怎么做，你自己应该清楚了吧，我先走了！” 说完，剩下目瞪口呆的老大，拿着 obj 给的数值：1。生成了 sum 变量，其值为 2。

“这个引用值有点厉害，省心！”

质疑

let mergeStr = question + obj;

“嘿，obj 这次偏向性是字符串没差了！”老大得意的说道。

“哦？+号 操作符的偏向性我记得是不确定的吧？”

“是啊，但这里已经有个字符了呀，偏向性不就能确定了吗？”

“那我可不管，我只管操作符的偏向性，只要是不确定，我就调用 valueOf 的结果给你，要是这个结果不是个基础类型，我在想想办法！”

“哈？你确定？”

“你到底是不是个称职的JavaScript 解释器啊！按我说的。”

“哦···” 突然的质疑让老大略感惭愧。

“这个给你。” obj 拿着数值：1 给了老大。“接着你再判断 +号 运算符的偏向性吧，我走了。”

“好，你慢走。” 老大突然有点泄气。但手上的活却依旧干着，不一会 mergeStr 变量出现在了小盒中。

顺畅

let mergeStr2 = `${question}${obj}`;

“这次偏向性确定了，就是字符串，给我字符串吧！” 老大自信的对 obj 说道。

“好，既然偏向性确定是字符串了，那就调我的 toString 吧！这个给你！”说着 obj 将 "this is a string" 塞到老大手中。

老大想了想，问道：“你会不会可能给我非字符类型的啊？”

“emmmm 这个是有可能的哦，但我给到你的肯定是基础类型，你在看情况转换呗！就是这样，我撤啦！”

“得嘞，又是个大爷！”

尾声

老大勤勤恳恳的继续往下执行代码，小盒内的变量进进出出，终于到了收尾的时候。

放下手中的工具，不经叹道：“这函数是谁写的啊，这么不严谨，那有对象和基础类型进行操作的，这么多不同类型间的相互操作，怎么一点质量都没有呢！”

这次的 why what or how 主题：JavaScript 类型转换。

什么是类型装换，以及为什么要进行类型转换？相信绝大多数熟悉面向对象的开发者们都知道是为了匹配类型！

但，这是 JavaScript 的世界，可以说原本就是没有类型系统的，那么为什么 JavaScript 的世界也有类型转换？

为了容错！并且 JavaScript 世界的类型转换也不是发生在对象上，而是在基础类型！

类型！

这不是刚说完 JavaScript 没有类型，怎么开始说类型了？

这里指的是基础类型，相信大家对于 JavaScript 数据类型已经充分了解了，这里也不啰嗦主要有以下 7 种。

• 数值： 1、1.0、1e10
• 字符串："string"、"foo"、"bar"
• 布尔值： true、false
• null
• undefined
• 对象
• Symbol： ES6 新出的类型，用于标志唯一值

转换场景

OK 类型 7 种，很简单，那么转换发生的条件是什么？

1. 不同类型的多个数据进行了一定的操作如：比较、数学运算（四则运算与位运算）、逻辑运算（&&、||）、拼接字符串。
2. 单元运算符：!、+、-、++、--、~（位运算中的取反）。

可以用一个词来概括这些场景：冲突。当冲突发生时，便会发生类型转化，而冲突又可以概括为以下两点：

1. 数据间的冲突。
2. 数据与运算符的冲突。

举几个常见的例子：

let num = 1;
let str = 'foo';
let bool = true;
let nu = null;
let nd = undefined;
let obj = {foo: 'bar'};

// 比较：不同数据间的冲突
num < str && bool == nu || nd > obj

// 四则运算：数据的冲突 & 数据与运算符的冲突
num + str - bool * nu / (nd + obj)

// 位运算：数据与运算符的冲突
num ^ str | bool & nu | nd >>> obj

// 拼接字符串：数据与运算符的冲突
`bala${num}bala${str}bala${bool}${nu}bala${nd}${obj}`

// 单元运算：数据与运算符的冲突
!num
+str
-bool
++nu
nu++
--nd
nd--
~obj

以上场景都需要进行类型转换，因为不同类型的数据是不能进行同一操作的，但这些都是符合 JavaScript 语法的，这就产生了冲突，就需要解决冲突，那么如何解决冲突呢？就需要进行类型转换，就要谈到一个策略：

在 JavaScript 中，是不太希望发生错误的，换句话说，JavaScript 解析器会尽量满足你的需求。

如何理解这句话？这就需要谈到一个词：偏向性。

偏向性

我们从最简单的拼接字符串来讨论这个问题。思考以下问题：

在拼接字符串时，你最希望得到的结果是什么？

这是一个很傻逼的问题，字符串啊！当然必须是字符串啊！通过一个例子来说明：

let num = 1;
let string = 'string';
let boolean = false;

`${num}${string}${boolean}`

上述的代码中，由于 (``) 操作符返回一定是字符串，因此 num 和 boolean 就被 JavaScript 解析器转换成字符类型。

这种从操作符去推测其数据应该转换成什么类型，我称之为：偏向性。所有的操作符都有其偏向性，总结如下

注：

1. 操作符的偏向性可能不止于一种，如 + 运算符，其最终的偏向性由运算符两侧的数据类型所确定。
2. 偏向性内的 > 符号表示偏向性的优先级，即若前者不能满足要求则使用后者。

确定偏向性

这里仅讨论偏向性不确定的操作符，以及如何确定操作符的偏向性。

加号运算符

1. 若 + 号两侧的类型中有字符类型，则其偏向性为字符串。
2. 转换为数值进行比较。

参考以下例子：

// 字符串 + 数值
'a' + 1             // 'a1'
1 + 'a'             // '1a'
'10' + 1            // '101'
1 + '10'            // '110'

// 字符串 + 其他
'a' + true          // 'atrue'
'a' + false         // 'afalse'
'a' + null          // 'anull'
'a' + undefined     // 'aundefined'

// 不含字符串
true + null         // 1
false + undefined   // NaN 因为 Number(undefined) 为 NaN，而 NaN 的任何四则运算都为 NaN。
10 + true           // 11

'10' + 1 + 1        // '1011'
1 + '10' + 1        // '1101'
1 + 1 + '10'        // '210'
// 连加操作可以认为是两次 + 的集合，如 '10' + 1 + 1 => ('10' + 1) + 1

比较运算

比较运算：>、>=、<、<= ，这里排除相等判断。

1. 若比较运算两侧都为字符类型，则其偏向性为字符串。
2. 转换为数值进行比较。

可参考以下例子：

// 都为字符，则使用字符的字典顺序比较
'b' > 'a'           // true

// 表达式下的注释为推导过程
'a' > 1             // false
// => Number('a') > 1       => NaN > 1      => false
'a' < 1             // false
// => Number('a') < 1       => NaN < 1      => false
// NaN 与任何值比较都为 false，这也证明了 'a' 转换成数值
'10.1' > 1          // true
// => Number('10.1') > 1    => 10.1 > 1     => true
'10.1a' > 1         // false
// => Number('10.1a') > 1   => NaN > 1      => false
// 这说明 js 解析器确实使用 Number 来转换类型，而不是使用 parseInt 或是 parseFloat

true > 0            // true
// => Number(true) > 0      => 1 > 0        => true
false < 1           // true
// => Number(false) < 1     => 0 < 1        => true
true > false        // true
null < 1            //true
// => Number(null) < 1      => 0 < 1        => true
undefined < 1       // false
undefined > 1       // false
// => Number(undefined) > 1 => NaN > 1      => false

'a' > true          // false

注： + 运算符只要有一侧是字符类型其偏向性为字符类型，而比较运算必须为两次都为字符类型，其偏向性才为字符类型。

纵观上述代码，还可以得出一个结论，只要不是数字型的字符串，与任何非字符串比较都为 false，其原因在于 Number('a') 为 NaN，NaN 与任何数值比较都为 false。

相等判断

相等：==、!= 这个是重头戏，但其实内容也不难，对于什么是引用值，如果不清楚可以查看我写的另外一篇文章：JS 变量存储？栈 & 堆？NONONO!。变量引用的地址值内数据即为引用值。

其偏向性的判断如下：

1. null 与 undefined 互相相等，但与其他类型都不等。
2. 如果操作符两侧的数据为同种类型，那么比较两侧数据的引用值。
3. 转换为数值进行比较。

可参考以下例子：

// 类型一致，其实不需要验证
'a' == 'b'          // false
1 == 2              // false
true == false       // false

// 对象比较
let a = {};
let b = a;
a == {}             // false    引用值不一致
a == b              // true     引用值一致
// ...

// null 与 undefined
null == undefined   // true
null == 0           // false
undefined == 0      // false
null == false       // false
undefined == false  // false
undefined == 'a'    // false

// 不同类型
'1' == 1            // true
// => Number('1') == 1              => 1 == 1       => true
'a' == 1            // false
// => Number('a') == 1              => NaN == 1     => false
'a' == NaN          // false
// => Number('a') == NaN            => NaN == NaN   => false
// 这个例子可以看出 NaN != NaN 是有实际意义存在的。
'0' == false        // true
// => Number('0') == Number(false)  => 0 == 0       => true
'0' == null         // true

附上基础类型转换规则表，以及转换后最终的值

对象转换

上述内容讨论了 JavaScript 中基础类型之间的转换规则，及如何进行转换，那么现在思考一下，对象是如何与基础值进行操作的？请先思考下以下代码的执行结果。

let demo1 = {};
`${demo1}`
demo1 + ''
demo1 + 1
!demo1

let demo2 = {
    toString(){
        return 'demo2';
    },
    valueOf(){
        return 2;
    }
}
`${demo2}`
demo2 + ''
demo2 + 1
!demo2

let demo3 = {};
Object.setPrototypeOf(demo3, null);
`${demo3}`
demo3 + ''
demo3 + 1
!demo3

请先确保心中大致有个答案哦，不妨用记事本记下你的答案，接下来公布转换的规则：

1. 如果操作符的偏向性为布尔值，那么直接转换为 true。
2. 如果操作符仅有字符的偏向性，比如：``，调用对象下的 toString 方法，如果没有该方法会报错。
3. 其他情况一律调用 valueOf 方法，如果没有该方法会报错。
4. 根据上诉获得的基础类型的数据，进行基础类型转换，获得结果。

那以上 12 个的最终结果确定过程及结果如下：

`${demo1}`  => `${demo1.toString()}`    => `${"[object Object]"}`   => "[object Object]"
demo1 + ''  => demo1.valueOf() + ''     => "[object Object]" + ''   => "[object Object]"
demo1 + 1   => demo1.valueOf() + 1      => "[object Object]" + 1    => "[object Object]1"
!demo1      => !true                    => false

`${demo2}`  => `${demo2.toString()}`    => `${"demo2"}`             => "demo2"
demo2 + ''  => demo2.valueOf() + ''     => 2 + ''                   => "2"
demo2 + 1   => demo2.valueOf() + 1      => 2 + 1                    => 3
!demo2      => !true                    => false

`${demo3}`  => `${demo3.toString()}`    => 没有 toString 方法，报错
demo3 + ''  => demo3.valueOf() + ''     => 没有 valueOf 方法，报错
demo3 + 1   => demo3.valueOf() + 1      => 没有 valueOf 方法，报错
!demo3      => !true                    => false

因此对象是先转换成基础类型，在进行后续操作，其关键方法为 toString、valueOf，至于空对象为什么有 toString、valueOf 方法，在设置了 setPrototypeOf(xxx, null) 后这两方法就没有了，请查看JavaScript 对象 & 原型。

当我以为得到真理时，一个判断的结果却让我大呼惊讶：

'a' > []        // true

这个判断返回了 true！，根据前面说的：字符串与非字符串比较时，其返回的结果永远是 false 吗？这点已经通过了验证，不会错。问题就出在这个 [] 上，这个 [] 被转换成了什么？

首先可以确定：[] 被转换成了字符。但这又和对象的转换规则相冲了，比较运算的偏向性为数值和字符，为什么调用了 toString 而不是 valueOf 呢？
为了确定这个问题，我把 Array 原型下的 toString 和 valueOf 稍加了修改：

let valueOf = Array.prototype.valueOf;
Array.prototype.valueOf = function(...args){
    console.log('触发 valueOf');
    return valueOf.apply(this, args);
}
let toString = Array.prototype.toString;
Array.prototype.toString = function(...args){
    console.log('触发 toString');
    return toString.apply(this, args);
}
'a' > []
// 触发 valueOf
// 触发 toString
// true

没错，我劫持了 valueOf 和 toString 方法，然后执行一遍大呼过瘾，在转换类型时，数组确实先执行了 valueOf 而后有执行了 toString 方法。那么为什么转换过程中会同时执行这两个方法呢？会不会和 valueOf 返回值有关？

[].valueOf()
// []
[].toString()
// ""

[] valueOf 方法的返回值就是它本身，一个空数组，这显然不是一个基础类型，而 toString 返回空字符串，是个基础类型。那这时候我又想到一个问题：如果转换的结果始终得不到基础类型，会发生什么？会报错吗？

let demo = {
    toString() {
        return {}
    },
    valueOf() {
        return {}
    }
}
demo > 1
// Uncaught TypeError: Cannot convert object to primitive value

果不其然，成功的报错了，这也给了我一个启示：为了保证 JavaScript 能稳定的运行下去，toString 方法必须要遵从语义，返回一个字符串。

最后根据以上内容，将对象进行运算操作时，处理步骤更新如下

1. 如果操作符的偏向性为布尔值，那么直接转换为 true。
2. 如果操作符仅有字符的偏向性，比如：``，调用的 toString 方法，没有该方法或是该方法未返回基础类型，则调用 valueOf，如果没有 valueOf 方法或是 valueOf 方法未返回基础类型，就会报错。
3. 其他情况一律调用 valueOf 方法，没有该方法或是该方法没用返回基础类型，则调用 toString 如果没用 toString 方法或是 toString 方法没用返回基础类型，就会报错。
4. 根据上诉过程获得的基础类型的数据，进行基础类型转换，获得结果。

小练习

请判断出以下内容的结果：

// == 操作
!'0' == '0'
!''  == 1
''   == 0
!'a' == 0
![]  == []
![]  == 0
[]   == 0
!![] == [1]
!''  == [1]
''   == !'a'
!''  == ''
null == []
null == ![]
null == false
null == true

// 比较操作
'a'  > null
null > 'a'
'1'  > null
'a'  > []

参考

• JavaScript 中的相等性判断

扩展阅读

为 falsy 的对象！

在相等判断中：null 与 undefined 互相相等，但与其他类型都不等。
在对象转换规则中：如果操作符的偏向性为布尔值，那么直接转换为 true。

这两条不完全正确。

在浏览器的实现中，有一类对象：document.all，它是可以与 null 或 undefined 相等的，并且这一类对象代表的是 false。

null == document.all            // true
undefined == document.all       // true
!document.all                   // true

但这无关痛痒，仅为了文章的正确性，在这里提一下，知不知道都无所谓，开发时用不太到。但，如果有面试官提了这个问题，就让他谈谈这个的具体用处，评论给我，我也想了解了解，或者你反问：JavaScript 中代表 false 都有哪些值，如果他忘了 document.all 就狠狠的嘲笑一番。

ps：document.all 已经在 HTML5 标准中被移除了，因此这个认知就变得更不重要了。

逻辑运算

有较真的网友可能发现，其实对于逻辑运算符（&&、||）的描述，其实也是有不对之处。比如以下代码：

let a = true && 0 && 1;
let b = false || 1;

a 的值为 0 ，b 的值为 1 并不是布尔值。这涉及到 JavaScript 的求值问题，可以理解为：在 JavaScript 中逻辑运算按照优先级运算，并由前往后一步一步进行求值（有可能不会进行到最后一步），如果需要进行下一步判断，则将当前步的数据转为布尔值进行运算，如果不需要进行下一步，则返回当前步的值。参考以下例子：

0 && 1 && 'a'               // 0
1 && 1 && 'a'               // 'a'
1 && 1 && 0                 // 0
0 || 0 || 'a' || 'b'        // 'a'
0 || 0 && 'a' || 'b'        // 'b' && 操作符的优先级高于 || 操作符

如果你能真确理解并得出结果，那应该是没问题了。

最后的最后

该系列所有问题由 minimo 提出，爱你哟~~~

“你说你们人类烦不烦！前几天就一直在打开这个网页，今天又打开了！这个网页啊！” 说着 javascript 老大 拍了拍自己的脑袋，叹道：“哎，这个网页的 javascript 执行任务，我实在是不想接了！这样子下去，我的头发可不保咯！”

“哎！算了！谁让我不是浏览器的老大呢，干活，干活！” javascript 老大拿起一旁的的 javascript 语法解释器，将 html 解析器 送过来的 javascript 文本解释并执行了起来。

不一会，空荡荡的变量大厅开始有了声响，声音逐渐变的嘈杂起来，甚至传出了吵闹声！

执行大厅的大屏幕上也充斥着当前执行大厅各种各样的信息。

焦急

“叮铃 ~ 叮铃 ~ 叮铃 ~ ” 一旁的电话突然响了起来，js 老大顺手按下了免提。

“怎么这么慢啊！这都过去好几秒了！我这边还等着解析 html 呢！” 电话一头穿来了 html 解析器 焦急的声音。

“别介啊，你也不是不知道，这个网页前几天就打开过，里面 js 代码那个差哟，还有一个固定时间的 while 死循环，你说能快到哪里去！上面还有个注释，说什么加钱优化体验用！真是个黑心网站。” js 老大 拿起一旁的毛巾，擦了擦额头上的汗水，刚从循环出来的他，还阵阵发晕。

“行吧！原来又是那个网站，我还以为你业务能力下降了。” html 解析器 释然道。

“怎么可能，这不快了嘛！就好了。”

“行，那你先忙！快点哦 ~” 说完，html 解析器 挂掉了电话。

“啊，真是累死我了！” 说着，js 老大 伸了个懒腰，背部的骨头啪啪作响，“我的老腰！”

伸完懒腰，js 老大 放下手中的工具，拿起电话，拨通了 html 解析器 的电话，“我这边可以了，你继续吧。”

短暂的等待

放下电话，js 老大 走到一旁的咖啡机前，按下按钮，出来一杯香浓的卡布奇诺，抿了一口，提了提神。

“这个网页，可折腾死我了！哎 ~” 说着，js 老大 放下手中的咖啡，朝着 事件大厅 走去。

“你这有事件进来吗？” js 老大 向这儿管事的小弟问道。

“还没有呢！” 小弟往里瞧了瞧 事件大厅，说道。

js 老大 走进 事件大厅，整个大厅为 1 : 2 的长方形，共分为两部分，左右两个正方形各占一半，两边方形区域中间都有栏杆分隔，像是旅游景点前的过道，弯弯曲曲，但只有一个队列。左边方形正中上面挂着 宏任务 三个大字，右边则挂着 微任务 三个大字。右边的地板，明显比左边的要破了不少，仿佛经历过不少的踩踏。

“看来 html 解析器 也被折腾的够呛啊！这要是平常页面，事件早就过来了！这儿早就排起了长队了！”

“什么网页啊，我刚看老大你也在工作台前待了好久呢！”

“哎 ...” 看事件还没过来，js 老大 和小弟闲谈了起来。

“请问这里是 事件大厅 吗？” 正当 js 老大 和小弟闲聊间，走过来了个事件，头上顶着一个大大的 DOMContentLoaded 标志。

“是的，过来登记一下！姓名，来源。” 一看有事件来临，小弟立马回到了工作状态。

“你好，我是 DOMContentLoaded 事件，刚刚被 html 解析器 派过来”

“好的，老大这就是第一个事件，领走吧。”

“嗯，有空再谈哈 ~”

“好嘞！” 小弟嘴上说着，但心里却想着：“怕是没有时间咯，每次都这样，在说了，还是这个网页...” 小弟仿佛想到了等下事件大厅人满为患的样子，提了提自己的精神状态。

“不过刚来这事件，娇滴滴的，长滴是相当的不错啊！是哪位函数有福了呢 ~” 小弟笑了笑。

另一半！

“来，跟我走吧。” js 老大 对刚来的事件对象说道。

“嗯，我们去哪呢？” 事件对象疑惑道。

“变量大厅 啊！寻找你的另一半！” js 老大 老大一脸的兴奋。

“组织上还包分配？” 事件对象来了劲，笑脸上出现了浅浅的酒窝。

“那说不准哦，先去 变量大厅 看看吧。！” 说话间，他俩已经来到了 变量大厅。

“喂喂喂，大家静静，请 DOMContentLoaded 事件，也就是我旁边这位的另一半出来！” js 老大 走到看台上，对着话筒说道。

“我！我！我！” 变量大厅的某个角落里，发出了激动的喊声，只见那片区域中有序的坐在好多个函数，他们既不在老生区，也不再新生区，而是一块特殊的空间。

“那你出来跟我走吧！” js 老大 放下手中的话筒，上来了个帅小伙，一看老大身旁的事件妹子，眼睛转不动，脚也迈不开了。

“瞧瞧你这出息！” js 老大 拍了拍函数的肩膀，说道：“走吧，去我那！”

执行

说话间，三人来到 js 老大 的 执行大厅。

“躺着吧，让我唤醒你真正的力量！” 老大对进来的函数说道。

“我真正的力量？” 函数疑惑的问道，半信半疑的躺在了工作台上。

“开始咯！” 说着 js 老大 按下了工作台上的按钮，工作台上函数的眼中射出两道光芒，投在了工作台上的白幕上。

“这就是你保存的需要执行的代码了，你自己瞧瞧？”

见工作台没有声响， js 老大 排了排自己的脑袋：“忘了，忘了，你这会不能说话！哈哈！那你自己感受下吧。”

“DOMContentLoaded 过来吧，他的执行还需要你的帮助呢！你就呆我旁边，需要我就会喊你。”

“...” 一旁的 事件对象 明显被眼前的发生的事情吓的不轻。

“嘿，别发呆啦！” js 老大 在事件对象面前挥了挥手。

“哦，哦，老大你说。”

“等下需要你配合！”

“哦，哦，好的。您尽管吩咐。”

吩咐完， js 老大 拿起了工作台上的工具，开始执行起了白幕上的内容。

“把你的 target 属性给我。” js 老大 向着 DOMContentLoaded 说道。

“嗯嗯，好的，是 document 对象，我去变量大厅喊他过来。”

“嗯嗯，快去吧！”

...

过了没多久，js 老大 放下手中的工具，长舒一口气，“DOMContentLoaded 感觉咋样！”

“有点儿累！”

说着老大按了下工作台上的另一个按钮，函数瞬间坐了起来，喊道：“刚刚我的眼睛，放光了！你们看见了吗？放光诶！”

...

“怎么了，你们？怎么不说话？”

js 老大 与事件对象相视一笑，没说话。

“行了，我还有事，你们回 变量大厅 聊？我也需要去 变量大厅 清理内存了，一起走吧。”

微任务

不一会，js 老大 来到了事件大厅， DOMContentLoaded 事件对象和函数也回到了对应的位置。

又一轮的点名清变量开始，一波清理完成后，js 老大 赶忙跑到了 事件大厅。

“刚刚的函数执行有产生微任务吗？” js 老大 边问着管事小弟，边瞧向了变量大厅的右边，发现排了不少队。

“这么多！”

“对啊！” 管事小弟刚说着，一个暴躁的声音响起：“还要等多久啊！老娘我可等了好久了！”

“这是？” js 老大 问向管事小弟。

“load 事件呀！今天 load 事件的心情可不太好，不知道为什么？” 小弟在老大耳旁轻声道。

“稍等哈，我需要先把微任务队列给执行咯。”

“那还不赶紧的！我听说今天又没人要我？我这爆脾气！”

“好好好，我抓紧！” 老大赶忙领了个微任务走向了 变量大厅。

“这个任务是谁的，认领一下！”

“我的！我的！” 函数区又出来一个函数。

“走吧！” 老大带着函数再次走向执行大厅。过了一会，清理了变量后，再次走向事件大厅。

如此循环往复，右侧的长队，终于慢慢变短，直到微任务队列被清的一干二净。

反复横跳

“来下个事件！” js 老大 喊道。

“我！” 迎面走来了刚刚那个暴躁的事件对象，头上顶着 load。

“哎，你等等，我让你出去了你在出去呀，脾气这么大！” 事件大厅里的管事小弟跑了出来。

“老大，这是个暴脾气，我...” 小弟进一步解释道。

“没事，跟我走吧！” js 老大 对 load 事件说道。

不一会，js 老大 带着 load 来到了变量大厅，喊道：“load 的另一半，出来！”

大厅里，安静了一会，又熙熙攘攘起来。

“没听见吗？我的另一半！赶紧的出来！” load 见没函数站出来，又喊了一句。

... 依然没变量回应。

“那你，就待这吧，我还赶着去取下个事件！” js 老大 对 load 说道。

“行，那我可要一个个的去看看，老娘凶点怎么了！怕什么呢！一个个的。”

“应该是真没有...” js 老大 看着这暴脾气的妹子，也不敢大声说了，说完就又立马跑到了 事件大厅。

由于 load 并没有对应的函数，事件大厅 右侧并没有新的微任务加入。

“来下一个！” js 老大 对事件大厅的管事小弟说道。

不一会，js 老大 领着两个函数，走出了事件大厅。

又一会，js 老大 清理了变量大厅。

再一会，js 老大 一个个的执行了微任务，事件大厅右侧的任务队列再次清空。

“来下一个！” js 老大 对事件大厅的管事小弟说道。

...

整个 js 大厅，只见一个忙碌的身影在 事件大厅，执行大厅，变量大厅之间反复横跳，仿佛一个无限循环的莫比乌斯环，永远没有尽头，而 js 老大 化身一个忍者，高速的运转着。

复读机

终于 事件大厅 的宏任务队列没有了新的事件对象进入，看来屏幕外的主人看起了下一个页面。

拿起工作台上那杯已经不是很烫的咖啡，js 老大 喝下了一大口，看了看屏幕前那人浏览的页面，不禁感叹道：“看！人类的本质就是复读机！每天都开这几个网页，干着同样的事情，每天都被拘束在 3 点一线的生活里，真是无趣！”

“哎！但是谁又不是复读机呢？” js 老大 长叹一口气，走向事件大厅。

“来下一个！” js 老大 对 事件大厅 的管事小弟说道。

“没有啦，老大！”

“那我就在你这等吧，我眯一会，有事件来了就喊我！”

“得嘞！”

相关阅读

• 你是什么垃圾？
• 浏览器的杂七杂八

“警告！警告！警告！” JavaScript 执行大厅传出了刺耳的警告声。

“报告：内存即将溢出，请及时清理无效的内存占用，释放资源！” 伴随着阵阵的警告铃声，大厅正中的大屏幕上显示出了警告信息。

“什么情况？这页面才打开了一会会，内存的消耗就这么大？这都已经去了好几次了！” JavaScript 主线程，也就是 JavaScript 执行大厅的老大疑惑的说道：“看来又得去变量大厅瞧瞧了！”

说着，JavaScript 主线程放下了手头的工作，赶忙往 变量大厅 走去。

变量大厅

“挤死了，你过去点！” 还未到 变量大厅 的 JavaScript 老大远远就听到了这骂骂咧咧的声音。

“不行啊，那边已经挤满了变量！”

“挤一挤啊，我这半只脚还在外面呢！”

“什么！你在说一遍！太吵了听不清！”

JavaScript 老大发现事情即将恶化，要是在不及时清理的话，这些变量就要反了，下意识的 JavaScript 主线程跑了起来。

不一会，JavaScript 主线程终于跑到了变量大厅，跑到了大厅前的看台，环顾看了一下。

整个大厅被分为了 3 个区域，两块 16MB 的区域（新生区），其中标着 FROM 的区域挤满了变量，标着 TO 的区域空空如也，还有一块占地极大的区域（1.4G 老生区），也快被挤满了。

“行了，都别吵了！” JavaScript 老大大声喊道：“我来回收内存了！”

“赶紧赶紧，我后面还有变量要进来。” 刚刚那半只脚还在大厅外的变量说道。

点名

“全局对象，你给我出来！” JavaScript 老大喊道。

“在这，在这！” 老生区 中传出了急切的声音：“您可算来了，我都快被挤死了，这次可要把我在的 老生区 也给清理清理！”

“就你最胖，你占的空间最多！” 老生区 中的其他变量嘟囔着。

“谁让我是老大！没我，你们都不可能在这活着！”

“行了！行了！赶紧上来看看吧，这里已经快被挤爆了，你们 老生区 的内存也快挤满了！”

“行！交给我吧！” 说着，全局对象 从兜里掏出了一包指针，说道：“接下来我开始点名，叫到的就继续报你存的变量引用！现在开始！”

“对象 OA！” 全局对象喊道。

“在这！” 兴奋的喊道从 老生区 中传出：“那我也开始了！你先等我报完哈。”

“那么你开始吧！” 全局对象说道。

“变量 VA！”

“到！我是基础类型，没有对别的变量的引用！OA 你继续吧！”

“嗯！函数 FA！” 全局对象继续喊道。

“到！那么现在我开始报我所保存的变量的引用！对象 OA 你等等！”

“嗯！你开始吧！”

“...”

过了一会，全局对象 终于开始了第二个报名。

“...”

又过了好一会，全局对象 终于也报完了名。

“行，现在大家都知道自己有没有被点到名了，接下来交给我吧，你回去吧。” JavaScript 老大对 全局对象 说道。

你是什么垃圾？

说着 JavaScript 老大走到了 新生区，这里挤着满满的新生变量，看着一个个陌生的面孔，JavaScript 老大走到第一个变量面前。

“说吧！你是什么垃圾？”

“垃圾？我不是垃圾啊！”

“你被点到名了？”

“没有。”

“那你就是垃圾！待这吧。” 说着 JavaScript 老大走到了下一个变量面前。

“你呢？是什么垃圾？”

“我应该是可回收的！” 说着这个变量做了个鬼脸。

“看来你知道了自己的命运啊，待这吧！” JavaScript 老大继续往后走。

“你呢？”

“我不是垃圾哦，我可被点到名了！”

“看把你得意的！去 TO 那边吧！” JavaScript 老大指了指另一块 新生区 TO。

“好嘞 ~” 说着，变量蹦蹦跳跳的跑了过去。

JavaScript 老大继续往后走着···

“终于结束了，好了，现在还在这 FROM 中的变量自己乖点，给我消失！”

咻的一下，FROM 所指向的新生代区，瞬间清空，整个变量大厅瞬间空旷了不少。

看着空空的 FROM，JavaScript 老大拿起放在空区前面的 FROM 标志，与 TO 标志换了换，满意的点了点头。

老生代

“老大老大，老生代这边也清清呗！” 全局变量喊道。

“这就来！”

转眼间，JavaScript 老大来到了 老生区 的第一个位置，看了一眼 全局变量。

“你懂的！我不是垃圾，我要是垃圾的话，那在坐的可都是垃圾了！” 全局变量 不慌不忙的说道。

“就你厉害，你还不是我生成的！”

“但谁让我是你第一个生成呢！” 全局变量 得意的说道。

“看把你骄傲的！行，我去看下一个了。” 说着 JavaScript 老大走向了下一个变量。

“你呢？” JavaScript 老大问道。

“我是 Object 对象，直接隶属于 全局对象。”

“呦呵，一个个的，骄傲的啊。”

... 终于全局对象的嫡系都确认完。

“你是什么垃圾？” JavaScript 老大知道酱油时间已经过去，提了提神。

“我可被点到了两次名！” 说完该变量骄傲的抬起了头。

“看把你牛皮的。”

“你呢？” JavaScript 老大对下一个变量问道。

“我是垃圾。” 变量委屈的低下了头。

“自己消失还是我帮你一把？”

“我自己消失，不需要您动手。” 说话间，该变量所在的位置瞬间空了出来。

“呦呵！占用不少空间啊！”

...

JavaScript 老大继续往下走着，一个个变量所在的空间空了出来。

“你们这 老生区 空间还够，我就不进行碎片整理了哈，等下次来我在来整理整理，我那边还忙着呢。” JavaScript 老大说着走出了 变量大厅。

“好勒！您慢走 ~” 全局变量 说道。

再次来访

过了一会，处在执行大厅的 JavaScript 老大放下手中的工作，瞧了大厅内的监视面板，内存使用量再次达到了阈值，趁还没发出警告，再次动身走向了 变量大厅。

“哟！老大，您又来啦 ~” 全局对象 看到 JavaScript 老大走到看台，赶忙迎了上去。

“行，你来了，报名吧 ~”

“得嘞 ~”

报名声此起彼伏，这次比上一次经历的时间明显短了不少。

“行，你回去吧，接下来交给我。” 说着 JavaScript 老大向 FROM 走去。

“看你上次也在这啊，这次被点到名了吗？” JavaScript 老大对第一个变量问道。

“那必须的，这次也点到了！”

“ OK 那你去 老生区 找个合适的位置待着吧。”

“好的！” 刚晋升到 老生区 的变量一脸得意的向那个宽敞的 老生区 走去。

“上次没见过你，说吧，你是什么垃圾？”

“我....”

“行了，我知道了，你就待这吧！”

... 相似的过程再一次上演，不过在后续问话的过程中，JavaScript 老大发现了一个问题：TO 的空间已经使用 25% 了。

“不能再往 TO 里面塞变量啦，不然等下新建的变量就没地方待了！” JavaScript 老大心想道。

“你是垃圾吗？” JavaScript 老大对下一个变量说道。

“我不是垃圾，我被点到名了！”

“emmm... 那你去老生代的空间去吧！” JavaScript 老大想了想说道。

“真的？” 被问话的变量眼神亮了起来。

“行了，去吧，服从安排！”

... 之后，所有被点到名的新变量都被 JavaScript 老大安排在了 老生区。

碎片整理

在过完了 新生区 的变量后，JavaScript 老大走向了 老生区，相似的过程再一次上演。

“老大老大，整理一下空间！” 全局变量 还记着之前 JavaScript 老大说的话。

“那这次就给你们整理整理吧！由于之前的变量被清了不少后，你们都不坐一起了，赶紧的看前面有空位置就往前坐！”

“得嘞！” 老生区 的变量们开始了熙熙攘攘的移动，不一会，就坐的整整齐齐。

“好了，整理也整理了，那我走了哈 ~”

“得嘞，您慢走 ~~”

消逝

伴随着，屏幕上那个小三角箭头点向该页面的叉叉，JavaScript 主线程放下了手中的工作，熙熙攘攘的变量大厅也瞬间安静了下来，大家面部凝重，不一会就消逝了。

一阵风吹过，吹起了点点尘埃。

相关阅读

• 浏览器的杂七杂八

“咚咚咚” 浏览器老大的门被敲响了三次，“谁啊！”

“我！” TCP 喊道，“还有我！” HTTP 随后接道。

“进来吧，都有什么事啊？” 说着，浏览器老大放下了手头的工作。

“你来说吧！毕竟是你想到的。” TCP 对 HTTP 说道。

“那我就不客气了！老大，还记得之前提的让请求变快的方式吗？”

“当然，首先是缓存，然后是长连接，接着你们自己还定了个 pipelining 对吧？怎么啦？难不成又有新发现！” 浏览器老大两眼开始放光。

“emmm 那个 pipelining 不是很好用。不过确实，我们有新发现！这几天，我和 TCP 仔仔细细的研究了下发现还可以提升，这不是过来和你讨论讨论！” HTTP 显得有点兴奋。

回忆

故事开始在一周前。

“TCP 你提的这个 pipelining 想法是美好的，但局限性太大了啊，就没有方法通用化一点吗？” HTTP 惋惜的说道。

“哎，还不是因为要把响应按你的请求顺序给你，导致服务器那边也得按顺序来返回给我结果！这就导致了前面卡住，后面的全卡住了！”

“我也没办法呀，请求是一个个过来的，我总得一个个的对应啊，就只能让他们排队啦！”

“哎，其实我也想到了，你也是没办法。” TCP 叹了口气，接着说道：“你说说，我一个数据交换中心，为什么要管顺序的问题呢？要是只管数据交换就好了，这个 pipelining 就是因为 顺序 才不好用，你想要是服务器不用管请求的顺序，直接把数据给我然后我在给你，不快的飞起吗？”

“但是，顺序很重要！” HTTP 一脸的无奈，突然间他灵光一下：“顺序！对！顺序！哈哈哈！你干嘛要管顺序呢！交给别人来管不就好了！来来来，TCP 你听我说！”

“嗯哼？我不管顺序？别人？你吗？你不是得按顺序给吗，但我不想要顺序！”

“你听我说嘛！” HTTP 兴奋的说道：“如果有人专门管理请求和响应的顺序不就好了！”

“你仔细说说。” TCP 来了兴趣。

“如果你想提升速度，顺序首先要抹杀掉对吧！”

“对，必须的！如果仅让我发送和接收数据是最好的！”

“好，假定你要怎么干，那你的上层应该是直接给你数据，然后你从服务器获取数据后，直接给你的上层对吧！”

“是啊，但我的上层不是你吗？你的 HTTP 报文是要顺序的发呀！” TCP 一脸的疑惑

“顺序只是一个概念啊！我问你，顺序是否也可以这么理解：乱序的数据排序后，就是有序的？”

“经你这么一说，确实啊！顺序是一个虚伪的概念，假定服务器把响应全给了到这边，有人帮你排好，在交给你！而我这边就只管数据的发送和接收，就能利用数据通道边发边接的能力！这样我就只管数据交互了！” TCP 开始兴奋起来，但突然间又想到了什么，说道：“不对！不对！那这样要等响应都结束了才能给到你，不更慢了吗？”

“你是不是傻？干嘛非要等响应都结束呢！既然知道排序规则，那第一个响应是那个总应该知道吧！第一个响应结束了直接给我不就好了！如果说第一个请求的响应没好，而其他请求的响应已接收完毕，那把那些资源缓存起来不就好了，反正等第一个响应给我后，我还是会用到那些资源！” HTTP 得意的说道。

“哦！对哦，这个想法实在是太妙了！那谁来处理这个排序呢？”

“这个啊，我不是很想做诶！” HTTP 看向了别处，明显不想干这个脏活。

“我也不想啊，这个实现好不容易让我只关注数据的交互，我也不来干！” TCP 反抗道：“在说了，要实现这个我还得去通知我服务器的哥们，让他也这么干才行。我可忙不过来！”

“要不，让老大新开个部门？专门处理，专人专事嘛！”

“嘿嘿，不错的想法！”

SPDY 的诞生

“老大！这就是我们想要的新部门！我们管它叫顺序层！” TCP 说道。

“呦吼！最新你们两表现的很耀眼啊！简直是浏览器界的两个新星！” 浏览器老大瞬间被他们的想法所折服：“说吧，你们想怎么干！我来协调。”

“首先，我要保证我的形式不变！” HTTP 抢先说道：“我还是把我的请求顺序的给我的下一层，也就是这个新层，其他的我就不管了！”

“老大，我也想提点要求！” TCP 在一旁举手示意。

“嗯，你说！”

“能不能直接给我二进制的数据流啊，既然要加，那就直接给我二进制流吧，我处理起来快！”

“那这层就相当于一个容器咯，HTTP 你往这个容器里直接扔数据，然后由容器将处理好的请求交给 TCP ，TCP 获取响应后直接丢给容器，容器内部自己组合成响应，然后在按顺序给 HTTP 是吧？” 浏览器老大想了想，接着说道：“顺序 层显得不那么专业，既然 TCP 想要通过二进制流与该容器进行沟通，这层那就叫 二进制分帧层 吧！那既然要成立这个新部门，不如现在我们仨继续畅想畅想，这个层还能干什么？”

三人陷入了沉思，不一会，HTTP 举手了。

“如果说，二进制分帧层建立了，那服务器那边应该需要实现一套与之相对应的操作，对吧？” HTTP 问道。

“当然！” TCP 说道：“因为和现有的形式完全不一样！”

“那既然双方都有对应的结构，并且 TCP 通道是长连接的话，那一些重复性的数据是不是就可以不传了？”

“恩，让我想想！” TCP 陷入了沉思。

“这样，你举个例子！” 浏览器老大在一旁说道。

“就比如说 user-agent cookie 这些请求头，因为如果是对同一域名进行请求的话，这些基本上是一样的！既然第一次给了，第二次最好不给，这些请求头有时候比请求体还要大，去掉的话，可以节省不少的网络流量！”

“对！这些请求附带的信息目前一直都会重复的被发送！” TCP 说道：“如果现在有了这层的话，这些状态完全可以保存在那里，然后两边同步状态！如果有变更，直接在通过我发一次专门修改请求头的数据就好了！但是如果要是实现同步的话，这个报文头得专门单独出来处理，通过一些算法让两边的状态保持同步。”

“那我总结总结，这个场景主要是处理报文头的对吧，解决的问题是报文头的重复发送，解决方式是双方维护相同的状态信息，如果不给则是使用之前的状态，如果给了就相当与更改某个状态！对吧！这个值得专门处理，这样吧，我们可以把报文头和报文提分开来发送，给 TCP 的数据可以分为头帧和数据帧。”

“bingo ~ 老大总结的就是不一样。”

浏览器老大呵呵一笑，对 TCP 说道：“你看看他这样子，你呢，有什么想法？”

“老大，你说，有二进制分帧层的话，服务器推送是不是可以实现了啊！由于之前我给 HTTP 的数据要和他给我顺序必须要一致，因此也不能存储其他的数据资源，现在有这个二进制分帧层让他直接存下来就行啦！”

“我靠，我怎么没想到！” HTTP 明显是被这个想法给惊到了。

“服务器推送，你仔细说说！” 浏览器老大看向了 TCP。

“在通道建立之后，服务器就可以推送给我数据啦，什么数据我不管啦，我都把数据给二进制分帧层就好啦！”

“别说的这么简单。举个例子！”

“就比如：用户打开了网页，这不是会产生一个 HTTP 请求嘛！我这边就会与服务器开启 TCP 数据通道，之后服务器开始返回对应的网页数据，这时，服务器其实知道后续还会有什么请求，比如说页面内的 javascript 资源，那这时候服务器直接把 javascript 资源发给我，毕竟通道还在嘛！然后存储在二进制分帧层，接下来 HTTP 会发起对该 javascript 资源的请求，二进制分帧层接到请求后，其实他早就已经开始接收 javascript 的数据，那么响应就会变快了不少，数据通道也能被充分的利用！”

“嗯，不错啊，你看看人家，这可是质的飞越啊，当然你的想法也很好！” 浏览器老大对 HTTP 说道。

SPDY

“那行，我来总结总结，你们想新开一个部门的主意，我同意了！但这个东西涉及的东西有点多，先在我们内部实现下，还有服务器那边，还需要你们去沟通一下！这部门主要实现以下几点：”

1. 管理请求以及响应，HTTP 这边现有的方式不变，请求的顺序以及响应的封装由该部门内部实现。
2. 将 HTTP 请求分为头帧与数据帧，同时将对应的字节流给 TCP。
3. 保存同一域名下的报文头状态（包括请求头和响应头），同步服务器的状态信息。
4. 保存由服务器主动推送过来的资源，当 HTTP 请求当命中该资源时，直接返回。

“以上四点，你俩看看，是不是你们需要的？”

“嗯！” TCP 与 HTTP 同时说道。

“这一整套实现，总归得有个名字，部门叫二进制分帧层，这一整套实现我们叫他 SPDY 吧，由于涉及的比较多，我们自己内部先试用试用！”

“嗯嗯，好的！”

“还呆着干嘛呢？去看看新部门？”

“这么快你就建好了？”

“当然，谁让我是这儿的老大呢？心之所想，事之所至！但服务端的 TCP 和 HTTP 那儿，需要你们赶紧去沟通沟通哦！还有 TCP ，这项算是实验功能，你要确保你能继续使用之前的形式处理请求哦 ~”

“那当然，必须的！” TCP 自信满满的说道。

实验

“怎么样啦，我这边已经安排好啦！” 浏览器老大晃悠到 HTTP 的手术室说道。

“都没问题啦！” TCP 回答道：“刚刚我们一起已经把计划通知到服务器那边了，现在在等他们回电话！”

“哦哦，那我也来一起等吧，二进制分帧层里我已经派了几个人过去了。” 浏览器老大晃悠到 TCP 与 HTTP 身边。

“苍茫的天涯的是我的爱！” 电话铃声突然想起，HTTP 尴尬的接起了电话。

“老大，HTTP 这品味有点高啊，这彩铃！牛皮！哈哈哈！” TCP 大笑道。

“喂，HTTP 吗？我们这边已经弄好了，赶紧发个请求试试！” 电话里传来了兴奋的女声。

“呦呵！HTTP 你这小子！High 啊！” TCP 小声道：“快说！什么时候勾搭上的？”

“嘘，被她听到你可要挨揍了！她是个技术狂，ps：爱好跆拳道！在 HTTP 学院可是出了名的！” HTTP 小声对 TCP 说道。

“赶紧的，磨磨蹭蹭干嘛！HTTP 赶紧的！” 电话里声音变的急躁起来。

“好的好的，那我就请求下这个网页（https://blog.acohome.cn）吧。说着就把一个 HTTP 报文给丢进了一旁的通道中。”

“我已经帮你的通道接到二进制分帧层了，过去看看？” 浏览器老大说道：“看看是不是符合你们的预期！”

说话间，三人来到新建的部门，门上写着 BF（Binary Framing） 两个大字，只见房间很大，隔了很多个小间，突然间其中一个小间突然蹦出了刚刚 HTTP 丢到通道中的报文。

只见其中一人略带生疏的操作了起来：拿起请求头，放进了一旁的机器，不一会出来了一段二进制流。

“你们看，这里他把请求头单独处理，那台机器就实现同步服务器报文头算法的关键，我已经和服务器那边商量过了，那边有相同的实现，出来的就是二进制流，会直接丢给 TCP，当然这台机器还对数据进行了一定的压缩。”

浏览器老大说着，里面的操作员把二进制流丢进了另一个通道中，浏览器老大接着解释道：“这个是 GET 请求，所以没有请求体，如果有请求体的话，他还会把数据处理成二进制流接着给 TCP。我们接着去看看 TCP 那边吧！”

“这里就由我来说吧！” TCP 抢过了话题，说道：“我们这里呢就比较简单了，不管他给什么，我直接发给服务器。你看那个实习生，开始工作了，三次握手，发送数据，做的不错！”

“嗯，但关键不是这个哦，等一等！” TCP 神秘的一笑。

“你们看，数据来了，按照之前说的，我这边只要把响应给二进制分帧层就 OK 了！”

“我靠，一下子来这么多响应啊！” HTTP 张大了嘴巴：“一个网页应该不需要这么多数据啊！”

“嘿嘿！你忘了我之前提的服务器推送！这些都是服务器推送过来的。” TCP 兴奋的说道：“接下来我们去看二进制分帧层吧！”

说话间，三人再次来到了二进制分帧层外。

“你看，他在组合响应，就是有点生疏。” 浏览器老大解释道，不一会 https://blog.acohome.cn 的响应被拼了出来，往一侧的通道内一扔。

“去 HTTP 哪儿吧！” 浏览器老大兴奋的说道。

“等等呀，你们看他，还在拼数据？” HTTP 有点困惑。

“等下你就知道了！先去你那儿吧！” TCP 一脸的得意。

“我那有什么好看的，无非就把响应给老大你啊！” HTTP 还是想看看屋内的人在干嘛。

“行啦，测试要紧，等下你就知道啦！” 浏览器老大说道，拎着 HTTP 走向了他的手术室。

“呐，这个就是响应的网页，老大你来解析下吧！”

“请求 jquery.js 和 main.css 吧，网页解析器要用！” 浏览器老大叫来了网页解析器一顿解析。

“好嘞，发起请求！” HTTP 说着，就把请求发了出去：“我们去看看那屋，我想看看他到底在拼什么！”

“嘿嘿！” TCP 神秘的一笑，却不为所动。

“走啊，你们怎么不走！”

“你看，你的响应已经到了！”

“不可能，我才刚发出去！”

“不信你看。” TCP 往通道努了努嘴。

HTTP 扭头往通道看去，果然，两个大大的包裹已经出现。HTTP 惊的张大了嘴巴：“怎么可能！什么情况？”

“就知道刚刚在说服务器推送的时候你没仔细听！刚刚服务器一直在发送这些数据给我们，因为他们知道我们迟早会有这些请求，他就提前推了过来！”

“哦哦！服务器推送，好东西啊！我就说呢，明明网页都给我了，他怎么还在拼数据，原来是在拼之后的请求啊！厉害了！ TCP 牛皮！”

“低调低调！”

“好了，完整性测试通过！SPDY 实现成功！” 浏览器老大兴奋的挥了挥手。

羡慕

午夜降临，各个浏览器开始闲了下来，这不一天一次的浏览器总结大会展开了。

“Chrome 这就是你的不好了啊！” FireFox 在一旁冷冷的说道：“好东西怎么能私藏呢？”

“什么嘛！我私藏什么了？” Chrome 说道。

“我们那的 HTTP 听他服务器的哥们说了，你们那有个叫 SPDY 的东西，请求快的飞起啊！”

“哦，那个啊，这是文档，给你吧，我也没想私藏，只是试验一下可行性！这不是带来推广了嘛？”

“真的？”

“真的！但这东西需要和服务器端配合，如果说服务端没实现 SPDY 的话，那我们实现了也白搭。”

“那我们至少可以支持嘛！”

“是的，这也是我把协议具体实现带过来的原因，大家有个统一的标准服务器实现起来也简单，就能更快的推广了！”

“嗯，不错不错！” FireFox 开心的竖起来大拇指。

HTTP 2.0

“老大！老大！” HTTP 跑到了浏览器老大的办公室。

“怎么了，慌慌张张的？”

“我想把 SPDY 这一整套体系提到 HTTP 2.0 标准里！这样就算是一个公认的标准了！推广那简直是轻而易举。”

“我是没有意见，你问问 TCP 毕竟这也有他的功劳！”

“我已经问啦，他没意见呢！如果这东西能成为标准，让大家都实现的话，他也是很期待的呢！”

“行，那你提吧！”

不久后 HTTP 2.0 大会正式展开，SPDY 得到大家的充分认可，HTTP 2.0 版本充分沿用了 SPDY 的设计，世界正在向 HTTP 2.0 过渡。互联网 2.0 时代即将来临。

相关阅读

• HTTP 的手术室
• 缓存 - 一个奇妙的想法
• 要强的 TCP

“又到了一月一次的总结大会，大家说说最近工作上出现的问题吧。” 浏览器老大坐在圆桌最前端，说道：“好意见赶紧提，吐槽也可以说。”

“我！我！我！” TCP 喊道。

“嗯，你说。”

“上次你们优化请求，怎么没叫上我呢？对于请求速度优化我也有点想法！” TCP 说道。

“上次啊，我其实也就是到 HTTP 那儿抱怨了一句，主要还是 HTTP 和他服务器的朋友一起弄好的。” 浏览器老大看了 HTTP 一眼，眼中满是得意，转头看向 TCP 说道：“说说你的想法吧。”

“上次你们弄缓存时，我也仔细的查看了一下通过我发送的报文，总结出来一个规律。” 说着 TCP 拿出了事先准备好的一张图，并投到了圆桌对面的屏幕上。

“大家请看，这是用户打开 https://blog.acohome.cn 时，通过我发送的一系类请求，我按域名进行了分类。” 说着 TCP 站了起来，走到屏幕前，指了指，屏幕上有如下一个表格

“大家请看，该页面内的资源来自 4 个服务器，却有 42 个请求。老大，目前我们实现 TCP 通道的策略是针对单个 HTTP 报文的，换句话说，就是每个 HTTP 请求，都会开启一个 TCP 通道，对吧？”

“嗯，没错。因为 HTTP 是无状态的。” 浏览器老大陷入了沉思，貌似知道了 TCP 所要阐述的内容了。

“一个 TCP 数据通道的建立和释放，需要进行三次握手和四次挥手。针对于上面的情况，需要进行 42 次这样的过程，但是这其中有很多次是发生在同一个客户端和服务端的。比如我需要与 blog.acohome.cn 所在的服务器进行 33 次相同数据通道的建立与释放，这会照成极大的资源浪费。以至于我在服务器的哥们对我有了不少的抱怨！”

“那说说你的解决方案吧！” 浏览器老大意识到了问题的严重性，确实这一块有较大的资源浪费。

长连接

“解决的方案其实简单，我不把数据通道销毁就好了，也就是长连接，针对相同域名，我每个单独建立一个通道，当然在请求多的情况下可以建多个。” TCP 自信满满的说道。

“嗯！不错的想法” 浏览器老大闭眼思考了一会，说道：“但是不能泛泛而谈，也有可能会出现需要及时释放的情况。这块容我想想该怎么实现！”

“嗯，确实会有特殊情况发生，需要好好考虑下。” TCP 也思考了一下。

“这样吧，我仔细想想！然后给你一个解决方案。” 说着浏览器老大站起身，说道：“那今天的会议先到这！”

keep-alive

大概过了 500ms 的样子，浏览器老大来到 TCP 的办公室。

“你提的确实是个好想法，但是是否保持数据通道不该由你来定，应该由上层的调用者来确定，就是 HTTP，我顺便把他也叫过来了，你们商量商量。” 说着 HTTP 穿着白大褂走了进来。

“刚刚我听了，很不错的想法。老大，TCP 说的没错，我们这儿的请求基本上都是需要长连接的。要不就都这么处理吧！” HTTP 转向浏览器老大说道。

“不不不，你忘了上次我们主动加缓存出的问题了吗？如果开发者不需要长连接就麻烦了，这里不能写死！你接触开发者，所以在你的报文里加个特殊的字段吧，标志这个请求所在的域名是否需要长连接，然后把这个设置开放给开发者吧！” 浏览器老大想起了前几天定死缓存时发生的事情，慎重的说道。

“确实哈，那就和之前加缓存头一样？” HTTP 略微有点尴尬。

“对，字段就叫 Connection 吧，如果是 keep-alive 就是长连，如果是 close 就不长连，默认是长连，这样 OK 吧？”

“没问题！” TCP 和 HTTP 同时说道。

“那我顺便把这个字段提到 HTTP 1.1 规范中吧，刚好规范大会最近要开。” HTTP 补充道。

“嗯，让大家都用上也好 ~” 浏览器老大得意的说道，边说，边走了出去。

哎呦，不错哦

“TCP 牛啤啊！” 说着 HTTP 搂上了 TCP 的肩膀。

“那当然，风头不能都让你占了啊！”

“长连是好想法，但是请求的顺序不能乱哦，我给你一个报文，你要返给我一个，不然我可不知道怎么对应的！”

“哎 ~” TCP 叹了口气。

“怎么了？不能保证？” HTTP 显的有点慌乱。

“不是啊，我是能保证，但需要你一个一个给。”

“对啊，现在就是这样啊！你叹什么气？”

“其实吧，我有更好的方案，要不你了解了解？”

“真的？还有更好的？” HTTP 有点兴奋的说道。

管道化

“是有啊，但是和我服务的哥们讨论下来，实际的可行性可能有点问题。” TCP 面露尴尬。

“试试嘛，没准能行呢？”

“那我先说说实现原理哈。”

“嗯，你说！”

“首先，你直接把请求按顺序的给我，不需要等我给你的响应，直接把所有的请求按顺序给我就好，然后我把请求按顺序给到服务端，服务端在按顺序返回给我！” 说着 TCP 拿起纸笔画了起来。

“你看哈，最左边是现有的方式，中间是加了 keep-alive 的实现，右边呢是我刚提到的想法，我把最后这种实现叫做管道化，你看看。”

“管道化，有意思！牛皮啊！你给解释解释呗！我看你画的有点复杂。” HTTP 皱起了眉头。

“你把请求一开始就按顺序给我，由于通道是双向的，在建立连接后，我就可以边发送数据边接收数据，也就是说在第一个请求发出去后，我就可以开始接收第一个请求的数据了，也就是图中响应和请求出现交叉的地方。”

“原来你还有同时发送和接收的能力啊！确实，如果能实现的话，是够快的，那么问题在哪？”

“如果考虑到网络状况的话，问题就出现了！你想想如果说我刚发完所有的请求，第一个响应也收到了，但通道由于网络的原因，奔溃了！会发生什么情况？”

“按照正常处理就行啊，重建通道，再次发生！”

“问题就出在这！那第一个请求的响应怎么办？如果这个请求是 POST 请求，不就发了两次吗？要是这次多余的 POST 请求出了状况，那责任谁担？”

“emmmm”

“还有就是即使网络状况好，就像刚刚画的，由于你给的请求是顺序的来，然后我顺序的发出去，那响应就是固定的顺序了，如果说第一个请求的响应服务器需要处理很长的时间，那后面的请求不也顺带着变慢了！”

“emmmm”

“还不如我另开一个 TCP 通道来的快！”

“emmmm”

“所以这个其实仅在特定的条件下，才会有效果，不然还不如不用！并且管道化单方面支持还不行，必须要和我服务器的哥们一起才行！”

“经你这么一说，确实啊，实际使用情况有限。兄弟，其实在设计缓存那一块时，我发现了一个真理！”

“什么真理？”

“把权限交给开发者！”

“什么意思？”

“我们这边其实并不能真正了解开发者的意图，因此能做的也有限，但如果你把是否使用管道化的权限交给开发者，在开发者确认能使用的情况下，就使用，这样就能在一个安全稳定的环境下，对性能进行提升了！”

“对哦，既然这个并不能针对到所有的情况，那么交给页面开发者就好了！真是个好想法！”

“还有你并不能直接接触开发者，那还是由我来给你吧。我把你的想法一并提到 HTTP 1.1 规范中，够意思吧！”

“好兄弟！”

算了，关了吧！

屏幕外：

“听说 HTTP 1.1 这次增加了一个叫管道化的技术，你了解过吗？”

“嗯，听说过，但网上对这个技术褒贬不一啊，并不能解决真正实际的问题。”

“怎么开呢？我想试试！”

“Chrome 下有个设置，你打开就行，你看在这！”

“嗯，打开了！”

“后端收到请求确实快了，一下子来这么多？？？？”

“你有对你的服务器做过相关优化吗？”

“没有啊！”

“那还不如不开，你多试几次，看看是不是真的有提升？”

脚本一开，一顿操作，自动化测了 1000 次。

“emmmm 好像还不如不开...”

“...”

“算了，关了吧。”

相关阅读

• 缓存 - 一个奇妙的想法
• HTTP 的手术室
• 老司机 - TCP

这次的 why what or how 主题：JavaScript 对象 & 原型。

此类文章在百度上一搜一大把，其实不用再写了，但是本着把这个问题解释的清清楚楚明明白白，还是开始写了。

原因如下：

1. 面试宝典类文章，弄张图片一糊弄，让人觉得自己理解了。
2. 解释类文章，告诉你一堆语法，对语法一顿解释，告诉你就是这样的，还是没说清楚。
3. 很少有文章单独解释这个点！但这个点是基础！真的很重要！

所以本篇文章想说一说对象 & 原型，但为了确保能顺利理解，请先看完 JS 变量存储？栈 & 堆？NONONO!，因为该篇文章从变量存储的角度来解释 JavaScript 对象 & 原型，请确保看完，在看这篇文章。

什么是对象？

既然要说清楚，先问一个最最基本的问题：什么是对象？

对象一句话就能解释清楚：

对象是一系列属性 & 数据的集合。

在 JavaScript 中创建一个对象的方式有很多，常见的如下：

// 字面量直接创建
let obj1 = {foo: 'bar'};

// 通过实例化 Object 类
let obj2 = new Object({foo: 'bar'});

class A {
    constructor(foo){
        this.foo = foo;
    }
}

// 通过自定义类创建
let obj3 = new A('bar');

以上代码最终都产生了 {foo: 'bar'} 这个对象。对象下有一个叫 foo 的属性，它的值为 bar。那么它在堆中是如何存储的呢？

看过了 JS 变量存储？栈 & 堆？NONONO! 相信大家对于上图应该不陌生。

对象的取值

我们继续看一个较为复杂的对象（对象下某个属性也是一个对象）：

let complexObj = {
    num: 1,
    str: 'string',
    obj: {
        foo: 'bar',
    }
}

在内存中的模型如下：

我们模拟一下 complexObj.obj.foo 这个取值过程。

取值过程：碰到存储的值是地址值时，就到相应的地址值继续进行操作。

对象，总的来说，知识点有两点：

1. 创建对象：在内存堆中开辟一块用于存储一系列 属性 & 数据 的空间。
2. 对象取值：根据存储的数据取值，如果是地址值，则到相应内存堆中继续进行操作。

对象到这里就差不多了，那原型又是什么呢？

原型 & 原型链

原型是对象下的一个属性，每个对象都有，同时原型也是一个对象。

文本的描述总是不直观的，我们通过代码来看：

let proto = {
    foo: 'bar'
}

let obj = {
    // ...
    __proto__: proto
}

设置对象 __proto__ 属性的过程，就是给对象设置了原型，同时该属性指向一个对象。

注： 当然 ES6 已经不建议这么做了，有专门的方法（setPrototypeOf）设置原型，为了解释方便，这里用 ES5 的代码作为示例。

有人可能会有疑问：既然是赋值操作，那应该也可以给对象的原型设置为非对象，为什么原型是对象呢？关于这个问题的答案，可以用以下代码测试：

let a = {};
a.__proto__ = 1;
console.log(a.__proto__);

复制到浏览器即可看到效果，将对象的原型设置为非对象这个操作，是被禁止的，也就是说你设置了也没用。

原型的定义也很简单，那么原型是干嘛用的呢？

原型的作用

原型补充了原对象，当需要访问对象中属性，但该属性又不存在时，就会去原型上寻找。

按照上面的例子，obj.foo 返回什么？以下伪代码就是寻值的过程：

function getValue(obj, attr){
    let searchObj = obj
    while(searchObj 下不存在 attr 属性){
        searchObj = obj 的原型
    }
    return searchObj 下的 attr 属性 
}

getValue(obj, 'foo')

以下为图示过程：

根据上图（或是伪代码）我们可得知最终的结果是： bar。

那如果对象上的原型还是没有该属性呢？

在原型的定义中，提到过：原型同时也是一个对象。转换一下思路，那么这个问题就变成了：如果对象上没有该属性那会发生什么？

去对象下的原型下找！对！我们刚说完！

这种层层递进的关系我们就把它称为：原型链！

到这你可能会问：如果按照这样一直找下去，那不是无穷无尽了？这就需要引出一个特殊的对象，可以在 Chrome 的控制台打印 Object.prototype 输出的对象，你可以仔细找找，该对象有没有原型？

OH NO! 竟然有原型，你个骗子。

不要激动，继续去查看它原型是什么：null！

这和我之前说的：原型也是一个对象，有出入，因为 null 明显不是一个对象。

但是，typeof null 确实是 object，笔者也有猜想过是不是和这有关系。但猜想是猜想，为了语义的完整性，我们重新定义一下原型：

原型是对象下的一个属性，每个对象都有，同时原型是对象或是 null。

同时定义一下原型链的特点：

原型链由一个个对象组成，原型链有终点，这个终点是 null。

OK 既然原型链有了终点，那么如果一个属性在原对象和所有的原型链上都不存在的话，他的值是什么？

undefined（未定义）啊！

现在我们已经清楚原型和对象的关系，那如何设置对象的原型呢？

设置原型

其实上面已经提到过，我们可以直接设置对象的原型：

ES5 中

let proto = {
    foo: 'bar'
}

let obj = {
    // ...
    __proto__: proto
}

ES6 中

由于 __proto__ 是非标准属性，因此在 ES6 中建议使用 setPrototypeOf 设置对象的原型。

let obj = {};

let proto = {
    foo: 'bar'
}

Object.setPrototypeOf(obj, proto);

那如果一个对象还没有生成，比如仅仅定义了一个类，但又想控制通过这个类生成的对象的原型，该如何呢？

既然问了，那肯定是有的，解决方案就是函数的 prototype 属性。

prototype

我们都知道在 JavaScript 中函数也是一个对象，这个特殊对象下有一个 prototype 属性，是干嘛用的呢？

在使用 new 关键字调用该函数时，函数下的 prototype 属性所保存的对象就是生成对象的原型。

通过代码来解释：

function A(bar) {
    this.bar = bar;
}

A.prototype.test = function(){
    console.log('test');
}
A.prototype.testAttr = 'testAttr';

let a = new A('bar');

下面用伪代码来解释 new A('bar') 这个过程：

function fakeNew(A, bar){
    // 生成 this 为一个空对象。
    let this = {};
    Object.setPrototypeOf(this, A.prototype);
    
    // 执行 A 函数内的代码
    this.foo = bar;
    
    // 将 this 返回
    return this;
}

fakeNew(A, 'bar');

相信大家看完代码就能理解 prototype 这个属性的作用了，但这是 ES5 的代码，ES6 中并不建议直接写 prototype ，而直接使用 class，但其本质是一样的。复制下面代码到 Chrome 里即可查到真相：

class A {
    constructor(bar) {
        this.foo = bar;
    }
    test() {
        console.log('test');
    }
}

console.dir(A);

如上图所示，A 仍有 prototype 属性，并且定义中除了 constructor 函数，其他的函数都在 prototype 属性内。

可以认为是 ES5 function 语法糖吧，至少这里可以这么认为，但请不要认定，相比较于 ES5 function 还是有差别的，这块内容不属于本篇范畴，有机会单独写一篇讨论讨论。

对象的创建

绕了一圈，又绕了回来，现在我们回过头来看看对象的创建。

通过以上的阐述，我们知道了以下几点：

1. 对象是一些列 属性 & 数据 的集合。
2. 原型是对象下的一个属性，它的值是一个对象（或 null）。

那好，现在我在问一个问题，你用以下代码创建的对象，它的原型是什么？

let obj = {};

有点疑惑？因为它既没有主动添加原型，也不是从类创建的对象，那他的原型就没有了？

答案当然是否定的，只要你把这段代码贴到 Chrome 控制台就可以了。想要进一步知道这个对象到底哪儿来的，试试以下代码：

obj.__proto__ === Object.prototype; // true

很明显，这个新创建的对象为 Object 这个类的 prototype 属性，难不成这个 obj 是通过 Object 类创建的？

bingo ~ 你离真相又进了一步，在 JavaScript 中所有的对象都由 Object 所创建（PS：不管你用什么姿势！）。

好，对象的直接创建弄明白了，在来个间接创建的问题，请问以下代码所创建的 obj 的原型是什么？

function A (){};
let obj = new A();

当然是 A 的 prototype 啊，这还用问？那 A 的 prototype 又是什么呢？

放到 Chrome 下一看便知：

由上图可见，是一个简单的对象，最原始的 prototype 其中仅仅包含了 constructor 和 __proto__。

constructor 就是引用它自己。

A.prototype.constructor === A; // true

__proto__ 就是这个对象的原型，只要是一个对象，自然而然会有这个属性，那么这个属性的值是什么？

A.prototype.__proto__ === Object.prototype; // true

当然是 Object.prototype 啊，所有对象都由 Object 这个类所创建嘛！

小结

好了，一个简单的点，反反复复，回头一看，这么长了，原本不想写这么长的... 看来原理的东西虽说不难，但想解释清楚还是要点时间的。最后提几个问题当做是小结了吧：

1. 对象是什么？
2. 原型又是什么？
3. 对象和原型的关系是什么？
4. 原型和对象的关系又是什么？
5. 原型如何创建，它的默认值是是嘛？
6. 原型链是怎么组成的？
7. 原型链的终点是啥子？

最后，大部分文章提到了原型（链）都会提到，继承。emmmm 先放过继承吧，继承只是编程的一种方式，不是原理性的东西，下次讲吧 ~~

最后的最后

该系列所有问题由 minimo 提出，爱你哟~~~

“HTTP 你过来一下，有件事想和你商量商量！” 浏览器老大晃悠到了 HTTP 的手术室中说道。

“怎么有空过来，正忙着呢，快坐。” 说着，我放下手中的器具，抽出放在一旁的凳子。

“不了不了，我就想了解了解情况，门口还有还多 URL 等着你发送呢！” 浏览器老大叹了口气。

我一看门外，吓了一跳，门口的 URL 都已经围着我的手术室绕了一圈了。“什么情况？” 我问道。

“这个页面的 HTTP 请求有点多啊！” 浏览器又叹了口气，缓缓的说道：“你想想有什么办法能快一点？”

“这我也没有办法呀，我这只有 6 个人，要不你加点？”

“不行啊，浏览器空间太小了，操作系统老大不愿意在派人过来了，算了，你先忙，我想想办法！” 浏览器老大一脸的无奈。

协商

手术室外的 URL 慢慢的减少，大概过了 500ms 我终于放下了手中的手术刀，长舒一口气，发现了还在手术室内来回踱步的浏览器老大。

“HTTP 你有没有发现，有一些 URL 你送了好几次！” 浏览器老大若有所思道。

“我没注意诶，不过印象中是有的。” 说完，我陷入了思考。

“那你回忆回忆，他们带回来的数据，一样吗？” 浏览器老大想到了关键点。

“我想想哈！” 我陷入了回忆中，喃喃自语道：“有一个 URL 来了 3 次，确实有，结果的话，是一样的！”

“真的？那其实都没必要发啊，直接拿上一次的数据给我就行啦！” 庄严的浏览器突然兴奋的像个小孩子。

“是没错，但是...” 我刚想开口。

“没有但是！先这么试试，把之前的数据给存一存，磁盘内存空间你自己调配哈。” 一脸兴奋的浏览器突然打断我的话，跳着就出去了。

“这个老大有点精神大条啊，不行啊，这怎么行啊。” 我自言自语道：“不过想法是个好想法，就是怎么存，哪些资源需要存的问题。首先针对于数据的请求，我应该不用缓存，也就是 Content-type 里有关于 json 的那些请求。其次也不能把文件一直存着吧，要是变了咋办呢！那就先给个固定时间吧！不错，哈哈！我真是个天才！！”

屏幕外的愤怒

“我靠，这 Chrome，我每次发版都要好久才有反应，Google 上说这个是固定缓存时间！都什么嘛！还让不让程序员干活了！”

“加个时间戳吧，所有问题迎刃而解！”

“哎，也太不智能了啊，这可是 Chrome 啊！”

浏览器老大听到略带愤怒的声音 Cue 到了他，不禁一哆嗦，赶忙来到了 HTTP 的手术室！

“HTTP 你怎么搞的，现在屏幕外都抱怨起来了，我都听到大家准备用 FireFox 了！” 浏览器老大急的满头汗。

“还不是上次你说的把数据给存起来，我还优化了下，至少没有把 json 数据给存下来，要不然...” 突然间我想到了 FireFox 一脸得意的样子，也急了起来。

“怎么办！要不咱们不优化吧！” 浏览器老大说道。

“其实吧，这几天下来，我也思考了下，文件的缓存不应该由我们来决定，你想他们（屏幕外的开发者）在发布的时候会先把文件发到服务器上，如果服务器可以通知我们更新的话，那就最好不过了！”

“说的有道理，但是有一点，服务器不可能通知到我们啊，因为连接是单向的。” 突然间兴奋又失落，浏览器老大叹了口气：“看来还是不行啊！”

“不不不！这件事我要和我在服务器的哥们谈谈，老大你先别沮丧，我有个挺好的办法的，我先验证验证。如果验证通过了，那么我有信心做好！”

“哦...” 浏览器老大还在失望的情绪里，看来对我的想法不是很相信。

强缓存

拿起办公桌上的电话，转动几圈后，听筒里传来了 “嘟嘟” 声。

“喂，你个不识相的，被派到 Chrome 就了不起了？这么久才来一个电话！”

“太忙了啊！说正事，我有个想法想和你谈谈！”

“什么想法？我这也很忙啊，别说有点没的啊，老娘忙着呢！”

“这个想法一担实现，我们的工作量会减轻不少呢！” 我顿了顿接着说道：“你有没有发觉，其实有很多请求都是一样的？”

“是啊，而且有时候还挺多的！说到这，我也想问，你们客户端的 HTTP 怎么老是请求一样的东西？一直请求一直爽？”

“这个没的办法啊，用户老是刷新页面，还有有的用户每天访问的就那几个页面，这就导致了我们经常向你要同一些东西。”

“那你们缓存下来啊！别动不动就向我要！”

“我们已经开始试验了，但实验效果一直不理想，一开始我们设定的缓存时间是一天，但是页面的变动我们完全不知道！”

“是哦，这些天从你哪儿的请求确实少了不少。”

“现在浏览器老大因为缓存不更新数据这个问题，已经打算放弃缓存了！但我有个想法，可以解决这个问题，需要试一试才行！”

“什么想法，说吧，我来配合你！”

“还记得报文头吗？”

“当然，我们不就干这个的吗？”

“你可以给个资源的有效时间吗？”

“有效时间？什么意思？”

“就是资源不会发生变动的时长。”

“这个我也不知道咯！”

“让开发者设置啊，把这个权限给他们，我们约定这个有效时间放在报文头中行吧！”

“嗯，是个不错的想法，然后你们就根据这个设置，缓存对应的资源？”

“bingo ~”

“OK 那我向我这边的应用层程序开放这个设置，报文头中我给你加个 Expires 的字段，代表过期时间，你直接用就好！”

“这么贴心！谢啦！”

“好嘞！那我先去通知一下！”

屏幕外的自责

“兄弟，不好意思哈，我刚刚把这个资源设置成了明天过期 ~~ 你强刷一下试试？”

“...” 默默的按下了 CTRL + F5 “兄弟，没用...”

“啊！这个资源中间要走代理服务器...”

“那咋办？”

“加个时间戳？”

“不行啊！”

“会不会你没发成功？”

“...”

协商缓存

“喂？在吗？”

“又有什么事？老娘很忙的！”

“还记得上次我找你吗？我们加了个 Expires 的响应头？”

“嗯，怎么了，不挺好的吗？你们把锅成功摔给了我们！” 电话那头传来了愤怒的声音：“老娘真是着了你的道！这些开发者，明明自己设置了 Expires，还以为没发好，整天的往服务器上传东西，烦死了！”

“消消气 ~ 消消气 ~ 我这还有一个事呢。” 我一脸尴尬的说道：“在改版之后呢，少了不少请求，但是我们发现资源一旦过期了，我们还是得向你们要，但返回的数据我们对比了下，还是一样的！所以这里还是需要和你们配合优化一下。”

“还来！” 电话那头传来了略带愤怒的声音：“还想甩锅？”

“消消气消消气，想想这能减少好多工作量呢！这次也是加一个响应头就好 ~”

“说吧！”

“你们那边能根据资源生成一个唯一标识吗？就是资源变了这个标识也会变的那种。”

“能啊，这还不简单，根据修改时间就好了啊！”

“原来这么简单啊，确实修改时间符合这个条件，那你把这个时间给我们，我们存下来，然后请求相同资源的时候我们会把这个标识给你们，你们对比一下，如果一样就直接返回 304 我们就直接使用缓存了，行吧？是不是少了好多工作量？”

“确实！这个想法不错！能减不少的工作量。行吧，给你们加上！就叫 Last-Modified 吧，你们的请求头里的就叫 If-Modified-Since 吧，我去通知应用层程序！”

“得嘞 ~”

翻新

“喂！在吗？”

“哟，大忙人开始闲了？” 对面传来了略带嫉妒的声音。

“对啊，自从开始使用我们上次约定好的报文头，工作量巨减啊，HTTP 协议升级了，听说了吗？” 我有点小得意。

“是啊，升 1.1 了，终于能够长连了，但是效果不是很理想啊，该堵住的地方还是堵住了。” 听起来服务器那边碰到了点难事。

“不管这个，还记得 Expires 这个首部吗？”

“记得，就是过期时间嘛。”

“现在这个描述不准确，我们本地时间和你给的不太一致，我们客户端想要的其实是一个缓存的策略，比如缓存多久时间啊，如何缓存之类的，趁着协议升级，我们也改改吧。”

“嗯，不错，每次都要重新计算过期时间也是挺麻烦的，那这个就交给你们了，我这边直接设置缓存策略。就叫 Cache-Control 吧！根据你们的使用情况，来定规则，这个就交给你了。”

“嗯，好的。我们这边总结一下，等下传真给你。”

“关于缓存，还有一个事，我也要提一下。” 电话那头，语气略带抱歉。

“嗯嗯，你说。”

“其实根据修改时间来确定缓存资源不是很准确，我们这的规则是只要文件被打开了就认为是修改了，所以有误差，还有就是如果文件的修改时间小于 1 秒，那个这个值其实是不变的！”

“还有这样的问题啊，那有解决办法吗？”

“我们这可以根据文章内容生成标识符，我通过新的报文头 ETag 给你们，我们这已经准备支持了。这次准备提到新的协议规范里。”

“OK 这不错，那我们使用哪个字段给你们？”

“If-None-Match”

“好的，我记一下。”

“URL 来了，我先挂了哈 ~ 策略等下给你传真，你收一下！”

“嗯，忙去吧。”

Cache-Control

大约过了 100ms 服务端的传真机开始打印，内容如下：

失效不代表缓存清楚，仅仅代表缓存过期，如果服务器（也就是你）确认缓存有效，就使用缓存。

指令可组合使用，赋上组合使用结构图：

该图可作为开发者文档。

下图为我们这边总结的缓存命中规则，供你们参考：

相关阅读

• HTTP 的手术室

这次的 why what or how 主题：JavaScript 变量存储。

无论那门语言，变量是组成一切的基础，一个数字是一个变量，一个对象也是一个变量，在 JavaScript 中甚至连一个函数都是一个变量。

那么如此重要的变量，在 JavaScript 中究竟是如何进行存储的？

栈 & 堆 ?

栈（Stack）又名堆栈，它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。

在百度上搜索 JavaScript 变量存储，能看到很多文章，无外乎一个结论：

对于原始类型，数据本身是存在栈内，对于对象类型，在栈中存的只是一个堆内地址的引用。

但是，我突然想到一个问题：如果说原始类型存在在栈中，那么 JavaScript 中的闭包是如何实现的？

当然想要深究这个问题，有必要先把栈（Stack）和堆（Heap）给说说清楚。

那好，先说说栈。

栈

栈是内存中一块用于存储局部变量和函数参数的线性结构，遵循着先进后出的原则。数据只能顺序的入栈，顺序的出栈。当然，栈只是内存中一片连续区域一种形式化的描述，数据入栈和出栈的操作仅仅是栈指针在内存地址上的上下移动而已。如下图所示（以 C 语言为例）：

如图所示，栈指针刚开始指向内存中 0x001 的位置，接着 sum 函数开始调用，由于声明了两个变量，往栈中存放了两个数值，栈指针也对应开始移动，当 sum 函数调用结束时，仅仅是把栈指针往下移动而已，并不是真正的数据弹出，数据还在，只不过下次赋值时会被覆盖。

挺简单的不是么，但需要注明一点的是：内存中栈区的数据，在函数调用结束后，就会自动的出栈，不需要程序进行操作，操作系统会自动执行，换句话说：栈中的变量在函数调用结束后，就会消失。

因此栈的特点：轻量，不需要手动管理，函数调时创建，调用结束则消失。

堆

堆可以简单的认为是一大块内存空间，就像一个篮子，你往里面放什么都没关系，但是篮子是私人物品，操作系统并不会管你的篮子里都放了什么，也不会主动去清理你的篮子，因此在 C 语言中，堆中内容是需要程序员手动清理的，不然就会出现内存溢出的情况。

为了一定程度的解决堆的问题，一些高级语言（如 JAVA）提出了一个概念：GC，Garbage Collection，垃圾回收，用于协助程序管理内存，主动清理堆中已不被使用的数据。

既然堆是一个大大的篮子，那么在栈中存储不了的数据（比如一个对象），就会被存储在堆中，栈中就仅仅保留一个对该数据的引用（也就是该块数据的首地址）。

问题！

OK 栈和堆内容如上，现在我们再来看看大家的结论：

对于原始类型，数据本身是存在栈内，对于对象类型，在栈中存的只是一个堆内地址的引用。

感觉很符合逻辑啊，按照定义基础类型存在栈中，对象存在堆中，没毛病啊！

但是，请大家思考一个问题：

既然栈中数据在函数执行结束后就会被销毁，那么 JavaScript 中函数闭包该如何实现，先简单来个闭包：

function count () {
    let num = -1;
    return function () {
        num++;
        return num;
    }
}

let numCount = count();
numCount();
// 0
numCount();
// 1

按照结论，num 变量在调用 count 函数时创建，在 return 时从栈中弹出。

既然是这样的逻辑，那么调用 numCount 函数如何得出 0 呢？num 在函数 return 时已经在内存中被销毁了啊！

因此，在本例中 JavaScript 的基础类型并不保存在栈中，而应该保存在堆中，供 numCount 函数使用。

那么网上大家的结论就是错的了？非也！接下来谈谈我对 JavaScript 变量存储的理解。

抛开栈

既然在 JavaScript 中有闭包的问题，抛开栈（Stack），仅用堆能否实现变量存储？我们来看一个特殊的例子：

function test () {
    let num = 1;
    let string = 'string';
    let bool = true;
    let obj = {
        attr1: 1,
        attr2: 'string',
        attr3: true,
        attr4: 'other'
    }
    return function log() {
        console.log(num, string, bool, obj);
    }
}

伴随着 test 的调用，为了保证变量不被销毁，在堆中先生成一个对象就叫 Scope 吧，把变量作为 Scope 的属性给存起来。堆中的数据结构大致如下所示：

那么，这样就能解决闭包的问题了吗？

当然可以，由于 Scope 对象是存储在堆中，因此返回的 log 函数完全可以拥有 Scope 对象 的访问。下图是该段代码在 Chrome 中的执行效果：

红框部分，与上述一致，同时也反应出了之前提及的问题：例子中 JavaScript 的变量并没有存在栈中，而是在堆里，用一个特殊的对象（Scope）保存。

那么在 JavaScript 变量到底是如何进程存储的？这和变量的类型直接挂钩，接下来就谈谈在 JavaScript 中变量的类型。

三种类型

在 JavaScript 中，变量分为三种类型：

1. 局部变量
2. 被捕获变量
3. 全局变量

局部变量

局部变量很好理解：在函数中声明，且在函数返回后不会被其他作用域所使用的对象。下面代码中的 local* 都是局部变量。

function test () {
    let local1 = 1;
    var local2 = 'str';
    const local3 = true;
    let local4 = {a: 1};
    return;
}

被捕获变量

被捕获变量就是局部变量的反面：在函数中声明，但在函数返回后仍有未执行作用域（函数或是类）使用到该变量，那么该变量就是被捕获变量。下面代码中的 catch* 都是被捕获变量。

function test1 () {
    let catch1 = 1;
    var catch2 = 'str';
    const catch3 = true;
    let catch4 = {a: 1};
    return function () {
        console.log(catch1, catch2, catch3, catch4)
    }
}

function test2 () {
    let catch1 = 1;
    let catch2 = 'str';
    let catch3 = true;
    var catch4 = {a: 1};
    return class {
        constructor(){
            console.log(catch1, catch2, catch3, catch4)
        }
    }
}

console.dir(test1())
console.dir(test2())

复制代码到 Chrome 即可查看输出对象下的 [[Scopes]] 下有对应的 Scope。

全局变量

全局变量就是 global，在 浏览器上为 window 在 node 里为 global。全局变量会被默认添加到函数作用域链的最低端，也就是上述函数中 [[Scopes]] 中的最后一个。

全局变量需要特别注意一点：var 和 let/const 的区别。

var

全局的 var 变量其实仅仅是为 global 对象添加了一条属性。

var testVar = 1;

// 与下述代码一致
windows.testVar = 1;

let / const

全局的 let/const 变量不会修改 windows 对象，而是将变量的声明放在了一个特殊的对象下（与 Scope 类似）。

let testLet = 1;

console.dir(() => {})

复制到 Chrome 有以下结果：

两种方式

那么变量的类型确定了，如何进行存储呢？有两种：

1. 栈（Stack）
2. 堆（Heap）

相信看到这里，大家心里应该都清楚了：除了局部变量，其他的全都存在堆中！根据变量的数据类型，分为以下两种情况：

1. 如果是基础类型，那栈中存的是数据本身。
2. 如果是对象类型，那栈中存的是堆中对象的引用。

但这是理想情况，再问大家一个问题：JavaScript 解析器如何判断一个变量是局部变量呢？

判断出是否被内部函数引用即可！

那如果 JavaScript 解析器并没有判断呢？那就只能存在堆里！

那么你一定想问，Chrome 的 V8 能否判断出，从结果看应该是可以的。

红框内仅有变量 a，而变量 b 已经消失不见了。由于 FireFox 打印不出 [[Scopes]] 属性，因此，笔者判断不出。当然，如果有大佬能深入了解并补充的话，感激不尽。

好，了解了如何存储，接下来我们看看如何赋值。

变量赋值

其实不论变量是存在栈内，还是存在堆里（反正都是在内存里），其结构和存值方式是差不多的，都有如下的结构：

那好现在我们来看看赋值，根据 = 号右边变量的类型分为两种方式：

赋值为常量

何为常量？常量就是一声明就可以确定的值，比如 1、"string"、true、{a: 1}，都是常量，这些值一旦声明就不可改变，有些人可能会犟，对象类型的这么可能是常量，它可以改变啊，这个问题先留着，等下在解释。

假设现在有如下代码：

let foo = 1;

JavaScript 声明了一个变量 foo，且让它的值为 1，内存中就会发生如下变化

如果现在又声明了一个 bar 变量：

let bar = 2;

那么内存中就会变成这样：

现在回顾下刚刚的问题：对象类型算常量吗？

比如有以下代码：

let obj = {
    foo: 1,
    bar: 2
}

内存模型如下：

通过该图，我们就可以知道，其实 obj 指向的内存地址保存的也是一个地址值，那好，如果我们让 obj.foo = 'foo' 其实修改的是 0x1021 所在的内存区域，但 obj 指向的内存地址不会发生改变，因此，对象是常量！

赋值为变量

何为变量？在上述过程中的 foo、bar、obj，都是变量，变量代表一种引用关系，其本身的值并不确定。

那么如果我将一个变量的值赋值给另一变量，会发生什么？

let x = foo;

如上图所示，仅仅是将 x 引用到与 foo 一样的地址值而已，并不会使用新的内存空间。

OK 赋值到此为止，接下来是修改。

变量修改

与变量赋值一样，变量的修改也需要根据 = 号右边变量的类型分为两种方式：

修改为常量

foo = 'foo';

如上图所示，内存中保存了 'foo' 并将 foo 的引用地址修改为 0x0204。

修改为变量

foo = bar;

如上图所示，仅仅是将 foo 引用的地址修改了而已。

const 的工作机制

const 为 ES6 新出的变量声明的一种方式，被 const 修饰的变量不能改变。

其实对应到 JavaScript 的变量储存图中，就是变量所指向的内存地址不能发生变化。也就是那个箭头不能有改变。

比如说以下代码：

const foo = 'foo';
foo = 'bar'; // Error

如上图的关系图所示，foo 不能引用到别的地址值。

那好现在是否能解决你对下面代码的困惑：

const obj = {
    foo: 1,
    bar: 2
};
obj.foo = 2;

其 obj 所引用的地址并没有发生变化，发生变的部分为另一区域。如下图所示

对象的修改

OK 进入一个面试时极度容易问到的问题：

let obj1 = {
    foo: 'foo',
    bar: 'bar'
}

let obj2 = obj1;
let boj3 = {
    foo: 'foo',
    bar: 'bar'
}

console.log(obj1 === obj2);
console.log(obj1 === obj3);

obj2.foo = 'foofoo';

console.log(obj1.foo === 'foofoo');

请依次说出 console 的结果。

我们不讨论结果，先看看内存中的结构。

所以你现在知道答案了吗？

总结

在 JavaScript 中变量并非完完全全的存在在栈中，早起的 JavaScript 编译器甚至把所有的变量都存在一个名为闭包的对象中，JavaScript 是一门以函数为基础的语言，其中的函数变化无穷，因此使用栈并不能解决语言方面的问题，希望大家能看到，并真正的了解 JavaScript 在内存中的模型吧。

按照惯例，提几个问题：

1. JavaScript 变量的类型都有哪些？
2. JavaScript 对于基础类型和对象类型是如何存储的，

参考

• Memory : Stack vs Heap
• Variables and Memory
• Does JavaScript use stack or heap for memory allocation or both?
• StackOverflow - garbage-collection-with-node-js
• StackOverflow - How variables are allocated memory in Javascript?
• 百度百科 - 栈

最后的最后

该系列所有问题由 minimo 提出，爱你哟~~~

计算历：7e3 年 af 月 5e 日。天气：晴。在 Chrome 实习的第一天。

终于摆脱学校开始在 Chrome 实习啦，真是不错的一天，网络很好，没有丢包情况出现，现实的情况也没老师说的那么糟糕嘛。

前辈的工作台也太炫酷了吧，就是不知道在 FireFox 实习的同学怎么样，IE 那的同学，估计是手动操作吧！哈哈！！

今天用这工作台发了不少报文，工作台用起来比学校里手动操作报文快了不少，但基础不能忘，今天没什么需要记录的，就复习下 TCP 报文基础吧。

TCP，Transmission Control Protocol，传输控制协议，传输层的一个协议，其目的为：在复杂网络情况下（不可靠的 IP 协议下），提供一个可靠的字节流传输通道。

可靠意味着数据的完整，也就是，在网络连通的情况下，排除一切可能的错误，将应用层的数据完完整整的发送到对方的应用层。

那么如何排除错误，对于未到达对方的报文（包括可能已经到达但对方未返回确认的），进行不断的重发！直到对方确认收到为止。

OK 现在先过一过基础。

组成

首先，先复习下报文的组成：

一个完整的报文包含以上信息，按照顺序有如下作用：

其中选项中还有不少内容，下次主要复习这块，这里先过。

连接与释放

TCP 既然表现为一个通道，那么通道的连接与释放当然是重中之重。

三次握手。

网络是个复杂的环境，一个稳定的通道需要双方都清楚对方已经自己发送和接收的能力，这就是三次握手的由来。

第一次握手（客户端请求建立连接）：

• 客户端：虽然客户端发送了请求，但却不清楚自己是否真的将报文发送到了服务端，因此客户端并不知道自己和对方的能力。
• 服务端：服务端接收到了报文，就能知道客户端有能力发送，自己有能力接收。

第二次握手（服务端收到报文，确认连接并请求连接）：

• 客户端：若返回的报文通过验证，说明自己有能力发送服务端有能力接收，接收成功说明自己有能力接收，服务端有能力发送。
• 服务端：和第一次握手一样，服务端虽然发了报文，但却不知道报文是否能正确到达。

第三次握手（客户端收到报文，确认连接）：

• 客户端：在第二次握手过程中，客户端就已经确认双方的能力，
• 服务端：与第二次握手的客户端一样，若报文通过验证，说明自己有能力发送客户端有能力接收。

至此一个稳定的通道建立成功。

四次挥手

通道的建立需要消耗计算机资源，因此当数据传输完毕后，如何进行释放，也是重要的一环。

如何正确的关闭通道，是我们需要思考的问题。

一个通道的关闭，和开启一样，一个巴掌拍不响，需要双方都进行确认。

• 第一次挥手：客户端请求关闭连接。
• 第二次挥手：服务端确认客户端的关闭请求。
• 第三次挥手：服务端请求关闭连接。
• 第四次挥手：客户端确认服务端的关闭请求。

经过四次挥手，通道在双方都知晓的情况下销毁，而不会出现一方销毁另一方却仍存在的情况，计算机资源也可得到相应的释放。

那么为何不能像建立通道一样，只进行三次？

很简单，通道的开启是双方同时开启，而关闭却不是，当客户端关闭了通道，仅仅代表客户端不发送数据了，而服务端却可以继续发送数据，客户端仍可以接收数据。

小结

通道的开启与关闭，其实是相同的，需要 4 个步骤

1. 一端请求开启/关闭
2. 另一端确认开启/关闭
3. 另一端请求开启/关闭
4. 一端确认开启/关闭

只不过通道的开启过程中，第 2 步和第 3 步进行了合并。

OK 整理的差不多，这些是基础，也是最重要的部分，虽然前辈的工作台会帮忙做掉这些步骤，但万一机器出故障了呢，作为 TCP 学院的优等生，我要确保数据始终能到达服务端！！

对了！前辈的工作台还是有一些东西没有用到，那个大屏幕上的信息还没充分了解，不过也了解个大概了，明天在去仔细研究研究。

相关阅读

• TCP 的工作台