Question

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

当用户点击“按名称搜索”＆gt; “浏览名称”会从表用户（以及其他几个数据查找表）中获取所有数据。

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

问题是这种搜索有时需要10秒才能返回大约400条记录，但是使用URI只需要大约2条记录。这是正常的，可以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

以下是我认为您的问题：

初始页面加载量为13.1MB（简单，老虎！）。显然这需要解决。通过优化器运行所有PNG和JPEG。 Here是Visual Studio的附加组件。鉴于此，在许多PC上，浏览器进程的RAM使用将触顶。 Chrome为我打250MB，使用Opera 650MB。这是一个沉重的页面，在初始页面加载时有171个请求。这真的很高。考虑使用精灵为您的图像，尽可能多地巩固，性能差异令人惊叹;请求数越多，页面效率越低。
您真的需要预先加载所有这些图片吗？绝对考虑你提到的延迟加载器或其他适当的图像加载器。
当调用浏览名称时，HTTP堆栈上的请求数量达到548个单独项目，最多可达14.3MB（但所有图像链接都被破坏，所以我建议，一旦你得到那些，那时它将是30 + MB。对于潜在的移动（web或安装？）应用程序来说，这显然是不可接受的。
您可能还想考虑jQuery模板化这些记录到DOM的传递速度。此外，您还可以实现像waypoint plugin这样的滚动加载，这是一个精美的最小化8kb，因此当向下滚动时，浏览器中会出现更多JSON结果;您在任何时候处理的记录越少，就会提高浏览器的浏览器效率和响应能力。
如果您通过网络而不是作为已安装的应用程序提供此功能，则需要重，重缓存，并张开双臂拥抱它。还可以考虑在构建时使用VS post build事件和我的英雄Douglas Crockford的JSMin或使用框架中内置的捆绑将所有自己的Javascript捆绑并缩小为一个文件。此外，您的图书馆的CDN。

真的就是这样，你的网页加载速度这么慢的原因是它在资源的重压下呻吟，这就是为什么你的api的JSON在直接请求时会如此迅速地回来。

This是一个很棒的网站，用于比较您的网页速度和Yslow得分，这里有report with recommendations for your site的其他提示和技巧。响应能力和感知速度是这些应用程序的一切，所以我支持你让它成为世界一流的。

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

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

1 个答案: