首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JQuery页面加载优化

JQuery页面加载优化
EN

Stack Overflow用户
提问于 2014-01-03 00:05:14
回答 1查看 1.5K关注 0票数 0

我正在工作的网站,有一个非常长的加载时间(~10秒满载)。该页面正在对页面加载中的数百项进行大约20个单独的服务器调用,并使用JQuery DataTables插件来显示它们。页面将加载一半,然后在每次调用时等待服务器的响应,然后将jquery绑定到结果。现在,数据不是存储在页面源上,它的唯一证据是在响应头中(我不知道这类东西存储在哪里。)

我提出的一个解决方案是在发送页面加载之前在服务器端执行所有服务调用,然后将datatable jquery绑定到html表。由于数据无论如何都是加载的,我将删除20个服务器请求并简化代码。

我的问题是性能;将数据添加到html源会使页面加载/执行速度比将数据存储到浏览器所在的位置慢吗?

代码语言:javascript
运行
复制
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: listCalendarName, 
    CAMLViewFields: camlFields,
    CAMLQuery: camlQuery,
    completefunc: function (xData, Status) {

        var data = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({
            mapping: {
                ows_ID: { mappedName: "ID", objectType: "Counter" },
                ows_resource_title: { mappedName: "Title", objectType: "Text" }
                //removed extra field definitions
            },
            removeOws: true
        });

        self.Directory(data);
    }
});

这是它正在进行的调用类型的一个例子。响应采用XML格式,并将其转换为JSON。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-01-03 00:18:02

在不知道具体情况的情况下,我会大致回答。如果你提供细节,我可以指出更好的解决方案。

  1. 您可以使用浏览器开发工具(例如firebug或chrome中的内置工具(使用键F12)来验证其主加载时间的位置。
  2. 如果加载时间在javascripts (多个)中,那么将它们组合并缩小为更少的文件。
  3. 您使用什么格式传递数据?你要发送多少数据?数据表是一个非常通用的插件,支持多种格式。如果您使用JSON发送大量数据,那么当JSON重复键值并抹掉总数据大小时,它可能会减慢您的速度。对于5K行,我有一个使用可数据的页面,使用JSON,数据大约为1.5MB,而没有使用简单JS数组的JSON,数据下降到300 MB左右。
  4. 如果您使用HTML 5,您还可以查看本地存储,并仅在需要时发送新数据。您可以查看库,如https://github.com/marcuswestin/store.js/

如果您需要特定的指针,请告诉我是否有帮助。

更新: XML响应也会膨胀(很多额外的标记),我建议考虑两件事。

看看是否可以发送普通的JavaScript数组(搜索"datatables Ajax源数据(数组数组)“,由于缺乏信誉点,我无法提供链接)。如果所有数据都格式良好(每个数组中的元素数相同)和

尝试通过此选项render.html推迟html呈现。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20894242

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档