[英]What is the fastest JSON parser for JavaScript?
我想使用Json顯示一個包含1000行的列表，這是由Struts2支持的，如pug-in。 我使用flexigrid（jquery）來解析1000行來顯示。 但它太慢了，有時我的瀏覽器會崩潰。 （Firefox和IE）。
那么，解析大約1000行的最快的Javascript框架是什么？
什么是JavaScript最快的JSON解析器？
eval或可用時，原生JSON解析器，至少在Chrome，Safari，Firefox 3.something，Opera 10.50甚至IE8中（僅限IE8模式）
我不認為你會從幾乎任何同時顯示1,000的網格組件中獲得可接受的性能，特別是在IE（甚至是IE8）上。 但大多數網格應該能夠支持1000內存（好吧，取決於它們有多大）並在其中顯示一個帶有分頁和過濾選項的窗口（例如，20行，40行等），而沒有顯着的性能問題。 我認為這也是一種更好的用戶體驗。
我很好奇地檢查，是的，JSON解析時間不是問題; 這將是渲染。 下面是完全客戶端非常非常簡單（非生產）分頁的示例。 在我的上網本中，IE7在36ms內解析了1000行簡單的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的完整副本。
1000行什么 ？ jQuery實際上非常快，特別是自1.4版本（幾天前發布）中的性能升級以來。 如果你遇到顯示1000行的問題，我首先會問你為什么要顯示那么多 - 沒有人應該滾動那么多。 其次，所有信息都至關重要，您是否只將關鍵信息傳遞給JSON值。 最后，您是否因為添加數據的方式而使DOM不必要地變得復雜？
同樣，如果您只查詢需要顯示的內容，並且您顯示的是合理的數據（在屏幕上發布1,000行是不合理的），jQuery將足以滿足您的需求。
如果你真的想要速度，javascript eval("..."); 功能是最快的。 不幸的是，它不安全，因為它可以執行惡意JavaScript。
還有來自JSON.org的javascript JSON Parser（在這里找到）。 他們編寫了javascript來解析JSON字符串以創建一個JSON對象（我聽說使用Firebug進行調試，一個Firefox附加組件，創建了一個JSON對象數組，但我從未嘗試過）。
在javascript中將json的字段轉換為數組的最快方法是什么？
[英]What is the fastest way to convert fields of a json into arrays in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.