为啥与完全没有 JavaScript 相比，通过 AJAX 的 GET 请求替换 div 会导致我的网站变慢这么多？

Posted 2023-02-21

【中文标题】为啥与完全没有 JavaScript 相比，通过 AJAX 的 GET 请求替换 div 会导致我的网站变慢这么多？

【英文标题】：Why would replacing a div via a GET request through AJAX cause my website to slow down so much compared to no JavaScript at all?为什么与完全没有 JavaScript 相比，通过 AJAX 的 GET 请求替换 div 会导致我的网站变慢这么多？

【发布时间】：2021-03-20 10:12:53

【问题描述】：

所以我使用 AJAX 的全部原因是为了让页面更改看起来更流畅。但是我意识到使用 AJAX 实际上会显着降低网站速度。我正在使用 localhost 和 apache。我在后端运行 php 来访问各种页面的数据库。

加载一个页面最多需要 5 秒。

这是一些 AJAX：

$(function() 
    $(".menu_nav").click(function() 
        $.ajax(
            type: "GET",
            url: "menu.php",
            dataType: 'html',
            success: function(data) 
                var toInsert = $(data).filter(".placeholder");
                var style = $(data).filter("#style");
                $("#style").replaceWith(style);
                $(".placeholder").replaceWith(toInsert);
                window.scrollTo(0,0);
            
        );
    );
);

'menu_nav' 和 'home_nav' 都是附有点击事件的 div，并且在点击时它们正在向服务器执行 GET 请求并在 .php 中请求一个 div 以及它的样式表。然后它将用从 GET 请求中检索到的内容替换此页面上的 div 和样式表。我无法理解的地方是为什么执行 GET 请求最多需要 5 秒，而没有任何 javascript，我的加载时间很短，只是不那么“漂亮”？

我查看了 Web 检查器中的时间线和网络选项卡，并注意到每次执行其中一个请求时，我都会从服务器获得一个新文件，而不是读取我已经获得的文件，这这是有道理的，因为自上次访问以来页面中可能有新数据，但是当我不使用 AJAX 时，我没有看到将重复数据添加到源列表中。例如：

而没有 AJAX，只有一个。这是有道理的，因为我正在向服务器发起 GET 请求，但是当您单击没有 AJAX 的链接时也会发生同样的情况。

无论如何，我仍然不明白是什么让它变得如此缓慢而不是不使用 JavaScript。我知道除了 GET 请求之外它还有更多功能，但在响应后过滤和替换文本真的是导致此问题的原因吗？

附带问题：这超出了这个问题的范围，但是关于 AJAX，当我向服务器执行请求时，文件中的 PHP 在给我 HTML 之前是否仍在执行？那么在用户必须有一定权限的页面上，捕获到的PHP还会运行吗？

编辑：我通过免费订阅云托管服务来托管 mysql 数据库。当我通过本地主机访问我的网站时，以及通过免费云托管服务访问以这种方式部署的网站时，都会出现此问题，尽管使用云服务时速度较慢。我还使用了 MAMP 中的各种资源（MacOS Apache、MySQL、PHP；如果您在 Windows 上并且感兴趣，WAMP 也可以免费获得）安装。

【问题讨论】：

看起来是数据库问题

@quantumPuter 我相信你是对的。

我注意到有人对我的问题投了反对票！我知道我的问题可能有缺陷。如果您/有人可以让我知道如何改进我的问题，我将不胜感激！我最近收到了一些反对票，我想弄清楚我可以做得更好！

您发布了很多带有标签日志的代码。这意味着很多人可能不得不查看您的代码才发现对您或他们没有任何奖励。尝试更好地查明问题。

@quantumPuter 说得通，谢谢。我将尝试为未来的读者缩短它。

【参考方案1】：

我不确定是什么导致了您的缓慢问题，但您可以尝试进行一些分析以缩小问题范围。我的猜测是，在更改代码以使用 ajax 时，您还引入或揭示了一些导致此缓慢问题的错误。

javascript 有问题吗？您可以将console.time() 和console.timeEnd() 放在不同的位置，以查看执行一段javascript 需要多长时间。 （例如，在您的 ajax 回调的开始和结束时）。根据您发布的内容，这可能不是问题，但您可以随时仔细检查。 是 PHP 运行缓慢吗？您可以在 PHP 中使用类似的分析函数来确保它没有挂在什么东西上。 是否存在网络问题？例如，您可以记录 javascript 发送请求和 PHP 接收请求的时间戳，反之亦然。 （这在 localhost 上应该可以正常工作，但在其他环境中，您必须小心时钟不同步）

这里有很多地方可能会出错，因此很难给出更具体的答案，但希望这可以为您提供一些工具来帮助您开始寻找。

至于您的附带问题：您是对的 - PHP 将在继续执行的同时开始发送 HTML。例如：

<div>
  <?php someLongBlockingFunction(); ?>
</div>

<div> 将被发送到浏览器，然后 PHP 在最终发送结尾 </div> 之前将停在长时间运行的函数上。浏览器会将这些块拼凑在一起，并且在 PHP 完成发送整个文件之前不会调用您的事件侦听器。

【讨论】：

我认为这与数据库和图像有关！如果您有时间并且不介意提供帮助，我有一个后续问题要问您，因为您似乎知识渊博。如果我通过 Heroku 或 AWS 等无偿第三方托管 MySQL 数据库，当我最终通过更昂贵的订阅公开托管网站时，我是否可以期望查询结果更快？我就像你说的那样做，到处记录时间，发现是数据库访问在做这件事。因此，如果升级后它会变得更好，我不会过度补偿加载延迟。

很高兴您能够缩小问题范围！我实际上在这方面的知识并不多：p - 但是，是的，我假设当您转向付费订阅时，您的数据库查询会运行得更快。查询运行速度如此缓慢，我仍然感到有些惊讶——但我不知道你在免费计划上受到了多少限制。可能还有其他问题在起作用，例如您是在连续执行大量阻塞查询而不是异步查询，还是在执行大型查询（例如下载整个表）时，可以使用较小的查询。

@backwardforward 第二个请求，来自您的托管服务的附加信息请求。 RAM 大小、# 核心、MySQL 主机服务器上的任何 SSD 或 NVME 设备？在 pastebin.com 上发布并分享链接。从您的 SSH 登录根目录中，文本结果为：B) SHOW GLOBAL STATUS；在处理了至少 4 次慢速测试后，正常运行时间 C) 显示全局变量； D) 显示完整的处理程序； E) 完成 MySQLTuner 报告 F) SHOW ENGINE INNODB STATUS；为服务器工作负载调优分析提供建议。