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

[bumworld]

궁금합니다...

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

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

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

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

혼란스럽네여...

[hyeonseok]

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

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

[빛알갱이]

성능과도 관련이 있습니다. DOM으로 노드 만들어서 붙이는 것 보다 innerHTML로 넣는 것이 더 빠릅니다.

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

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

[PassionLim]

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

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]

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이 가장 이득이구요..

저는 그렇게 알 고 있습니다.

[neonatas]

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

[impactlife]

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

[wkpark]

이런 글도 있네요

http://ajaxian.com/archives/replacehtml ... s-you-down

[박민권]

이런 글도 있네요

http://ajaxian.com/archives/replacehtml ... s-you-down

A안에 내용을 바꾼다면 A와 동일하되 내용(자식 엘레멘트)가 없는 A`를 만들고

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

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

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