XHR 请求后 window.onload 会触发吗答案

【问题标题】：Will window.onload fire after XHR requestXHR 请求后 window.onload 会触发吗
【发布时间】：2021-04-24 05:49:32
【问题描述】：

我的用例是在获取后端 API 后加载第三方库。这样这将有助于我们优化网站性能。

目前我在window.onload触发时加载第三方库。

所以我搜索window.onload 何时触发，我发现很少有人说“window.onload 在整个页面加载时触发，包括所有依赖资源，例如样式表和图像”。这里没看懂依赖资源是什么？ XHR 请求是否也属于依赖资源？

如果window.onload 在 XHR 请求之前触发，我该如何加载第三方库？

【问题讨论】：

它只表示 HTML 中的所有元素，例如 <link rel="stylesheet"> 它不会等待任何使用 XHR 动态加载的内容。
execute third party-librares 下是什么意思？将它们包含在<script> 标签中？

标签： javascript dom dom-events

【解决方案1】：

不，XHR 不是依赖资源。它的解析不会导致load 被触发。

如果您想在请求完成后调用外部库或其他一些操作，请将调用放入请求的回调中：

function reqListener () {
  console.log(this.responseText);
}

const r = new XMLHttpRequest();
r.addEventListener("load", () => {
  console.log('request done');
  console.log('call libraries here');
});
r.open("GET", "https://jsonplaceholder.typicode.com/users");
r.send();

如果您想先提出多个请求，我建议使用fetch 和Promise.all 等待所有请求都先完成：

const makeReq = url => fetch(url).then(res => res.json());
Promise.all([
  makeReq('https://jsonplaceholder.typicode.com/users/1'),
  makeReq('https://jsonplaceholder.typicode.com/users/2'),
])
  .then(() => {
    console.log('requests done');
    console.log('call libraries here');
  });
  // .catch(handleErrors);

【讨论】：