<返回更多

JS 的6种加载方式

2023-03-02  今日头条  前端餐厅
加入收藏

1. 正常模式

<script src="index.js"></script>

这种情况下 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>
<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 特点:

6. prefetch

<link rel="prefetch" as="script" href="index.js">

prefetch 是利用浏览器的空闲时间,加载页面将来可能用到的资源的一种机制;通常可以用于加载其他页面(非首页)所需要的资源,以便加快后续页面的打开速度

 

 

 

prefetch 特点:

总结

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>