Web 应用程序返回数据但速度太慢

Question

我创建了使用 MVC 4.0、WebServices、RestFul、SQLServer 2008 R2、jQuery Mobile（单页应用程序）、AJAX 架构的数据驱动 Web 应用程序。

当用户单击“按名称搜索”>“浏览名称”时，这会从表 users（以及其他几个数据查找表）中引入所有数据。

该应用程序设计用于 Retina 显示屏和普通显示屏（仅限一张大尺寸图像），并在 html 中重新调整它们的大小。

问题是这种搜索有时可能需要 10 秒才能返回大约 400 条记录，但使用 URI 只需要大约两条。这正常吗，lazy loading 可以帮忙吗？我如何在下面的 AJAX 中实现这一点？

AJAX：

function getConsultants() {

    $.ajax({
        type: 'GET',
        async: false,
        url: 'http://31.222.187.42/hca-consulting/Farm/users',
        //url: 'json/get_consultants.txt',
        dataType: 'json',

        success: function (users) {

           hcaConsultants = users;

        },
    });
};

Answer 1

我认为您的问题是：

1. 初始页面加载量为 13.1MB（很简单，老虎！）。显然，这是需要解决的。通过优化器运行所有 PNG 和 JPEG。 Here 是 Visual Studio 的附加组件。有鉴于此，在许多 PC 上，浏览器进程的 RAM 使用将达到顶峰。 Chrome 对我来说达到了 250MB，而 Opera 达到了 650MB。这是一个沉重的页面，在初始页面加载时有 171 个请求。这真的很高。考虑为您的图像也使用精灵，尽可能多地合并，性能差异是惊人的；请求的数量越多，页面的效率就越低。

2. 您真的需要预加载所有这些图片吗？一定要考虑你提到的惰性加载器或其他适当的图像加载器。

3. 当调用浏览名称时，HTTP 堆栈上的请求数最多为 548 个单独的项目，最多为 14.3MB（但所有图像链接都已损坏，所以我建议，一旦你把它们准备好，那时它将超过 30 MB。这对于潜在的移动（网络或安装？）应用程序来说显然是不可接受的。

4. 您可能还希望考虑使用 jQuery 模板来加快将这些记录传递到 DOM 的速度。此外，您还可以实现像waypoint plugin 这样的滚动加载，它是一个极小化的 8kb，因此向下滚动时浏览器中会显示更多 JSON 结果；您在任何时候处理的记录越少，您的浏览器内效率和响应能力就会提高。

5. 如果您通过网络而不是作为已安装的应用程序交付此应用程序，您将需要 heavy、heavy 缓存，张开双臂拥抱它。还可以考虑在构建时使用 VS 构建后事件和我的英雄 Douglas Crockford 的JSMin 或通过使用框架中内置的捆绑将您自己的所有 Javascript 捆绑并缩小到一个文件中。此外，您的图书馆的 CDN。

确实如此，您的页面加载如此缓慢的原因是它在其资源的重压下呻吟，这就是为什么您的 api 的 JSON 在直接请求时返回得如此之快。

This 是一个很棒的网站，用于比较您的页面速度和 Yslow 分数，这里是 report with recommendations for your site 以获取更多提示和技巧。响应速度和感知速度是这类应用的一切，所以我支持你让它成为世界级的。

我希望这对您的应用有所帮助并祝您好运。