innerHtml은 지양해야 하는건가요??

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
댓글 게시
bumworld
게시물: 18
참여됨: 2005 05 23 12:39 44
연락:

innerHtml은 지양해야 하는건가요??

게시물 작성자 bumworld » 2006 11 17 10:37 45

궁금합니다...

제가 알기로는 innerHtml은 표준이 아니라고 들었는데..

innerHtml을 사용하는건 안좋은건가요?

prototype.js를 사용해 보고 있는데 샘플에 innerHtml을 사용하는 코드가 있어서요.

표준이 아니라 되도록이면 안쓸려고 하는데 prototype의 샘플에 나오니까

혼란스럽네여...
달아 달아 밝은 달아~

유저 아바타
hyeonseok
해커
해커
게시물: 690
참여됨: 2004 08 11 22:14 59
연락:

게시물 작성자 hyeonseok » 2006 11 17 11:13 05

성능과도 관련이 있습니다. DOM으로 노드 만들어서 붙이는 것 보다 innerHTML로 넣는 것이 더 빠릅니다. 그리고 innerHTML이 쓰기도 더 편하고요. 그리고 innerTEXT같이 브라우저 호환성 문제가 심각하지도 않고요.

논란의 여지가 약간 있는 것이 사실이지만 현실적으로 볼때 innerHTML을 무조건 사용하지 말아야 한다고 하기는 힘듭니다. (저도 가끔 써요.)

빛알갱이
해커
해커
게시물: 1146
참여됨: 2004 01 15 20:06 36

게시물 작성자 빛알갱이 » 2006 11 17 14:06 45

hyeonseok 씀:성능과도 관련이 있습니다. DOM으로 노드 만들어서 붙이는 것 보다 innerHTML로 넣는 것이 더 빠릅니다.
innerHTML이 속도가 더 빠르다는 것은 직관적으로 좀 이해하기 힘듭니다. DOM을 지원하는 브라우저라면 innerHTML로 넣더라도 내부적으로 결국 DOM으로 전환해서 처리할 것 같거든요. 그렇다면, 오히려 더 시간이 오래 걸릴 것 같고요. 하긴, 영향을 주는 다른 요소가 많아서 (예를 들어, Javascript VM의 속도) 정말 측정을 해 보지 않는 한 속단할 수 없겠네요.

혹시. 주요 브라우저에서 (몇 가지 다른 조건으로) 실측을 해 보신 적이 있으신지요?

PassionLim
게시물: 3
참여됨: 2006 11 17 23:59 39
연락:

게시물 작성자 PassionLim » 2006 11 18 00:36 02

빛알갱이 씀: 혹시. 주요 브라우저에서 (몇 가지 다른 조건으로) 실측을 해 보신 적이 있으신지요?
http://www.quirksmode.org/dom/innerhtml.html
에서 실측 자료를 보실 수 있습니다. innerHTML 이 더 빠른 이유에 대해서 정확하게 얘기하는 사이트를 찾아보진 못했네요. 관련 자료 있으신 분 있나요?

하지만 추측은 해볼 수 있을 것 같습니다. 현석님 말씀대로 렌더링과 관련된다고 생각합니다.

DOM 함수를 사용하는 경우 함수가 호출되었을 때 Layout 계산을 다시한다고 가정해볼 수 있습니다. 100번 함수가 불리면 100번 Layout 계산이 되는 것이죠. 그에 비해 innerHTML은 렌더링 계산이 한번만 이뤄지기 때문에 DOM 함수 호출보다 빠를 것이라고 생각합니다. 만약 innerHTML 에 값을 100번 넣는다면 그것 또한 느리겠지요. Faster DHTML in 12 Steps( ttp://msdn.microsoft.com/library/default.asp?url=/workshop/author/perf/dhtmlperf.asp )에서도 innerHTML 대입을 한번만 하길 권하고 있습니다.

hiphapis
서포터즈
서포터즈
게시물: 179
참여됨: 2005 02 25 16:03 12
위치: Heaven
연락:

게시물 작성자 hiphapis » 2006 12 01 18:45 19

PassionLim 씀:DOM 함수를 사용하는 경우 함수가 호출되었을 때 Layout 계산을 다시한다고 가정해볼 수 있습니다. 100번 함수가 불리면 100번 Layout 계산이 되는 것이죠. 그에 비해 innerHTML은 렌더링 계산이 한번만 이뤄지기 때문에 DOM 함수 호출보다 빠를 것이라고 생각합니다. 만약 innerHTML 에 값을 100번 넣는다면 그것 또한 느리겠지요. Faster DHTML in 12 Steps( ttp://msdn.microsoft.com/library/default.asp?url=/workshop/author/perf/dhtmlperf.asp )에서도 innerHTML 대입을 한번만 하길 권하고 있습니다.
저는 PassionLim님이 말씀하신것으로 알 고 있습니다.
innerHTML 같은경우는, 한번 Parse해주고 DOM Tree도 명확하게 생성이 안되는걸로 알 고 있습니다..그러므로 할 일이 적은것이지요..

하지만 Append, Create 같은 메소드를 사용하면 DOM Tree에 추가하기 때문에 할 일이 많아지고 그렇기때문에, 속도도 느려지게 되구요..

렌더링되는 순서(? 방법?)도 innerHTML과, Append, Create 전부 틀린걸로 알 고 있습니다.
그 중 innerHTML이 가장 이득이구요..

저는 그렇게 알 고 있습니다.
웹표준이 취미인 개발자
God Has Not 4Got
http://hiphapis.net

neonatas
게시물: 1
참여됨: 2005 08 02 18:53 46
연락:

게시물 작성자 neonatas » 2007 03 26 14:41 12

한번. 호출한다는 전제하에서는.. IE는 innerHTML이 빠르고, firefox는 appendChild가 빠릅니다.

impactlife
게시물: 1
참여됨: 2007 10 19 11:14 17
연락:

게시물 작성자 impactlife » 2007 10 19 11:20 44

제가 15000줄에 가까운 javascript를 개발할때 DOM 형식으로 했다가 속도가 느려 innerHTML 로 모조리 바꿔본적이 있는데요 체감 속도만 따져도 1.5배 정도 빨라진걸 느낄 수 있었습니다. 어디서 본 적있는 개발자 지침서에 각각의 element를 제어할 필요가 없으면 innerHTML 로 하는게 좋다는 말도 있었습니다. 비록 웹표준에는 들지 않지만 효용성때문에 대부분의 브라우저가 지원하는걸로 알고 있습니다. 아무튼 속도에는 확실히 빠르다고 장담합니다.


박민권
해커
해커
게시물: 724
참여됨: 2005 01 31 22:33 55
위치: 대한민국
연락:

Re: replaceHTML vi innerH

게시물 작성자 박민권 » 2007 12 17 17:47 45

wkpark 씀:이런 글도 있네요

http://ajaxian.com/archives/replacehtml ... s-you-down
A안에 내용을 바꾼다면 A와 동일하되 내용(자식 엘레멘트)가 없는 A`를 만들고

A`에 새로운 내용을 채워넣고 ( A`.innerHTML = '바꿀내용' )

그리고는 A와 A`를 교체하는 것이군요.

이게 이렇게 큰 차이를 낸다니 다음에 직접 테스트해보고 진짜 그렇다면 사용해봐야겠습니다. 좋은 정보 감사드립니다. :lol:

댓글 게시

누군가 접속

유저가 이 포럼을 탐색중: 가입된 유저 없음 그리고 1 손님