JavaScript 파싱 Json string_json을 위한 성능 비교 분석 코드
- WBOY원래의
- 2016-05-16 18:39:131012검색
파싱에 사용되는 방법은 일반적으로 eval이나 new function이며, 현재 IE8과 Firefox3.1에는 네이티브 JSON 객체가 내장되어 있습니다(일정한 성능 향상이 있을 것으로 전해지고 있습니다). 그렇다면 실제로 사용할 때 이 세 가지 방법(성능 문제로 인해 JavaScript로 구현된 구문 분석은 고려되지 않음) 중에서 어떻게 선택합니까? 수많은 브라우저에 직면했을 때 어떤 방법이 최고의 성능을 발휘합니까?
1. 테스트 방법
1. 먼저 테스트 횟수와 JSON 문자열을 지정합니다.
코드 복사 코드는 다음과 같습니다.
var count = 10000, o = null, i = 0, jsonString = '{"value":{ "항목": [ {"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. 루프 분석 및 기록 시간
평가
코드 복사 코드는 다음과 같습니다.
var startTime = new Date()
for; ( i = 0; i o = eval( "(" jsonString ")" )
}
Console.output( "eval:" ( new Date() - BeginTime ) )
new 함수 for; ( i = 0; i o = eval( "(" jsonString ")" )
}
Console.output( "eval:" ( new Date() - BeginTime ) )
코드 복사 코드는 다음과 같습니다.
var startTime = new Date();
for ( i = 0; i < count; i ) {
o = new Function( "return " jsonString )();
}
Console.output( "새 함수:" ( new Date() - BeginTime ) )
네이티브 for ( i = 0; i < count; i ) {
o = new Function( "return " jsonString )();
}
Console.output( "새 함수:" ( new Date() - BeginTime ) )
코드 복사 코드는 다음과 같습니다.
if ( typeof JSON !== "undefine" ) {
var startTime = new Date ();
for ( i = 0; i < ; count; i ) {
o = JSON.parse( jsonString ) }
Console.output( "native:" ( new Date() - startTime ) );
} else {
Console .output( "native:not support!" )
2. 🎜>var startTime = new Date ();
for ( i = 0; i < ; count; i ) {
o = JSON.parse( jsonString ) }
Console.output( "native:" ( new Date() - startTime ) );
} else {
Console .output( "native:not support!" )
IE6, 7, 8, Firefox2, 3, 3.1, Chrome, Opera 및 Safari3, 4를 포함하여 현재 주류 브라우저(Maxthon 및 기타 셸로 간주되지 않음)를 선택하세요.
3. 테스트 환경
T9300 CPU 4G RAM Windows2003, IE8은 Vista 환경을 사용하고, IE7은 다른 작업 머신(2G CPU 2G RAM Windows2003)에 있다는 점을 고려하여 주요 목적은 브라우저 클라이언트의 성능을 테스트하는 것이므로 결과의 오류는 허용 가능해야 합니다.
4. 테스트 결과
*값이 작을수록 좋습니다
*배경이 녹색입니다. 현재 열은 최고 성능을 의미하고, 빨간색은 최저 성능을 의미합니다 1. Firefox2와 3은 모두 맨 아래에 있고, IE6은 IE7보다 성능이 좋고(컴퓨터 불일치와 관련이 있을 수 있음), Chrome과 Safari4는 다른 것보다 훨씬 더 나은 성능을 나타냅니다. 브라우저. 2. eval과 new Function의 성능은 서로 다른 브라우저에서 일관되지 않습니다. 일반적으로 말하면 eval이 더 좋지만, 다양한 브라우저와 더 잘 호환되기 위해 Firefox에서 new Function의 성능은 두 배입니다. browsers, 처리를 위해 JSON 구문 분석을 개체로 캡슐화합니다.
wrapper
코드 복사
코드는 다음과 같습니다. var __json = null; if ( typeof JSON !== "undefine" ) {
__json = JSON }
var 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 startTime = new Date ();
for ( i = 0; i < count; i ) {
o = JSON.parse( jsonString ) }
Console.output( "래퍼:" ( new Date( ) - 시작시간 ) )
래퍼 추가 후 결과:
객체 호출과 관련된 오버헤드로 인해 캡슐화된 JSON 객체는 별도로 호출하는 것보다 속도가 느리지만 다음을 보장할 수 있습니다. 모든 브라우저에서 사용됩니다. 귀하의 장치에 가장 적합한 방법을 사용하십시오.
5. 결론
Json 문자열을 구문 분석할 때 브라우저마다 다른 방법을 선택합니다.
IE6과 7은 eval을 사용합니다.
IE8은 기본 JSON 개체를 사용합니다.
Firefox2, 3은 new Function을 사용합니다
Safari4는 eval을 사용합니다
다른 브라우저의 eval과 new Function의 성능은 기본적으로 동일합니다
의견이 다른 경우 댓글을 달아주세요 :)
업데이트:
2009.03.23: 모든 Firefox 부가 기능을 차단한 후 테스트
Known이 Firefox에서 코드를 실행할 때 완전히 일관되지 않은 결과를 얻었으므로 이는 Firefox 플러그- 그래서 모든 플러그인을 비활성화한 후(나중에 Firebug에 의한 것으로 밝혀짐) Firefox 2, 3에서 다시 테스트해 보았습니다. 결과는 다음과 같습니다.
이것은 Firefox 자체의 성능이 이전에 테스트한 것만큼 낮지는 않으며 플러그인을 제거한 후에도 성능이 여전히 매우 좋다는 것을 보여줍니다. 그러나 Firebug와 같은 플러그인 지원이 없으면 Firefox의 매력은 크게 줄어들었습니다.
2009.03.31: 루프에서 매번 새로운 json 문자열을 사용
Oliver의 설명에 따르면 Safari4와 Chrome이 평가 결과를 캐시했기 때문에 테스트 점수가 테스트 결과는 그의 추측을 입증했습니다.
이 결과에서 우리는 Opera가 최고의 성능을 보였으며 Ie8이 그 뒤를 잇는다는 것을 알 수 있습니다.
주로 수정된 코드:
//eval 2: var BeginTime = new Date();
for ( i = 0; i < count; i ) {
o = eval("(" '{"value": {" 항목": [{"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() - startTime )
// new Function
beginTime = new Date();
for ( i = 0; i < count; i ) {
o = new Function("return " '{"value":{" 항목" : [{"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 ) );
// 기본
if ( JSON 유형 !== "undefine" ) {
beginTime = new Date()
for ( i = 0; i < count; i ) {
o = JSON. 구문 분석( '{"값":{"항목": [{"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() - startTime ) );
} else {
Console.output( "native:not support!" )
//wrapper
var __json = null; == "정의되지 않음" ) {
__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( "래퍼:" ( new Date( ) - startTime ) );
첨부: 모든 코드
var 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 startTime = new Date ();
for ( i = 0; i < count; i ) {
o = JSON.parse( jsonString ) }
Console.output( "래퍼:" ( new Date( ) - 시작시간 ) )
래퍼 추가 후 결과:
객체 호출과 관련된 오버헤드로 인해 캡슐화된 JSON 객체는 별도로 호출하는 것보다 속도가 느리지만 다음을 보장할 수 있습니다. 모든 브라우저에서 사용됩니다. 귀하의 장치에 가장 적합한 방법을 사용하십시오.
5. 결론
Json 문자열을 구문 분석할 때 브라우저마다 다른 방법을 선택합니다.
IE6과 7은 eval을 사용합니다.
IE8은 기본 JSON 개체를 사용합니다.
Firefox2, 3은 new Function을 사용합니다
Safari4는 eval을 사용합니다
다른 브라우저의 eval과 new Function의 성능은 기본적으로 동일합니다
의견이 다른 경우 댓글을 달아주세요 :)
업데이트:
2009.03.23: 모든 Firefox 부가 기능을 차단한 후 테스트
Known이 Firefox에서 코드를 실행할 때 완전히 일관되지 않은 결과를 얻었으므로 이는 Firefox 플러그- 그래서 모든 플러그인을 비활성화한 후(나중에 Firebug에 의한 것으로 밝혀짐) Firefox 2, 3에서 다시 테스트해 보았습니다. 결과는 다음과 같습니다.
이것은 Firefox 자체의 성능이 이전에 테스트한 것만큼 낮지는 않으며 플러그인을 제거한 후에도 성능이 여전히 매우 좋다는 것을 보여줍니다. 그러나 Firebug와 같은 플러그인 지원이 없으면 Firefox의 매력은 크게 줄어들었습니다.
2009.03.31: 루프에서 매번 새로운 json 문자열을 사용
Oliver의 설명에 따르면 Safari4와 Chrome이 평가 결과를 캐시했기 때문에 테스트 점수가 테스트 결과는 그의 추측을 입증했습니다.
이 결과에서 우리는 Opera가 최고의 성능을 보였으며 Ie8이 그 뒤를 잇는다는 것을 알 수 있습니다.
주로 수정된 코드:
코드 복사 코드는 다음과 같습니다.
//eval 2: var BeginTime = new Date();
for ( i = 0; i < count; i ) {
o = eval("(" '{"value": {" 항목": [{"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() - startTime )
// new Function
beginTime = new Date();
for ( i = 0; i < count; i ) {
o = new Function("return " '{"value":{" 항목" : [{"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 ) );
// 기본
if ( JSON 유형 !== "undefine" ) {
beginTime = new Date()
for ( i = 0; i < count; i ) {
o = JSON. 구문 분석( '{"값":{"항목": [{"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() - startTime ) );
} else {
Console.output( "native:not support!" )
//wrapper
var __json = null; == "정의되지 않음" ) {
__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( "래퍼:" ( new Date( ) - startTime ) );
첨부: 모든 코드