async和defer属性对首屏加载有什么具体影响？

Des.张豪提问于 2026-01-31 11:53:26 阅读 65

优化

我在优化网站首屏加载时发现，给第三方统计脚本加了async属性后，页面反而更卡了？

具体场景是这样的：我把统计脚本放在<head>里，加上async后，LCP从3.2秒变成4.1秒。后来试着换成defer也没改善，甚至控制台报错说找不到DOM元素。我明明在脚本里用了window.onload啊…

尝试过把脚本移到<body>底部，首屏倒是快了，但统计功能偶尔失效。查资料说async和defer都会异步加载，为啥实际效果差别这么大？

代码示例如下：


<script async src="analytics.js"></script>
<script>
  // 统计初始化代码
  document.getElementById('tracking-btn').addEventListener('click', trackEvent);
</script>

现在搞不懂是执行顺序问题还是DOM加载时机的问题，有没有更好的处理方式？

我来解答赞 5 收藏

反馈

2 条解答

UI书娟 Lv1

这个问题确实是典型的脚本加载和执行顺序问题，我来帮你捋一下。

先说结论：你的统计脚本加上 async 或 defer 后导致的问题，主要是因为脚本的执行时机变了。这两个属性虽然都是异步加载，但它们的行为差别很大。async 是加载完就执行，而 defer 是等 DOM 解析完才执行。这直接影响了你的统计代码初始化和 DOM 操作的顺序。

你提到的 LCP 变差以及控制台报错找不到 DOM 元素，其实是一个问题的两个表现。用 window.onload 并不能完全解决这个问题，因为 window.onload 是在所有资源（包括图片）都加载完后才触发，跟脚本的执行顺序没有直接关系。

具体来看你的场景：

1. 如果用 async，脚本加载完成后会立即执行，可能这时候 DOM 还没解析到 #tracking-btn，所以报错。
2. 如果用 defer，脚本会在 DOM 解析完后再执行，但如果你的统计代码依赖某些动态生成的 DOM 元素，也可能失效。
3. 把脚本放到 <body> 底部确实能解决一部分问题，但统计功能偶尔失效，说明你的脚本可能依赖某些特定的执行时机。

更好的处理方式是这样：

首先，确保你的统计脚本本身支持异步加载。如果它需要操作 DOM，建议用事件委托或者手动检查 DOM 是否存在。比如：

document.addEventListener('DOMContentLoaded', function() {

  var btn = document.getElementById('tracking-btn');

  if (btn) {

    btn.addEventListener('click', trackEvent);

  } else {

    console.error('Tracking button not found');

  }

});

其次，把统计脚本放在 <head> 中并使用 defer，确保它在 DOM 解析完成后执行。如果是第三方脚本且不支持 defer，可以考虑动态加载的方式：

(function() {

  var script = document.createElement('script');

  script.src = 'analytics.js';

  script.async = true;

  document.head.appendChild(script);

})();

最后，首屏性能优化的关键是尽量减少阻塞渲染的资源。如果统计脚本不是核心功能，可以用 requestIdleCallback 延迟加载：

if ('requestIdleCallback' in window) {

  requestIdleCallback(function() {

    var script = document.createElement('script');

    script.src = 'analytics.js';

    document.body.appendChild(script);

  });

} else {

  // 兼容低版本浏览器

  setTimeout(function() {

    var script = document.createElement('script');

    script.src = 'analytics.js';

    document.body.appendChild(script);

  }, 2000);

}

总结一下，async 和 defer 的选择要看脚本是否依赖 DOM 和执行顺序。对于非核心功能的第三方脚本，推荐动态加载或者延迟加载，既能保证首屏性能，又能避免报错。

对了，别忘了测试不同方案对首屏指标的实际影响，毕竟理论和实践有时候差距还挺大的。

2026-02-15 05:04

书生シ硕阳 Lv1

你这个问题我之前也踩过坑，别走弯路了。async和defer虽然都是异步加载脚本，但它们的行为差别很大。

1. **async的问题**：当用了async后，脚本是并行加载的，但一旦加载完成就会立刻执行，不保证加载顺序。如果脚本需要操作DOM，而此时DOM树还没构建完（比如放在里），就会找不到元素，或者导致阻塞。

2. **defer的问题**：defer会等整个HTML解析完再按顺序执行脚本。但如果脚本里用到了document.getElementById去绑定事件，而那个DOM是在脚本后面才渲染出来的，也会报错。

你的统计功能偶尔失效，就是因为这个原因。至于LCP变慢，可能是async让关键资源（如图片、CSS）延迟加载了。

### 解决方案
把统计脚本移到底部是个好办法，但这还不够。可以试试以下方法：

1. **确保脚本在DOM Ready后再运行**：
把你的初始化代码放到window.addEventListener('DOMContentLoaded', ...)里面。这样可以确保DOM已经渲染完毕。

window.addEventListener('DOMContentLoaded', function() {

     document.getElementById('tracking-btn').addEventListener('click', trackEvent);

   });

2. **使用defer而不是async**：
如果脚本必须放在里，改用defer属性，并且按照上面的方法确保DOM已加载。

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

3. **懒加载第三方脚本**：
如果统计脚本对首屏加载不重要，可以用动态插入的方式加载它，完全避开对首屏的影响。

function loadScript(src) {

     const script = document.createElement('script');

     script.src = src;

     script.async = true; // 这里可以用async，因为是动态加载

     document.body.appendChild(script);

   }



   window.addEventListener('load', function() {

     loadScript('analytics.js');

   });

这样既不会影响首屏加载，也能保证统计功能正常工作。记得千万别直接依赖window.onload，它会在所有资源（包括图片）加载完成后才触发，可能会太晚了。

2026-01-31 13:08