浏览器在资源加载间隙出现无操作耗时？是否因onload触发延迟？

首先你的观察完全准确——这种看似"无操作"的耗时，确实和window.onload事件的触发机制直接相关。

先搞懂window.onload的触发时机 #

window.onload是页面加载生命周期里最靠后的事件之一：它必须等待页面中所有资源（包括图片、样式表、字体、子框架等所有外部依赖）完全加载完成，并且DOM和CSSOM都完成构建、渲染树生成并完成首次绘制后，才会被触发。

哪怕你的页面只有几行HTML骨架、没有任何额外资源，浏览器依然要走完整个页面加载的标准流程：

• 解析HTML，构建DOM树（这一步在你的场景里极快）
• 触发DOMContentLoaded事件（DOM构建完成就触发，无需等待资源加载）
• 进入"等待所有资源加载完成"的阶段——哪怕没有资源，浏览器也要完成一系列收尾检查（比如确认没有遗漏的资源请求、验证页面加载状态），才会触发window.onload

这段从DOM构建完成到onload触发的间隔，就是你看到的"大量无操作耗时"。

怎么优化这个等待时间？ #

如果你的目标只是尽早加载jQuery，完全没必要等到window.onload。改用DOMContentLoaded事件会更合适——它的触发时机远早于onload，只要DOM树构建完成就会触发，不用等待任何外部资源加载。

修改后的代码示例：

function downloadJSAtOnload(){
  var b = document.getElementsByTagName('body')[0];
  var s = document.createElement("script");
  s.async = true;
  s.src = "jquery.min.js"
  b.appendChild(s);
}
if (window.addEventListener){
  // 用DOMContentLoaded替代load事件
  window.addEventListener('DOMContentLoaded', downloadJSAtOnload, false);
}else if (window.attachEvent){
  // 兼容IE8及更早版本
  window.attachEvent('onreadystatechange', function(){
    if(document.readyState === 'complete') downloadJSAtOnload();
  });
}else{
  document.onreadystatechange = function(){
    if(document.readyState === 'complete') downloadJSAtOnload();
  };
}

另外，你已经给脚本加上了s.async = true，这意味着脚本下载过程不会阻塞页面渲染，结合更早的触发时机，就能大幅减少你观察到的"无操作"等待时间。

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