我想使用 Struts2 支持的 Json 显示一个包含 1000 行的列表，例如 pug-in。我使用flexigrid (jquery)解析要显示的 1000 行。但它太慢了，有时我的浏览器会崩溃。（火狐和 IE）。
那么，解析大约 1000 行的最快 Javascript 框架是什么？
问问题
9710 次
5 回答
15
JavaScript 最快的 JSON 解析器是什么？
eval 或可用时，本机 JSON 解析器，至少在 Chrome、Safari、Firefox 3.something、Opera 10.50 甚至 IE8 中（仅在 IE8 模式下）
于 2010-01-18T14:14:07.443 回答
5
于 2010-01-18T13:59:37.307 回答
2
我认为您不会从几乎任何同时显示 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 的完整副本。
于 2010-01-18T13:58:34.997 回答
1
1000 行什么？jQuery 实际上非常快，尤其是在 1.4 版（几天前发布）中进行了性能升级之后。如果您在显示 1,000 行时遇到问题，我首先会问您为什么要显示这么多行 - 没有人应该滚动那么多。其次，所有信息都至关重要，您是否仅将关键信息传递到 JSON 值中。最后，你是否让你的 DOM 变得不必要地复杂化了你添加数据的方式？
同样，如果您只查询您需要显示的内容，并且您正在显示合理的数据（在屏幕上发布 1,000 行是不合理的），那么 jQuery 将足以满足您的需求。
于 2010-01-18T13:55:37.660 回答
1
如果你真的想要速度，javascripteval("...");函数是最快的。不幸的是，它不安全，因为它可以执行恶意 javascript。
还有来自 JSON.org的 javascript JSON Parser（在此处找到）。他们编写了 javascript 来解析 JSON 字符串以创建 JSON 对象（我听说使用 Firebug 进行调试，Firefox 附加组件会创建 JSON 对象数组，但我从未尝试过）。
于 2010-01-18T16:06:10.623 回答