Question

您好我正在开发一个网络应用。该应用中有一个代码如下

$(document).ready(function()}{
   getNewLetterContent();
   getVideoComplition();
   getRssFeed();
   intializeEvents();
});

这些函数中的每一个都会对第三方api进行ajax调用。这些调用中的大部分都花费了很多时间来获得响应。这最终使得应用程序加载缓慢。无论我们回复的响应是什么都不多对应用程序的初始视图很重要（在折叠内容之上）。所以我在互联网上搜索了一个解决方案，我将document.ready替换为window.load，这并没有太大的区别。你们请帮忙我如何通过这次电话改善表现

Answer 1

您应该检查所有这些功能中的代码。默认情况下，JavaScript引擎具有事件循环系统，它是事件驱动的系统，它通知事件并调用所需的回调。这意味着ajax调用本身不应该减慢你的网页速度，因为它只是一小段javascript（只需要几个函数来调用和发送XHR / fetch请求）。

这些函数有可能存在一些重要的代码，这些代码是阻塞的，因此页面非常慢（如果所有这些函数都是旧的第三方库，可能就是这种情况）。

此外，完全异步代码的可能性很小。首先，有maximum concurrent requests的数量，如果你超过它们，页面将变慢（有这个问题并通过promises明确添加等待）。

另外，另一种可能性是某些函数实际加载了数据，并在页面上开始了一些繁重的操作（更改DOM，强制重新计算样式，添加动画等）。每个案例都应该进行调查，但我建议您开始查看chrome console中的network标签。

Answer 2

最简单的解决方案是在ready方法中添加超时功能，这将完成页面加载而不依赖于这些功能。

$(document).ready(function()}{
 setTimeout(function(){
   getNewLetterContent();
   getVideoComplition();
   getRssFeed();
   intializeEvents();
 },8000);
});

Ajax调用会增加网站加载时间

2 个答案: