当前位置：文江博客话题详情

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

发布于 2024-08-18 02:13:05 字数 240 浏览 4 评论 0原文

我想使用 Struts2 支持的 Json 显示一个包含 1000 行的列表，例如 pug-in。我使用 flexigrid (jquery) 解析要显示的 1000 行。但它太慢了，有时我的浏览器会崩溃。（火狐和 IE）。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笨笨の傻瓜 2024-08-25 02:13:05

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

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

回复收藏 0 原文

猥︴琐丶欲为 2024-08-25 02:13:05

向用户展示他们想看到的内容。

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

如果您确实认为应该在单个页面中访问数据，也许您想要的是在用户滚动时获取数据（从而一次获取较小的部分）。

回复收藏 0 原文

离鸿 2024-08-25 02:13:05

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

编辑

我很好奇去检查，是的，JSON 解析时间不是问题；这将是渲染。下面是一个非常非常简单（非生产）的完全客户端分页的示例。在我的上网本上，IE7 在 36 毫秒内解析 1,000 行简单 JSON 对象，因此即使是复杂的对象也不应该成为问题。这是使用 Prototype 的 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 的完整副本可以在此处找到。

I don't think you'll get acceptable performance from just about any grid component showing 1,000 at the same time, especially not on IE (even IE8). But most grids should be able to support having 1,000 in memory (well, depending on how big they are) and displaying a window into them (say, 20 rows, 40 rows, etc.) with paging and filtering options, without a significant performance problem. That would be a better user experience as well, I would think.

Edit

I got curious enough to check, and yeah, JSON parse time is not the problem; it'll be the rendering. Below is an example of very, very simple (not production) paging entirely client-side. On my netbook, IE7 parses the 1,000 rows of simple JSON objects in 36ms, so even complex objects shouldn't be an issue. That's using Prototype's evalJSON, which (even now) just defers to eval and puts the data in parentheses (they'll be changing that).

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 (using Prototype; jQuery would be different but similar)

(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 (quite boring, of course)

[
    {"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}
]

...a full copy of data.txt can be found here.

回复收藏 0 原文

戈亓 2024-08-25 02:13:05

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

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

回复收藏 0 原文