在window load事件中加载JS文件会影响页面加载相关性能指标吗？

1. 页面加载时间 #

页面加载时间的节点就是window.load事件触发的时刻——也就是所有核心资源（HTML、CSS、图片、关键JS等）加载完成的时间。你用window.addEventListener('load', ...)加载脚本的方式，完全不会影响页面加载时间，因为这个脚本是在load事件触发后才开始请求的，根本不会参与到页面核心资源的加载流程里。

2. Speed Index（速度指数） #

Speed Index衡量的是页面内容可视化的快慢，核心看页面从开始加载到视觉上完全呈现的进度。这种加载方式对Speed Index没有影响，因为脚本是在所有可视资源都加载渲染完成后才启动加载的，不会干扰页面的视觉渲染过程，页面的视觉加载进度不会被这个脚本拖慢。

3. Time to Interactive（可交互时间，TTI） #

TTI是页面加载完成后能快速响应用户操作的时间点，这里得分情况讨论：

• 如果你的loadScript是异步加载（比如动态创建<script>标签，默认就是异步，或者显式设置async）：脚本的加载和执行不会阻塞主线程，TTI基本不受影响——毕竟load事件触发后主线程已经空闲，只要脚本不是特别重，执行过程不会明显拖慢交互响应。
• 如果loadScript是同步加载（比如用同步XHR请求脚本再执行）：那脚本执行会占用主线程，要是脚本体积大或者逻辑复杂，就会延迟TTI，因为主线程被占着的时候，用户的点击、输入等交互没法及时响应。

关于你的实现代码 #

你的代码逻辑没问题，但要注意loadScript的实现，推荐用异步加载的写法避免阻塞主线程：

function loadScript(src) {
  const script = document.createElement('script');
  script.src = src;
  // 异步加载，不阻塞主线程执行
  script.async = true;
  document.body.appendChild(script);
}

内容的提问来源于stack exchange，提问作者dealwap