Mozilla 한국 커뮤니티

궁금합니다...

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

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

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

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

혼란스럽네여...

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

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

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

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

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

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

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 대입을 한번만 하길 권하고 있습니다.

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

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

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

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

이런 글도 있네요

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

wkpark 씀:이런 글도 있네요

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

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

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

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

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