Ajax数据返回缓慢

Question

我用Ajax调用PHP页面。我注意到当返回大量数据时（差不多5000行），页面加载需要几秒钟。这是正常的行为吗？这是我用来调用它的代码：

$.ajax({
        url: '_get_items.php?project_id=<?=$_GET['project_id']?>&list_id=<?=$_GET['list_id']?>&sort='+ sort +'&assigned_to='+ assigned_to,
        type: "GET",
        success: function(data) {
            $('.tasks_items').html(data);

        }
    });

当我在Chrome中调试它时，大部分时间用于“XHR就绪状态更改”和“重新计算样式”被称为几百次。

Full size

我确信它之所以如此缓慢是因为返回了所有数据。我的问题是，如何解决这个问题？我应该缩小HTML吗？ GZip已经启用。还有其他建议吗？

这是网络屏幕：

Full size

Answer 1

检查网络调试面板。它会告诉你请求在哪里花费时间。是否在等待服务器响应和/或接收数据。如果大部分时间都在等待响应，则需要配置服务器端代码。如果它正在接收，你需要考虑如何使有效载荷变小。

Answer 2

我注意到在添加大量HTML时，使用原始JavaScript比库更快：

$.ajax({
    url: '_get_items.php?project_id=<?=$_GET['project_id']?>&list_id=<?=$_GET['list_id']?>&sort='+ sort +'&assigned_to='+ assigned_to,
    type: "GET",
    success: function(data) {
        $('.tasks_items').get(0).innerHtml = data;
    }
});