之前写了一篇文章：jpg、gif、png和svg用于web上，我们该如何选择最合适的图像格式，介绍了这几种图片格式的特点，以及如何为网站选择合适的图片，然后评论区有位大佬让我补充下 WebP 格式，于是乎它来了。

什么是 WebP 格式

WebP 是一种现代图像格式，可为 Web 上的图像提供出色的无损和有损压缩。 使用 WebP，网站管理员和 Web 开发人员可以创建更小，更丰富的图像，从而使 Web 更快。

与 PNG 相比，WebP 无损图像的尺寸要小 26％。 在同等的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。

无损 WebP 支持透明性（也称为 Alpha 通道），而仅增加了 22％ 的字节数。 对于可以接受有损 RGB 压缩的情况，有损 WebP 还支持透明性，与 PNG 相比，文件大小通常小 3 倍。

上面这 3 段话来源于 https://developers.google.com/speed/webp

我相信你一定或多或少的接触或使用过 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']

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

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

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

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

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

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

为什么要缓存

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

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

读了李兵老师的 浏览器的工作原理与实践，让我对浏览器的工作原理有了更加深刻的理解，尤其是从用户输入 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。