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

最新推荐文章于 2023-04-08 20:06:50 发布
转载 最新推荐文章于 2023-04-08 20:06:50 发布 · 672 阅读 · 0

本文通过实验对比了不同浏览器环境下使用eval、newFunction及原生JSON对象解析JSON字符串的性能，并提出了一个兼容性强的封装方案。

原文转自：http://www.cnblogs.com/gOODiDEA/archive/2009/03/22/1419071.html

我们在使用AJAX来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript对象。解析时用到的方法一般是eval或者new function，而目前IE8和Firefox3.1又内置了原生的JSON对象（据说会有一定的性能提升）。那我们在实际使用的时候怎样从这三种方法（因为性能问题，不考虑用javascript实现的解析）里面来选择呢？面对众多的浏览器，哪种方式的性能是最好的呢？

一、测试方法

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

   1: 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 
   1: var beginTime = new Date();
   2: for ( i = 0; i < count; i++ ) {
   3:     o = eval( "(" + jsonString + ")" );
   4: }
   5: Console.output( "eval:" + ( new Date() - beginTime ) );
  • new Function 
   1: var beginTime = new Date();
   2: for ( i = 0; i < count; i++ ) {
   3:     o = new Function( "return " + jsonString )();
   4: }
   5: Console.output( "new Function:" + ( new Date() - beginTime ) );
  • native 
   1: if ( typeof JSON !== "undefined" ) {
   2:     var beginTime = new Date();
   3:     for ( i = 0; i < count; i++ ) {
   4:         o = JSON.parse( jsonString );     }
   5:     Console.output( "native:" + ( new Date() - beginTime ) );
   6: } else {
   7:     Console.output( "native:not support!" );
   8: }

二、测试对象

选择目前主流的浏览器（不考虑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），考虑到主要是测试浏览器客户端的性能，结果的误差应该能够接受。

 

四、测试结果

image

*数值越小越好

*在当前列中绿色背景的表示性能最好，红色性能最差

1、Firefox2、3全部垫底，IE6的性能优于IE7（可能和机器不一致有关），Chrome和Safari4的性能远远超出其它浏览器。

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

  • wrapper 
   1: var __json = null;
   2: if ( typeof JSON !== "undefined" ) {
   3:     __json = JSON;
   4: }
   5: var browser = Browser;
   6: var JSON = {
   7:     parse: function( text ) {
   8:         if ( __json !== null ) {
   9:             return __json.parse( text );
  10:         }
  11:         if ( browser.gecko ) {
  12:             return new Function( "return " + text )();
  13:         }
  14:         return eval( "(" + text + ")" )
  15:     }
  16: };          
  17: var beginTime = new Date();
  18: for ( i = 0; i < count; i++ ) {
  19:     o = JSON.parse( jsonString ); }
  20: Console.output( "wrapper:" + ( new Date() - beginTime ) );

加入Wrapper后的结果：

image

由于涉及到调用对象的开销，封装后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下测试了一下，结果如下：

image 

这表明Firefox本身的性能并不是象我们先前测试的那样低，在去掉插件后性能还是很不错。但是没有Firebug一类的插件支持，Firefox对我们的吸引力也大大降低了。

 

  • 2009.03.31：循环中每次使用新的json字符串

根据Oliver的描述，他猜测是由于Safari4和Chrome缓存了eval的结果从而导致它们的测试成绩“虚”高，测试结果证明了他的推测:

image

从这个结果中我们可以看到，Opera的性能最好，Ie8其次。

主要修改的代码：

   1: //eval
   2: var beginTime = new Date();
   3: for ( i = 0; i < count; i++ ) {
   4:     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}' + ")");
   5: }
   6: Console.output( "eval:" + ( new Date() - beginTime ) );
   7: //new Function
   8: beginTime = new Date();
   9: for ( i = 0; i < count; i++ ) {
  10:     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}')();
  11: }
  12: Console.output( "new Function:" + ( new Date() - beginTime ) );
  13: //native
  14: if ( typeof JSON !== "undefined" ) {
  15:     beginTime = new Date();
  16:     for ( i = 0; i < count; i++ ) {
  17:         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}');
  18:     }
  19:     Console.output( "native:" + ( new Date() - beginTime ) );
  20: } else {
  21:     Console.output( "native:not support!" );
  22: }
  23: //wrapper
  24: var __json = null;
  25: if ( typeof JSON !== "undefined" ) {
  26:     __json = JSON;
  27: }
  28: var browser = Browser;
  29: var JSON = {
  30:     parse: function( text ) {
  31:         if ( __json !== null ) {
  32:             return __json.parse( text );
  33:         }
  34:         if ( browser.gecko ) {
  35:             return new Function( "return " + text )();
  36:         }
  37:         return eval( "(" + text + ")" )
  38:     }
  39: };          
  40: beginTime = new Date();
  41: for ( i = 0; i < count; i++ ) {
  42:     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}');
  43: }
  44: 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对象及JSON字符串
雾林小妖的博客
10-24 1572
JavaScript解析JSON对象是常用功能之一。此处我们要明确JSON对象和JSON字符串的区别？否则会给我们的解析带来困扰。主要实现如下功能：1、JavaScript解析JSON字符串和JSON对象?2、JavaScript解析JSON数组?3、JavaScript解析来自springboot通过@ResponseBody返回的JSON字符串?4、禁用eval后如何替代eval?JSON对象的本质是一个对象，对象中属性的值可以通过object.name的方式访问。
高效率读取json格式数据的tree
04-06
加载非常快的树，读取json格式数据！ 特地上传给大家分享！
JavaScript解析Json字符串 众浏览器性能比较
likunwen_001的专栏
08-15 803
在使用AJAX来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript 对象。解析的方法有三种，eval，new function，或者目前IE8和Firefox3.1中内置的原生JSON对象。本文测试并比较了各个浏览器解析的性能。 AD：51CTO云计算架构师峰会 抢票进行中！ 我们在使用AJAX来做服务器端和客户端交互的时
JavaScript 解析Json字符串的性能比较分析代码
04-08 825
我们在使用来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript对象。解析时用到的方法一般是eval或者new function，而目前IE8和Firefox3.1又内置了原生的JSON对象（据说会有一定的性能提升）。那我们在实际使用的时候怎样从这三种方法（因为性能问题，不考虑用javascript实现的解析）里面来选择呢？面对众多的浏览器，哪种方式的性能是最好的呢？
javascript中关于JSON的思考和实验，JSON的性能问题
xiao_yu_liu的博客
04-07 1731
javascript中，关于JSON的使用、理解、学习，第二个参数，如何将undefined、function和正则转换；JSON的性能问题
精选资源
C++解析json字符串
最新发布
02-17
本主题将深入探讨如何在C++中解析JSON字符串，主要涉及以下几个知识点： 1. **JSON基本结构**：JSON数据由键值对组成，键用双引号包围，值可以是字符串、数字、布尔值、数组、对象或null。例如：`{"name": "John", ...
javascript中eval解析JSON字符串
10-22
JSON字符串是JavaScript对象的字符串化表示，如果直接使用eval来解析一个JSON字符串，可能会因为JSON字符串不是有效的JavaScript语句而导致语法错误。例如，如果一个JSON对象没有被包含在圆括号内直接传递给eval，...
java：三大json解析性能对比
icontent
08-20 414
转自：https://www.pinlue.com/article/2015/09/3014/148754794456.html
json比对js插件
03-23
JSON 对比工具,优秀的JSON对比工具,自动格式化，对比JSON不同处，高亮显示，代码经过优化
详解关于JSON.parse()和JSON.stringify()的性能小测试
10-17
主要介绍了详解关于JSON.parse()和JSON.stringify()的性能小测试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength 属性设置的值。
qq_40890601的博客
07-31 1948
被这个问题困扰了两天，终于被我找出来了 前期我只知道ajax 请求一直返回parseerror 的错误，但不知道如何去捕获具体原因 直到我在global.asax 文件里加入下面这些去捕获错误信息 最终发现是json 字符串超出了最大限制， void Application_Error(Object sender, EventArgs e) { Exception lastError = Server.GetLastError();//在这里捕获错误信息
四种常见json效率比较
热门推荐
qq_30490591的博客
07-05 1万+
因工作需要，在项目中想统一使用同一种json进行解析数据，因此将几种json拿出来比较比较。第一种  org.json&lt;dependency&gt; &lt;groupId&gt;org.json&lt;/groupId&gt; &lt;artifactId&gt;json&lt;/artifactId&gt; &lt;version&gt;20180130&lt;/...
JSON库之性能比较：JSON.simple VS GSON VS Jackson VS JSONP
if(true){ I love it }
12-07 3150
Java中哪个JSON库的解析速度是最快的？ JSON已经成为当前服务器与WEB应用之间数据传输的公认标准，不过正如许多我们所习以为常的事情一样，你会觉得这是理所当然的便不再深入思考 了。我们很少会去想用到的这些JSON库到底有什么不同，但事实上它们的确是不太一样的。因此，我们运行了一个基准测试来对常用的几个JSON库进行了测 试，看看在解析不同大小的文件时哪个库的速度是最快的。下面我会把结
js读取json文件和读取数据库的速度的差别
缘丶蓝梦的博客
06-07 6610
    今天想直接js读取json文件会快点所以在网络上搜索如何读取本地的json文件结果找到了下边的这样 var Ajax = function () { $.getJSON ("js/userinfo.txt", function (data) { $.each (data, function (i, ite...
JavaScript 字符串匹配性能比较
starstarstone的专栏
12-19 2539
在JavaScript中进行字符串的匹配有几种方法，一种是用indexOf函数匹配 子符串，它的参数是一个子字符串substr和一个String对象内开始查找的索引starIndex，当有匹配的字符时返回String对象内第一次 出现字符的位置，另一种方法就是采用正则表达式，JavaScript中正则表达式是通过RegExp类实现的。<br />    因为需要，我们需要用一些关键词与网页的内容进行匹配，看有哪些关键词与文中内容匹配上了，由于关键词的数目较多，因而对于这些关键词与文中内容的匹配的 效率的要求
简单快速的让你的json解析速度快上加快
SimpleSmile_5177
10-25 4921
背景 最近小编在做公司的一个需求。要求是把系统内的一些大型文本文件上传到第三方那里，而且第三方要求的交互数据的方式是采用post请求发送json串的形式进行的。 问题 做到中途才发现问题，由于单个文本都有一两兆的大小，一次请求要传四五个文件，这些文件内容和其它要传输的参数加起来就有七八兆了。 当时我是用的最常用的json解析的方法，就是下图所用的jar里面的方法。   现在，我做个...
javascript解析json字符串
06-28
### 回答1： JavaScript可以使用内置的JSON对象来解析JSON字符串。JSON对象有两个方法：JSON.parse()和JSON.stringify()。JSON.parse()方法将JSON字符串转换为JavaScript对象，而JSON.stringify()方法将JavaScript对象转换为JSON字符串。例如： var jsonStr = '{"name":"John","age":30,"city":"New York"}'; var jsonObj = JSON.parse(jsonStr); console.log(jsonObj.name); //输出John 在这个例子中，我们首先定义了一个JSON字符串，然后使用JSON.parse()方法将其转换为JavaScript对象。最后，我们访问了对象的name属性并将其输出到控制台。 需要注意的是，JSON字符串必须符合JSON格式，否则解析会失败。例如，如果JSON字符串中有未加引号的属性名或单引号而不是双引号，解析将失败。 ### 回答2： JSON全称是JavaScript Object Notation，是一种轻巧的数据交换格式。JSON中的数据结构类似于JavaScript对象，因此JavaScript可以方便地解析JSON字符串。 在JavaScript中，可以使用eval()函数来解析JSON字符串。eval()函数将一个字符串当作JavaScript代码执行并返回结果。因此，我们可以使用eval()函数将JSON字符串转换为JavaScript对象，从而完成解析。 但是eval()函数存在一些安全问题，因为它会执行输入的任何JavaScript代码。如果JSON字符串来自不受信任的来源，那么可能包含恶意代码，会导致安全漏洞。因此，eval()函数不是解析JSON字符串的最佳方法。 现代浏览器提供了JSON.parse()方法来解析JSON字符串。JSON.parse()可以将JSON字符串转换为JavaScript对象，而且对于不合法的JSON格式会抛出异常以及其他一些问题，例如，JSON字符串内部的单引号、指数表示法和特定值（如undefined）可能无法在JSON中表示，需要进行特殊处理。 JSON.parse(str, reviver)函数可以接收一个reviver参数，可以用来转换解析出来的结果。reviver是一个函数，它接收两个参数，一个是属性名，另一个是属性值。当JSON.parse()解析出属性值后，就会调用reviver函数，这样就可以在这个函数内部对这个属性进行处理。 在代码中，如果我们有一个JSON字符串，我们可以使用JSON.parse()来解析它。例如： var jsonString = '{"name": "John", "age": 30, "city": "New York"}'; var jsonObj = JSON.parse(jsonString); console.log(jsonObj.name); // 输出 "John" 解析后的jsonObj就是一个JavaScript对象，我们可以直接访问其中的属性。 总结来说，JavaScript可以使用eval()函数或JSON.parse()方法来解析JSON字符串，但是安全考虑应该优先选择使用JSON.parse()方法。JSON.parse()方法还可以使用reviver参数来对解析出的结果进行转换和处理。 ### 回答3： 在JavaScript中，解析JSON字符串是常见的操作。JSON是JavaScript对象表示法的缩写，它是一种轻量级的数据交换格式。它提供了一种简单的方式来描述复杂的数据结构，包括数组和对象。 JavaScript内置了一个解析JSON字符串的函数`JSON.parse()`。此函数可以将JSON字符串转换为JavaScript对象，使开发者能够轻松地操作这些数据。 例如，如果我们有以下JSON字符串： ```javascript var jsonString = '{"name": "Tom", "age": 21, "gender": "male"}'; ``` 我们可以使用`JSON.parse()`来将其解析成一个对象： ```javascript var json = JSON.parse(jsonString); console.log(json.name); //输出 "Tom" console.log(json.age); //输出 21 console.log(json.gender); //输出 "male" ``` 除了从字符串解析JSON外，我们还可以使用`JSON.stringify()`函数将JavaScript对象转换为JSON字符串。例如，如果我们有以下JavaScript对象： ```javascript var obj = { name: "Tom", age: 21, gender: "male" }; ``` 我们可以使用`JSON.stringify()`将其转换为JSON字符串： ```javascript var jsonString = JSON.stringify(obj); console.log(jsonString); //输出 '{"name":"Tom","age":21,"gender":"male"}' ``` 在处理JSON字符串时，我们需要注意一些安全问题。首先，我们应该始终验证输入的JSON字符串是否有效。这可以通过尝试解析JSON字符串并检查是否发生了解析错误来实现。另外，我们还应该注意JSON字符串中的潜在安全漏洞，如JSON注入攻击。在通过用户输入的JSON字符串进行操作时，我们需要确保输入不包含恶意代码或攻击脚本。 总之，在JavaScript中解析JSON字符串是非常重要的，它使得我们能够使用和交换复杂的数据结构。通过`JSON.parse()`和`JSON.stringify()`函数，我们可以轻松地将JSON数据转换为JavaScript对象或字符串，并进行操作和传输。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值