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

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

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

preload、prefetch、preconnect 和 dns-prefetch 知多少

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

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

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

为什么要缓存

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

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

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

从异步编程说起

我们都知道 JavaScript 的代码执行的时候是跑在单线程上的，可以理解为只能按照代码的出现顺序，从上到下一行一行的执行，但是遇到了异步的行为，比如定时器（一定时间之后才去执行），那就需要等同步代码执行完成后的一段时间里再去执行异步代码。

对于同步行为，如下面的代码，我们能够很清楚的知道每一行会发生什么，这是因为后面的指令总是等到前面的指令执行完成后才去执行，所以这里的第二行里的变量 x 在内存里已经是定义过的。

1
2

let x = 10;
let y = x + 5;

在说这个插件之前，可以先去 https://bubuzou.com/ 这个网站体验下这个插件的效果，好有个大概的印象。

通过阅读这篇文章，你可以收获什么？

1. 用 JS 直接操作 DOM
2. 浏览器 BOM 相关知识
3. 性能优化思考
4. 插件设计思考

背景

平时我们在用 Markdown 写的文章，如果放到自己的博客或者投稿到掘金等平台，其内容会被浏览器解析成 HTML。而 Markdown 里面的一级（#）、二级（##）、三级标题（###）分别对应于页面的文章标题、一级目录、二级目录。基于此，就可以很好的利用该生成的页面实现一个目录，便于更直观方便的的浏览文章内容，而这就是最初我想为博客里的文章页实现一个目录功能的理由。

这个插件是基于 Hexo 生成的网页来实现的，且目前只支持一级和二级目录，因为作为一篇文章来说有两个层级已经可以很好的将一块内容划分细说得很清楚了。