js异步加载、预加载资源、dns预解析

原创已于 2024-07-28 18:18:33 修改 · 5.3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#异步加载 #预加载

于 2018-11-17 11:25:04 首次发布

JavaScript 同时被 2 个专栏收录

63 篇文章

订阅专栏

性能优化

11 篇文章

订阅专栏

本文介绍JavaScript异步加载的四种方法，包括使用async、defer属性，动态创建script标签，以及XHR异步加载。同时，探讨了preload、prefetch、subresource和prerender等资源预加载技术的应用场景与实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

以上写法是平常常用的写法，浏览器遇到该 script 会立即加载（此过程会阻塞主线程）加载完后立即执行，是一个同步的过程。

有时候我们想让 script 脚本异步加载，那要怎么处理呢？

异步加载 js 文件的几种方式

方式一：在 <script> 标签中加上 defer 或 async 属性

<script src="script.js" async></script>
<script src="script.js" defer></script>

defer 和 async 机制在加载 js 脚本方面是相同的，都是异步的（相较于 HTML 解析，加载的时候不会阻塞主线程），区别在于对 js 脚本的执行时间上：

defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行（即，渲染完再执行），而且是按照 defer 脚本的声明顺序来执行脚本的。“提前加载延后执行”
async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染（下载完就执行），多个async脚本是不能保证加载顺序的。“提前加载立即执行”

如果 <script> 标签同时有 async 和 defer，浏览器会优先遵从 async 属性并忽略 defer 属性。

由于 async 和 defer 在执行时间上的差异，所以在实际开发中大部分用的是 defer。

有了 defer 以后我们可以做这样的优化：

js 脚本放在 <header> 里引入，这样js脚本的加载和dom的解析可以同时进行，提高了效率。

方式二：加载 ES6 模块

<script type="module" src="foo.js"></script>

主流浏览器可以添加 type="module" 属性，可以让浏览器异步加载 ES6 模块，效果等同于添加 defer。

<script type="module" src="foo.js"></script>
<!-- 等同于 -->
<script type="module" src="foo.js" defer></script>

当然，如有需要你也可以换成 async 属性。

<script type="module" src="foo.js" async></script>

方式三：动态创建 <`script>` 标签

动态创建的 <script> 标签，设置 src 并不会开始下载，而是要添加到文档中，JS文件才会开始下载。

function loadAsync(url) {
  let script = document.createElement('script');
  script.src = url;
  // 插入到文档中才会开始下载
  document.body.appendChild(script);
}

方式四：XHR 异步加载JS

let xhr = new XMLHttpRequest();
xhr.open("get", "js/xxx.js",true);
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        eval(xhr.responseText);
    }
}

预加载资源

preload 和 prefetch

preload 和 prefetch 可以对任何资源进行预加载，但不执行。preload 的加载优先级比较高。

preload

使用方式：

将 link 标签的 rel 属性的值设为 preload，as 属性的值为资源类型（如script、style、audio、video、font、image等）。

prefetch（常用）

兼容性：IE11

prefetch 预加载的一般是其他页面会用到的资源。

prefetch 不会像 preload 一样，在页面渲染的时候加载资源，而是利用浏览器空闲时间来加载。当进入下一页面，就可直接从 disk cache 里面取，既不影响当前页面的渲染，又提高了其他页面加载渲染的速度。

使用方式：

<!-- 对资源进行 prefetch 预加载 -->
<link rel="prefetch" href="next.css" />
<link rel="prefetch" href="next.js" />

总结：

对当前页面需要的资源，使用 preload 进行预加载。对其它页面需要的资源进行 prefetch 预加载。

async、defer 是 <script> 的专属属性。对于网页中的其他资源，可以通过 preload、prefetch 来预加载。

subresource 和 prerender

subresource

subresource 可以用来指定资源是当前页面资源的最高优先级，如果资源买上就会用到，推荐使用 subresource。

使用方式：

<link rel="subresource" href="styles.css">

prerender

prerender 是一个重量级的选项，它可以让浏览器提前加载指定页面的所有资源。

使用方式：

<link rel="prerender" href="/thenextpage.html" />

prerender 就像是在后台打开了一个隐藏的 tab，会下载所有的资源、创建DOM、渲染页面、执行js等等。如果用户进入指定的链接，隐藏的这个页面就会立马进入用户的视线。

但是要注意，一定要在十分确定用户会点击某个链接时才使用该特性，否则客户端会无端的下载很多资源和渲染这个页面。

正如任何提前动作一样，预判总是有一定风险出错。如果提前的动作是昂贵的（比如高CPU、耗电、占用带宽），就要谨慎使用了。

可以利用 Page Visibility API 来防止页面在还没真正展示给用户时就触发了 js 的执行。

dns预解析

<head>
  <link rel="dns-prefetch" href="//img.alicdn.com/" />
  <link rel="dns-prefetch" href="https://cdn.bootcss.com">
</head>

预先解析域名并把结果缓存起来。

普遍来说合理的dns prefetching能对页面性能带来50ms ~ 300ms的提升。

手动dns prefetching的代码实际上还是会增加html的代码量的，特别是域名多的情况下。
所以，最优的方案应该是：通过js初始化一个iframe异步加载一个页面，而这个页面里包含本站所有的需要手动dns prefetching的域名。

正确的使用姿势

1.对静态资源域名做手动dns prefetching。
2.对js里会发起的跳转、请求做手动dns prefetching。
3.不用对超链接做手动dns prefetching，因为chrome会自动做dns prefetching。
4.对重定向跳转的新域名做手动dns prefetching，比如：页面上有个A域名的链接，但访问A会重定向到B域名的链接，这么在当前页对B域名做手动dns prefetching是有意义的。