0

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

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

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

问题是这种搜索有时可能需要 10 秒才能返回大约 400 条记录，但使用 URI 只需要大约两条。这正常吗，延迟加载有帮助吗？我如何在下面的 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;

        },
    });
};
4

1 回答 1

1

以下是我认为您的问题：

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

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

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

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

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

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

这是一个很好的网站，可以比较您的页面速度和 Yslow 分数，这里是报告，其中包含为您的网站提供的其他提示和技巧的建议。响应能力和感知速度是这类应用程序的一切，所以我支持你让它成为世界级的。

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

于 2013-08-17T02:41:07.050 回答