• script标签 async和defer
• DOMContenloaded和onload的区别
• escape、encodeURI和encodeURIComponent

async 和 defer 的区别

首先看这两个东西的共同点，他们都是script上设置异步加载JS模块的选项。

一般以

<script src="xxxxx" async>
<script src="xxx" defer>

这样的形式出现

首先需要知道，script脚本是会阻塞DOM的加载的，也就是说，我们访问网站时加载的xxx.html文件是不断的在下载，并且解析的。（其实是下载完成之后才能解析）

async，加载和渲染后续文档元素的过程将和 JS文件加载与执行并行，也就是说，这个脚本的加载和HTML的解析是可以同时发生的，不会发生阻塞，但是如果该脚本解析完成之后，HTML还没有解析完，浏览器就会暂停解析HTML，先执行（单独）脚本，执行完之后再进行解析。但是，如果是HTML解析完了，那么一样的，总之就是，async不阻塞HTML的解析，但是它加载完后一定要立即执行，如果没在解析HTML就没所谓，如果正在解析HTML的话，那么就需要去暂停解析HTML。

补充： async脚本的执行要在window的load事件之前执行

defer，同样也是异步，但是解析完成后，要在所有元素解析完成之后，DOMContentLoaded事件触发之前，才可以被 执行 。并且如果有多个defer的JS脚本，也是按标签放置顺序来执行

如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行。

load 与 DOMContentLoaded的区别

前面的async和defer都提到了这两个东西，这里也正好看看他们俩的区别。

• load

MDN的解释：load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。

意思是页面的html、css、js、图片等资源都已经 全 加载完之后才会触发 load 事件。

• DOMContentLoaded

MDN的解释：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

意思是HTML下载、解析完毕之后就触发。

可以看出，DCL一般在load之后触发，因为DCL需要等待 同步JS代码 的执行，也就是说，JS的事件循环中，DOMContentLoaded其实是在微任务和宏任务之前的.

经过试验发现，如果是两个JS文件，那么DCL会在第二个JS脚本执行同步代码之后再执行，因为每一个script标签都是一个宏任务，所以就算在两个文件中写入不同的宏微任务，也可以

这是defer后的情况，如果脚本是同步的话，那么DCL将会最早执行

在 body 中第一个 script 资源下载完成之前，浏览器会进行首次渲染，将该 script 标签前面的 DOM 树和 CSSOM 合并成一棵 Render 树，渲染到页面中。这是页面从白屏到首次渲染的时间节点，比较关键。

DOM 构建是自上而下进行构建的，会受到 js 执行的干扰。

CSS 构建：将文档中的所有 css 资源合并。

escape、encodeURI和encodeURIComponent

其实最主要的是后面两个方法，前面一个没什么实际场景

编码URL，使用encodeURI，编码URL中的参数时，用encodeURIComponent，为啥，若参数类似一个链接，用这个办法可以解决 斜杆被编码的问题