Question

我想使用Json显示一个包含1000行的列表，这是由Struts2支持的，如pug-in。我使用flexigrid (jquery)来解析1000行来显示。但它太慢了，有时我的浏览器会崩溃。（Firefox＆amp; IE）。

那么，解析大约1000行的最快的Javascript框架是什么？

Answer 1

JavaScript最快的JSON解析器是什么？

eval或可用时，原生JSON解析器，至少在Chrome，Safari，Firefox 3.something，Opera 10.50甚至IE8中（仅在IE8模式下）

Answer 2

向用户显示他们想要查看的内容。

显示50行，添加过滤器或搜索。

如果你真的认为数据应该在一个页面中可以访问，那么你想要的就是fetch data while the user scrolls (and thus pick up smaller portions at a time).

Answer 3

我不认为你会从几乎任何同时显示1,000 的网格组件中获得可接受的性能，特别是在IE（甚至是IE8）上。但大多数网格应该能够支持1000内存（好吧，取决于它们有多大）并在其中显示一个带有分页和过滤选项的窗口（例如，20行，40行等），而没有显着的性能问题。我认为这也是一种更好的用户体验。

修改

我很好奇地检查，是的，JSON解析时间不是问题;这将是渲染。下面是完全客户端非常非常简单（非生产）分页的示例。在我的上网本中，IE7在36ms内解析了1000行简单的JSON对象，因此即使复杂的对象也不应成为问题。这是使用Prototype's evalJSON，它（即使是现在）只是推迟到eval并将数据放在括号中（它们会改变它）。

<强> 1000rows.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>1,000 Row Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js'></script>
<script type='text/javascript' src='1000rows.js'></script>
</head>
<body><div>
<input type='button' id='btnLoadData' value='Load Data'>
<input type='button' id='btnNext' value='Next'>
<input type='button' id='btnPrevious' value='Previous'>
<table>
<thead>
<tr><th>Name</th><th>Description</th><th>Count</th></tr>
</thead>
<tfoot>
<tr><th colspan='3' id='theLabel'></th></tr>
</tfoot>
<tbody id='theData'>
<tr><td colspan='3'></td></tr>
</tbody>
</table>
<hr>
<div id='log'></div>
</div></body>
</html>

1000rows.js （使用Prototype; jQuery会有所不同，但相似）

(function() {
    var data, windowTop, WINDOW_SIZE;

    // "Constant" for the size of our window into the data
    WINDOW_SIZE = 20;   // Rows

    // No data yet
    clearData();

    // Hook up our observers when we can
    document.observe('dom:loaded', function() {
        $('btnLoadData').observe('click', loadData);
        $('btnNext').observe('click', function(event) {
            event.stop();
            updateWindow(WINDOW_SIZE);
        });
        $('btnPrevious').observe('click', function(event) {
            event.stop();
            updateWindow(-WINDOW_SIZE);
        });
    });

    // Clear our data to a known state
    function clearData() {
        data = [];
        windowTop = 0;
    }

    // Click handler for the load data button
    function loadData() {
        var success;

        log("Loading data..");
        clearData();
        updateWindow();
        success = false;

        // Note: Using text/plain rather than application/json so
        // Prototype doesn't parse the data for me, so I can measure
        // how long it takes to do it.
        new Ajax.Request("data.txt", {
            onSuccess: function(response) {
                var start, duration;

                success = true;
                log("Got data, parsing");
                start = new Date().getTime();
                data = response.responseText.evalJSON();
                duration = new Date().getTime() - start;
                log("Data parsed in " + duration + "ms");
                updateWindow.defer();
            }
        });
    }

    function updateWindow(offset) {
        var dataElement, labelElement, markup, index, template;

        // Get the target element
        dataElement = $('theData');
        labelElement = $('theLabel');
        if (!dataElement || !labelElement) {
            return;
        }

        // If no data, simply say that
        if (!data || data.length <= 0) {
            dataElement.update("");
            labelElement.update("No information");
            return;
        }

        // Ensure that windowTop is rational
        if (WINDOW_SIZE > data.length) {
            windowTop = 0;
        }
        else {
            if (typeof offset == 'number') {
                windowTop += offset;
            }
            if (windowTop + WINDOW_SIZE > data.length) {
                windowTop = data.length - WINDOW_SIZE;
            }
            if (windowTop < 0) {
                windowTop = 0;
            }
        }

        template = new Template(
            "<tr><td>#{name}</td><td>#{description}</td><td>#{count}</td></tr>"
        );

        markup = "";
        index = windowTop + WINDOW_SIZE - 1;
        if (index >= data.length) {
            index = data.length - 1;
        }
        $('theLabel').update('Showing rows ' + windowTop + ' through ' + index);
        while (index >= windowTop) {
            markup = template.evaluate(data[index]) + markup;
            --index;
        }

        dataElement.update(markup);
    }

    // Log a message
    function log(msg) {
        $('log').appendChild(new Element('p').update(msg));
    }
})();

data.txt （当然很无聊）

[
    {"name": "Name #0001", "description": "Description #0001", "count": 1},
    {"name": "Name #0002", "description": "Description #0002", "count": 2},
    {"name": "Name #0003", "description": "Description #0003", "count": 3},
    ...
    {"name": "Name #1000", "description": "Description #1000", "count": 1000}
]

...可以找到data.txt的完整副本here。

Answer 4

1,000行什么？ jQuery实际上非常快，特别是自1.4版本（几天前发布）中的性能升级以来。如果你遇到显示1000行的问题，我首先会问你为什么要显示那么多 - 没有人应该滚动那么多。其次，所有信息都至关重要，您是否只将关键信息传递给JSON值。最后，您是否因为添加数据的方式而使DOM不必要地变得复杂？

同样，如果您只查询您需要显示的内容，并且您正在显示合理的数据（在屏幕上发布1,000行不是'' （合理的），jQuery将足以满足您的需求。

Answer 5

如果你真的想要速度，javascript eval("...");功能是最快的。不幸的是，它不安全，因为它可以执行恶意javascript。

还有来自JSON.org的javascript JSON Parser（找到here）。他们编写了javascript来解析JSON字符串以创建一个JSON对象（我听说使用Firebug进行调试，一个Firefox附加组件，创建了一个JSON对象数组，但我从未尝试过它。）

什么是JavaScript最快的JSON解析器？

5 个答案:

修改