XML을 OBJECT로 만들어내는 코드가 IE에서 점차 느려집니다. 어떻게 해야 할까요?
글쓴이: 이한길 / 작성시간: 수, 2006/08/09 - 6:17오후
얼마전에 질문을 올렸습니다.
자바스크립트가 들어간 페이지가 IE에서 점차 엄청 느려진다구요..
그 원인이 되는 부분을 알게 되었습니다.
AJAX로 XML데이터를 받아와서 OBJECT로 만드는데..
XML데이터를 OBJECT에 적절히 저장하는 과정이 계속 느려지는 것이었습니다.
복잡하게 변환하는 것도 아니고 속성도 없이 단지 요소만 가지고 하는데도 그렇네요.
이를테면
<MEMBERS> <MEMBER> <NAME>Han-gil Lee</NAME> <TEL>000-000-0000</TEL> </MEMBER> <MEMBER> <NAME>Han-gil Park</NAME> <TEL>111-111-1111</TEL> </MEMBER> </MEMBERS>
라는 xml을 AJAX로 받아와서 다음처럼 처리하면
$result = xmlParser.parse(req.responseXML)
"$result"는 다음처럼 됩니다.(JSON으로 표시했습니다)
{"MEMBERS": {"MEMBER":{"NAME":"Han-gil Lee","NAME_list":["Han-gil Lee"],"TEL":"000-000-0000","TEL_list":["000-000-0000"]}, "MEMBER_list":[ {"NAME":"Han-gil Lee","NAME_list":["Han-gil Lee"],"TEL":"000-000-0000","TEL_list":["000-000-0000"]}, {"NAME":"Han-gil Park","NAME_list":["Han-gil Park"],"TEL":"111-111-1111","TEL_list":["111-111-1111"]}]}, "MEMBERS_list":[ {"MEMBER":{"NAME":"Han-gil Lee","NAME_list":["Han-gil Lee"],"TEL":"000-000-0000","TEL_list":["000-000-0000"]}, "MEMBER_list":[ {"NAME":"Han-gil Lee","NAME_list":["Han-gil Lee"],"TEL":"000-000-0000","TEL_list":["000-000-0000"]}, {"NAME":"Han-gil Park","NAME_list":["Han-gil Park"],"TEL":"111-111-1111","TEL_list":["111-111-1111"]} ]} ] }
이렇게 만들어주는 코드입니다.
좀 복잡해보이긴 한데 일단 객체에 요소 이름에 해당 값으로 프로퍼티를 만들고
같은 이름을 가진 요소가 여럿 있을 수 있기 때문에 배열에 차례로 집어 넣습니다.
이렇게 하면 객체가 복잡해지지만 사용하기는 편리합니다
그런데 이렇게 만들어주는 코드가 파이어팍스에서는 잘 돌아갑니다.
아무리 페이지를 다시 실행해도 여러번 실행해도 잘 돌아갑니다.
그런데 IE에서는 실행할수록 속도가 느려집니다.
이렇게 만들어주는 코드는 아래와 같습니다.
실력이 워낙 그래서 좀 올리기가 뭐 했지만 한번 살펴봐주시면 좋겠습니다.
왜 저 코드가 IE에서 느려지는지 도무지 모르겠어서요..
XMLDomParser.prototype = { parse : function(xmlDomData) { return this.scanner(xmlDomData.childNodes) }, scanner : function(childs) { var pool = new Object var count = 0 for(var i=0; i<childs.length; i++) { var nodeName, nodeValue nodeName = childs[i].nodeName if(nodeName=="#text") continue nodeValue = this.scanner(childs[i].childNodes) //이 요소가 처음 발견되었는가? //이 부분이 속도가 늦어지게 하는 주범같음 //객체에 프로퍼티를 만드는것,배열에 값을 넣는 것 if(typeof(pool[nodeName])=='undefined') { pool[nodeName] = nodeValue pool[nodeName + "_list"] = new Array } pool[nodeName + "_list"].push(nodeValue) count++ } //하위 요소가 없었다면 값을 리턴 if(count==0) return this.getElementText(childs) else return pool }, getElementText : function(elem) { try { return elem[0].nodeValue } catch(e) { return "" } } }
Forums:
scanner에서 함수에서
scanner 함수에서 childs.length를 여러번 사용해서 느린 것 같군요. 다음과 같이 바꾸시길 추천합니다. (아 그리고 참고로 child의 복수형은 children입니다. =3)
관심을 갖고 봐
관심을 갖고 봐 주셔서 고맙습니다..
문제는 단순히 느린것이 아니라 점점 느려지는 것입니다.
아무래도 저렇게 한 코드가 낫긴 하겠습니다만 문제는 여전하군요..
----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.xo.st
http://hangulee.egloos.com/
----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.springnote.com
http://hangulee.egloos.com
이것때문에 json을
이것때문에 json을 주로 쓰는지도 모르겠습니다.
XML을 사용할 때 그냥 사용하는 것은 문제가 없지만 저처럼..
다루기 편리하게 바꾸어 사용하려고 하다보면 위와같은 문제가 생깁니다..
아무래도 프로퍼티를 동적으로 만들거나 배열에 값을 넣는 것이 문제인것 같은데..
JSON은 그럴 필요도 없이 바로 .. 가능하잖아요..
더구나 라이브러리를 사용하면 php같은 경우 배열을 바로 json으로 바꿔줍니다..
json을 전혀 몰라도 알아서 잘 됩니다.
(다른 랭귀지들도 관련 라이브러리가 다들 있는 것 같네요)
아무튼 몇몇 중요한 부분은 json으로 바꾸든지 해야 할 것 같습니다.
또 한번 ie가 미워집니다...
----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.xo.st
http://hangulee.egloos.com/
----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.springnote.com
http://hangulee.egloos.com
댓글 달기