我相信你一定或多或少的接触或使用过 JS 中的扩展操作符（Spread Operator），在基本形式中，扩展操作符看起来像三个点，比如如下这样：

1

[...arr]

而实际上，它也就是这么用的，但是如果事情有这么简单，就不用我在这里写了。扩展操作符给我最大的印象就是，这玩意还挺方便的，然而最近写代码的时候经常性的遇到需要使用扩展操作符的场景，所以我干脆在网上找了些资料，把平时常见的应用场景给罗列了下，发现这个操作符是真的强大，有多强大？来看看下面这些用法吧。

1. 字符串转数组

字符串转数组最普遍的做法是这样：

1
2
3

let str = 'hello'
let arr = str.split('')
console.log(arr)  // ['h', 'e', 'l', 'l', 'o']

而使用了扩展操作符后可以这样：

1
2
3

let str = 'hello'
let arr = [...str]
console.log(arr)  // ['h', 'e', 'l', 'l', 'o']

HTTP/0.9

HTTP/0.9 是于 1991 年提出的，主要用于学术交流，需求很简单——用来在网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议。整体来看，它的实现也很简单，采用了基于请求响应的模式，从客户端发出请求，服务器返回数据。

完整请求流程

• 因为 HTTP 都是基于 TCP 协议的，所以客户端先要根据 IP 地址、端口和服务器建立 TCP 连接，而建立连接的过程就是 TCP 协议三次握手的过程。
• 建立好连接之后，会发送一个 GET 请求行的信息，如 GET /index.html 用来获取 index.html。
• 服务器接收请求信息之后，读取对应的 HTML 文件，并将数据以 ASCII 字符流返回给客户端。
• HTML 文档传输完成后，断开连接。

在上篇文章 探究网页资源究竟是如何阻塞浏览器加载的 中介绍到 JS 会阻塞 DOM 的加载，样式会阻塞页面的渲染，外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验，诸如此类问题还有挺多，那到底该如何解决它们呢？

今天我们就来学习通过在 link 标签里加上特定的属性，比如 preload、prefetch 等来解决此类问题，那么你对这些属性又了解多少呢？把它们用在了你们的项目优化中了嘛？

一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。

阅读完这篇文章你将解开如下谜团：

• 如何用 Chrome 定制网络加载速度？
• 图片/视频/字体会阻塞页面加载嘛？
• CSS 是如何阻塞页面加载的？
• JS 又是如何阻塞页面加载的？
• JS 一定会阻塞 DOM 加载嘛？
• defer 和 async 是什么？又有何特点？
• 动态脚本会造成阻塞嘛？
• 阻塞是怎么和 DOMContentLoaded 与 onload 扯上关系的？

可以在浏览器的 Application 面板下看到浏览器的本地存储包含了：Cookie、sessionStorage、localStorage 和 IndexedDB。

Cookie

Cookie 是什么

Cookie 又叫 HTTP Cookie 或者叫浏览器 Cookie。Cookie 的作用是维护服务端和客户端的会话状态，简而言之就是告诉服务器当前客户端用户的一些信息，比如是否登录啥的。

浏览器缓存一直是个老生常谈的话题，也是面试官常常用来鉴别面试者的利器，作为前端来讲这块知识是属于必须掌握的，再者利用好缓存也是做性能优化的有效方法。本文将从缓存原因、缓存读写顺序，缓存位置以及缓存策略这几个角度介绍浏览器缓存，并且最后给出实践的应用举例。

为什么要缓存

很多同学知道缓存的位置和字段，知道怎么用，但是你有没有想过为什么我们的页面需要浏览器缓存呢？

• 缓存可以减少用户等待时间，提升用户体验，直接从内存或磁盘中取缓存数据肯定是比从服务器请求更快的；
• 减少网络带宽消耗：对于网站运营者和用户，带宽都代表着成本，过多的带宽消耗，都需要支付额外的费用。试想一下如果可以使用缓存，只会产生极小的网络流量，这将有效的降低运营成本。
• 降低服务器压力：给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，降低服务器的压力。

读了李兵老师的 浏览器的工作原理与实践，让我对浏览器的工作原理有了更加深刻的理解，尤其是从用户输入 URL 到页面显示这一过程发生的事情，以往看的文章都是点到为止，而他却说得面面俱到非常详细，遂我把内容总结了一下分享给大家，值得你花个 5 分钟阅读一下。

事件流

在早期 IE 和 Netscape 团队在开发第四代浏览器的时候，遇到一个问题：当点击一个按钮的时候，是应该先处理父级的事件呢？还是应该先处理按钮的事件呢？IE 和 Netscape 给出了 2 种完全相反的答案，IE 提出事件冒泡的概念，而 Netscape 则支持事件捕获。

事件冒泡

事件冒泡认为事件应该由最具体的元素开始触发，然后层层往父级传播：

同源策略（Same Origin Policy）

如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。

比如，这个 http://store.company.com/dir/page.html 和下面这些 URL 相比源的结果如下：

1
2
3
4
5

http://store.company.com/dir2/other.html         // 同源，只有路径不同
http://store.company.com/dir/inner/another.html  // 同源，只有路径不同
https://store.company.com/secure.html            // 失败，协议不同
http://news.company.com/dir/other.html           // 失败，域名不同
http://store.company.com:81/dir/etc.html         // 失败，端口不同 ( http:// 默认端口是80)

写本篇文章目的是为了夯实基础，基于阮一峰老师的著作 ECMAScript 6 入门 以及 tc39-finished-proposals 这两个知识线路总结提炼出来的重点和要点，涉及到从 ES2015 到 ES2021 的几乎所有知识，基本上都是按照一个知识点配上一段代码的形式来展示，所以篇幅较长，也正是因为篇幅过长，所以就没把 Stage 2 和 Stage 3 阶段的提案写到这里，后续 ES2021 更新了我再同步更新。

有 5 个提案已经列入 Expected Publication Year in 2021 所以本篇中暂且把他们归为 ES2021。