Lighthouse提示”优化流程”分数低，动态加载的JS脚本还是导致阻塞渲染怎么办？

轩辕建杰提问于 2026-02-01 16:21:24 阅读 41

工具

我在React项目里用useEffect动态加载第三方统计脚本，虽然用了defer属性，但Lighthouse还是显示这个标签造成了渲染阻塞。代码是这样的：


useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://example.com/tracker.js';
  script.defer = true;
  document.head.appendChild(script);
  return () => script.remove();
}, []);

已经尝试过把script放在footer和设置async/defer，但评分里的”优化流程”还是只有20分。控制台也没报错，这个脚本到底该怎么加载才不会阻塞主线程呢？

我来解答赞 15 收藏

反馈

2 条解答

皇甫文阁 Lv1

问题在于你动态创建script元素后再设置defer，这个时机已经晚了。defer属性需要在脚本刚创建时就指定，而且对动态创建的script元素不一定有效。

最靠谱的解决办法是：别在JS里动态加载，直接在public/index.html里写死这个script标签，用defer。

打开你的public/index.html，在head标签末尾加上：

这样浏览器会在HTML解析完成后自动加载脚本，完全不阻塞渲染。

如果你确实需要动态加载（比如根据用户行为决定是否加载），可以用preload+onload的方式：

useEffect(() => {
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'script';
link.href = 'https://example.com/tracker.js';
link.onload = () => {
const script = document.createElement('script');
script.src = 'https://example.com/tracker.js';
document.body.appendChild(script);
};
document.head.appendChild(link);
}, []);

不过说实话，既然是统计脚本，放index.html里用defer是最简单的方案，官方文档也是推荐这种方式。Lighthouse现在给你20分大概率就是因为动态加载导致脚本执行时机不可控，defer没起到应有的作用。

2026-03-18 20:12

欧阳一莹 Lv1

动态加载第三方脚本确实是个常见的性能优化痛点，defer有时候并不能完全解决问题，尤其是Lighthouse这种工具对阻塞渲染的检测比较严格。这里给你一个更优雅的方案，直接通过async加载，并且把脚本放到非关键渲染路径中。

试试这样写：

useEffect(() => {

  const loadScript = async () => {

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

    script.src = 'https://example.com/tracker.js';

    script.async = true; // 使用async确保不会阻塞渲染

    script.onload = () => {

      console.log('Tracker script loaded successfully');

    };

    script.onerror = () => {

      console.error('Failed to load tracker script');

    };

    document.body.appendChild(script); // 放在body里比head更安全

  };



  loadScript();



  return () => {

    const existingScript = document.querySelector('script[src="https://example.com/tracker.js"]');

    if (existingScript) {

      existingScript.remove(); // 清理脚本

    }

  };

}, []);

这样改有几个好处：
1. 使用了async属性，确保脚本异步加载，不会阻塞HTML解析和渲染。
2. 把脚本加到document.body而不是document.head，进一步降低影响关键渲染路径的风险。
3. 加了onload和onerror事件处理，方便调试和监控加载情况。

如果还是有问题，可以考虑把脚本加载逻辑延迟到首屏渲染完成之后执行，比如用requestIdleCallback或者简单的setTimeout来推迟加载时机。这样更清晰，也能让Lighthouse满意。

2026-02-01 17:02