首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript 解析Json字符串的性能比较分析代码

Posted in Javascript onDecember 16, 2009

解析时用到的方法一般是eval或者new function，而目前IE8和Firefox3.1又内置了原生的JSON对象（据说会有一定的性能提升）。那我们在实际使用的时候怎样从这三种方法（因为性能问题，不考虑用javascript实现的解析）里面来选择呢？面对众多的浏览器，哪种方式的性能是最好的呢？

一、测试方法

1、首先指定测试次数及JSON字符串 

var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}';

2、循环解析并记录时间

eval 

var beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = eval( "(" + jsonString + ")" ); 
} 
Console.output( "eval:" + ( new Date() - beginTime ) );

new Function 
var beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = new Function( "return " + jsonString )(); 
} 
Console.output( "new Function:" + ( new Date() - beginTime ) );

native 
if ( typeof JSON !== "undefined" ) { 
var beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = JSON.parse( jsonString ); } 
Console.output( "native:" + ( new Date() - beginTime ) ); 
} else { 
Console.output( "native:not support!" ); 
}

二、测试对象

选择目前主流的浏览器（不考虑Maxthon一类的外壳），包括IE6、7、8，Firefox2、3、3.1，Chrome，Opera及Safari3、4。

三、测试环境

T9300 CPU + 4G RAM + Windows2003，其中IE8使用的是Vista的环境，IE7在另外一台工作机（2G CPU + 2G RAM + Windows2003），考虑到主要是测试浏览器客户端的性能，结果的误差应该能够接受。

四、测试结果
JavaScript 解析Json字符串的性能比较分析代码 
*数值越小越好

*在当前列中绿色背景的表示性能最好，红色性能最差
1、Firefox2、3全部垫底，IE6的性能优于IE7（可能和机器不一致有关），Chrome和Safari4的性能远远超出其它浏览器。

2、不同的浏览器下eval和new Function的性能不一致，总的来说eval更好，但Firefox下new Function的性能是eval的一倍，为了更好的兼容各个浏览器，我们把对JSON的解析单独封装成一个对象来处理：
wrapper 

var __json = null; 
if ( typeof JSON !== "undefined" ) { 
__json = JSON; 
} 
var browser = Browser; 
var JSON = { 
parse: function( text ) { 
if ( __json !== null ) { 
return __json.parse( text ); 
} 
if ( browser.gecko ) { 
return new Function( "return " + text )(); 
} 
return eval( "(" + text + ")" ) 
} 
}; 
var beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = JSON.parse( jsonString ); } 
Console.output( "wrapper:" + ( new Date() - beginTime ) );

加入Wrapper后的结果：
JavaScript 解析Json字符串的性能比较分析代码 
由于涉及到调用对象的开销，封装后JSON对象会比单独调用更慢，但它能保证在各个浏览器下使用最适合的方法。

五、结论

解析Json字符串时，不同的浏览器选择不同的方法：

IE6、7使用eval
IE8使用原生的JSON对象
Firefox2、3使用new Function
Safari4使用eval
其它浏览器下eval和new Function的性能基本一致

如果有不同意见欢迎拍砖：）

Update:

2009.03.23：屏蔽所有Firefox的Add-Ons再进行测试
由于Known在Firefox下运行代码得到了完全不一致的结果，怀疑是Firefox的插件导致，于是禁掉所有插件后（后来表明几乎由Firebug导致），重新在Firefox2、3下测试了一下，结果如下：
JavaScript 解析Json字符串的性能比较分析代码 
这表明Firefox本身的性能并不是象我们先前测试的那样低，在去掉插件后性能还是很不错。但是没有Firebug一类的插件支持，Firefox对我们的吸引力也大大降低了。

2009.03.31：循环中每次使用新的json字符串
根据Oliver的描述，他猜测是由于Safari4和Chrome缓存了eval的结果从而导致它们的测试成绩“虚”高，测试结果证明了他的推测:
JavaScript 解析Json字符串的性能比较分析代码 
从这个结果中我们可以看到，Opera的性能最好，Ie8其次。

主要修改的代码： 

//eval 2: var beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = eval("(" + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}' + ")"); 
} 
Console.output( "eval:" + ( new Date() - beginTime ) ); 
//new Function 
beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = new Function("return " + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}')(); 
} 
Console.output( "new Function:" + ( new Date() - beginTime ) ); 
//native 
if ( typeof JSON !== "undefined" ) { 
beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); 
} 
Console.output( "native:" + ( new Date() - beginTime ) ); 
} else { 
Console.output( "native:not support!" ); 
} 
//wrapper 
var __json = null; 
if ( typeof JSON !== "undefined" ) { 
__json = JSON; 
} 
var browser = Browser; 
var JSON = { 
parse: function( text ) { 
if ( __json !== null ) { 
return __json.parse( text ); 
} 
if ( browser.gecko ) { 
return new Function( "return " + text )(); 
} 
return eval( "(" + text + ")" ) 
} 
}; 
beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); 
} 
Console.output( "wrapper:" + ( new Date() - beginTime ) );

附：全部代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Parse JsonString</title> 
</head> 
<body> 
<div id="consoleRegion"></div> 
<script type="text/javascript"> 
//yui 
var Browser = function() { 
var o = { 
ie: 0, 
opera: 0, 
gecko: 0, 
webkit: 0 
}; 
var ua = navigator.userAgent, m; 
if ( ( /KHTML/ ).test( ua ) ) { 
o.webkit = 1; 
} 
// Modern WebKit browsers are at least X-Grade 
m = ua.match(/AppleWebKit\/([^\s]*)/); 
if (m&&m[1]) { 
o.webkit=parseFloat(m[1]); 
} 
if (!o.webkit) { // not webkit 
// @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr) 
m=ua.match(/Opera[\s\/]([^\s]*)/); 
if (m&&m[1]) { 
o.opera=parseFloat(m[1]); 
} else { // not opera or webkit 
m=ua.match(/MSIE\s([^;]*)/); 
if (m&&m[1]) { 
o.ie=parseFloat(m[1]); 
} else { // not opera, webkit, or ie 
m=ua.match(/Gecko\/([^\s]*)/); 
if (m) { 
o.gecko=1; // Gecko detected, look for revision 
m=ua.match(/rv:([^\s\)]*)/); 
if (m&&m[1]) { 
o.gecko=parseFloat(m[1]); 
} 
} 
} 
} 
} 
return o; 
}(); 
var Console = { 
consoleRegion: null, 
getRegion: function() { 
if ( this.consoleRegion === null ) { 
this.consoleRegion = document.getElementById( "consoleRegion" ); 
} 
return this.consoleRegion; 
}, 
output: function( text ) { 
this.getRegion().innerHTML += "<br/>" + text; 
} 
}; 
//test code 
var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'; 
//eval 
var beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = eval( "(" + jsonString + ")" ); 
} 
Console.output( "eval:" + ( new Date() - beginTime ) ); 
//new Function 
beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = new Function( "return " + jsonString )(); 
} 
Console.output( "new Function:" + ( new Date() - beginTime ) ); 
//native 
if ( typeof JSON !== "undefined" ) { 
beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = JSON.parse( jsonString ); 
} 
Console.output( "native:" + ( new Date() - beginTime ) ); 
} else { 
Console.output( "native:not support!" ); 
} 
//wrapper 
var __json = null; 
if ( typeof JSON !== "undefined" ) { 
__json = JSON; 
} 
var browser = Browser; 
var JSON = { 
parse: function( text ) { 
if ( __json !== null ) { 
return __json.parse( text ); 
} 
if ( browser.gecko ) { 
return new Function( "return " + text )(); 
} 
return eval( "(" + text + ")" ) 
} 
}; 
beginTime = new Date(); 
for ( i = 0; i < count; i++ ) { 
o = JSON.parse( jsonString ); 
} 
Console.output( "wrapper:" + ( new Date() - beginTime ) ); 
//alert( o.value.items[0].z ); 
</script> 
</body> 
</html>

JavaScript 解析Json字符串的性能比较分析代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
js实现简单模态框实例
Nov 16 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 #Javascript
比较详细的关于javascript 解析json的代码
Dec 16 #Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 #Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 #Javascript
jQuery 渐变下拉菜单
Dec 15 #Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 #Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 #Javascript
LOL(1) 暴雪(1) 东方异文石(1) 我的世界(1) 守望先锋(1) 巫师(1) 小缇娜的奇幻之地(1) 艾尔登法环(1) 最终幻想(1) 战锤40K(1)
You might like
php获取新浪微博数据API实例
2013/11/12 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
2007/05/08 Javascript
JavaScript学习笔记（十）
2010/01/17 Javascript
jquery 图片 上一张 下一张 链接效果（续篇）
2010/04/20 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[15:15]教你分分钟做大人：狙击手
2014/10/30 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Python标准库itertools的使用方法
2020/01/17 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Original Penguin英国官方网站：美国著名休闲时装品牌
2016/10/30 全球购物
南非最大的在线时尚商店：Zando
2019/07/21 全球购物
俄罗斯购买自行车网站：Vamvelosiped
2021/01/29 全球购物
2014年大学生自我评价
2014/01/19 职场文书
销售主管岗位职责
2014/02/08 职场文书
六五普法学习心得体会
2016/01/21 职场文书