XML을 OBJECT로 만들어내는 코드가 IE에서 점차 느려집니다. 어떻게 해야 할까요?

이한길의 이미지

얼마전에 질문을 올렸습니다.
자바스크립트가 들어간 페이지가 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 ""
		}
	}
}
7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

scanner 함수에서 childs.length를 여러번 사용해서 느린 것 같군요. 다음과 같이 바꾸시길 추천합니다. (아 그리고 참고로 child의 복수형은 children입니다. =3)

len = childs.length;
for(var i=0; i<len; i++) {

이한길의 이미지

관심을 갖고 봐 주셔서 고맙습니다..

문제는 단순히 느린것이 아니라 점점 느려지는 것입니다.
아무래도 저렇게 한 코드가 낫긴 하겠습니다만 문제는 여전하군요..

----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.xo.st
http://hangulee.egloos.com/

----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.springnote.com
http://hangulee.egloos.com

이한길의 이미지

이것때문에 json을 주로 쓰는지도 모르겠습니다.
XML을 사용할 때 그냥 사용하는 것은 문제가 없지만 저처럼..
다루기 편리하게 바꾸어 사용하려고 하다보면 위와같은 문제가 생깁니다..
아무래도 프로퍼티를 동적으로 만들거나 배열에 값을 넣는 것이 문제인것 같은데..
JSON은 그럴 필요도 없이 바로 .. 가능하잖아요..

더구나 라이브러리를 사용하면 php같은 경우 배열을 바로 json으로 바꿔줍니다..
json을 전혀 몰라도 알아서 잘 됩니다.

(다른 랭귀지들도 관련 라이브러리가 다들 있는 것 같네요)

아무튼 몇몇 중요한 부분은 json으로 바꾸든지 해야 할 것 같습니다.

또 한번 ie가 미워집니다...

----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.xo.st
http://hangulee.egloos.com/

----
먼저 알게 된 것을 알려주는 것은 즐거운 일이다!
http://hangulee.springnote.com
http://hangulee.egloos.com

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.