0

I'm working with a web site that has a very long load time (~10 seconds full load). The page is making around 20 separate server calls for several hundred items each on page load, and using the JQuery DataTables plugin to display them. The page will half load, then wait for the response from the server on each call, and then bind the jquery to the results. Right now the data is NOT stored on the page source, the only evidence of it is in the response headers (I do not know where this kind of stuff is stored..)

One solution i have come up with is to perform all of the service calls on the server side before sending the page loads, and then binding the datatable jquery to the html tables. Since the data is being loaded no matter what, i would be eliminating the 20 server requests and simplifying the code.

My question is about performance; will adding the data to the html source make the page load/perform slower than storing the data wherever the browser sticks it? 

$().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);
    }
});

This is an example of the type of call it is making. the response is in XML and it converts it to JSON.

4

1 回答 1

0

在不知道具体情况的情况下，我将笼统地回答。如果您提供详细信息，我可以指出更好的解决方案。

  1. 您可以使用浏览器开发工具（例如 firebug 或 chrome 中的内置工具（使用 F12 键）来验证它的主要加载时间。

  2. 如果加载时间在 javascripts（多个）中，则将它们组合并缩小为更少的文件。

  3. 您使用什么格式来传递数据？你发送了多少数据？Data Tables 是一个非常通用的插件，支持多种格式。如果您使用 JSON 发送大量数据，那么它可能会减慢您的速度，因为 JSON 会重复键值并占用总数据大小。我有一个使用 5K 行的数据表的页面，使用 JSON 的数据约为 1.5 MB，而没有使用简单 JS 数组的 JSON，它下降到 300KB ish。

  4. 如果您使用 HTML 5，您还可以查看本地存储并仅在需要时发送新数据。您可以查看诸如https://github.com/marcuswestin/store.js/之类的库

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

更新： XML 响应也很臃肿（很多额外的标记）我建议研究两件事。

一个。看看您是否可以发送纯 JavaScript 数组数组（搜索“datatables Ajax sourced data (array of arrays)”，由于缺少信誉点，我无法提供链接）。如果您的所有数据格式正确（每个数组中的元素数量相同）并且

湾。尝试通过此选项延迟 html 呈现http://datatables.net/release-datatables/examples/ajax/defer_render.html

于 2014-01-03T00:18:02.993 回答