那种情况下 JS 会阻塞 dom 衬着，阅读器必需期待 index.js 加载和施行完成后才气去做其它工作
2. async 形式<script async src="index.js"></script>async 形式下，它的加载是异步的，JS 不会阻塞 DOM 的衬着，async 加载是无挨次的，当它加载完毕，JS 会立即施行 利用场景：若该 JS 资本与 DOM 元素没有依赖关系，也不会产生其他资本所需要的数据时，能够利用async 形式，好比埋点统计
3. defer 形式<script defer src="index.js"></script>defer 形式下，JS 的加载也是异步的，defer 资本会在 DOMContentLoaded 施行之前，而且 defer 是有挨次的加载若是有多个设置了 defer 的 script 标签存在，则会根据引入的前后挨次施行，即使是后面的 script 资本先返回 所以 defer 能够用来控造 JS 文件的施行挨次，好比 element-ui.js 和 vue.js，因为 element-ui.js 依赖于 vue，所以必需先引入 vue.js，再引入 element-ui.js<script defer src="vue.js"></script><script defer src="element-ui.js"></script>复造代码defer 利用场景：一般情况下都能够利用 defer，出格是需要控造资本加载挨次时
4. module 形式<script tyPE="module">import { a } from './a.js'</script>复造代码在支流的现代阅读器中，script 标签的属性能够加上 type="module"，阅读器会对其内部的 import 引用倡议 HTTP 恳求，获取模块内容。那时 script 的行为会像是 defer 一样，在后台下载，而且期待 DOM 解析 Vite 就是操纵阅读器撑持原生的 es module 模块，开发时跳过打包的过程，提拔编译效率
5. PReload<link rel="preload" as="script" href="index.js">link 标签的 preload 属性：用于提早加载一些需要的依赖，那些资本会优先加载（如下图红框）
vue2 项目打包生成的 index.html 文件，会主动给首页所需要的资本，全数添加 preload，实现关键资本的提早加载
preload 特点：
preload 加载的资本是在阅读器衬着机造之前停止处置的，而且不会阻塞 onload 事务；preload 加载的 JS 脚本其加载和施行的过程是别离的，即 preload 会预加载响应的脚本代码，待到需要时自行挪用；6. prefetch<link rel="prefetch" as="script" href="index.js">prefetch 是操纵阅读器的空闲时间，加载页面未来可能用到的资本的一种机造；凡是能够用于加载其他页面（非首页）所需要的资本，以便加快后续页面的翻开速度
prefetch 特点：
pretch 加载的资本能够获取非当前页面所需要的资本，而且将其放入缓存至少5分钟（无论资本能否能够缓存）当页面跳转时，未完成的 prefetch 恳求不会被中断总结async、defer 是 script 标签的专属属性，关于网页中的其他资本，能够通过 link 的 preload、prefetch 属性来预加载现在现代框架已经将 preload、prefetch 添加到打包流程中了，通过灵敏的设置装备摆设，去利用那些预加载功用，同时我们也能够审时度势地向 script 标签添加 async、defer 属性去向理资本，如许能够显著提拔性能
发表评论