IE에서 innerHTML 사용시 주의해야할 점

2009/06/26 17:33
일단, 발행하기 전에 정리부터 하자..
예제는 나중에 정리하고.. 생각나는대로 써보면,..

1. DOM 노드 캐싱
DOM을 캐싱할때는,.. 캐싱하려는 노드를 cloneNode(true)로 떠서 캐시하자..
그렇치 않으면, IE에서는 innerHTML로 해당 노드를 날렸을때,. 캐시한 노드까지 날라간다.
반면, IE외의 다른 브라우저에서는 innerHTML로 해당 노드를 날렸을때..
해당 노드만 날라가고, 캐시한 노드는 그대로 있다.

2. 메모리 누수
모든 브라우저가 innerHTML로 엘리먼트를 교체하면, 엘리먼트가 걸려있는 이벤트 핸들러들이
날아가 버린다. 보다 정확한 의미는 참조를 잃어버린다!!
때문에 참조를 잃어버린 이벤트 핸들러들은 영영 해제할 길이 없어 메모리 누수가 생긴다.

따라서, 엘리먼트 교체를 해야할 경우엔, 이벤트 핸들러를 먼저 제거해주거나..
앞에서 얘기한 노드를 캐싱하거나..
아니면, HTML로 날릴만한 엘리먼트엔 이벤트 핸들러를 걸지말고, 그 상위 노드에 걸어서
버블링 처리를 해라~!!

3. HTML 렌더링
HTML을 innerHTML로 재할당을 할경우, 브라우저는 재할당한 부분만 랜더링을 다시하게 된다.
이때, 구식브라우저(꼬진브라우저, 느린브라우저)인 IE6에서는 랜더링 할때, 생각보다 속도가 느리다.
그래서 아래와 같이 사용하게 되면,..
node.innerHTML = "<div>....중간생략 복잡한 디비전 태그 교체...</div>"
doSomethingHere();
doSomethingHere() 함수 안에서 새로 랜더링 되는 엘리먼트의 width나 height 등을 가지고 뭔 짓꺼리를 하게 되면,
IE6에서는 htmlfile 에러는 내뱉는다.

이유는 앞서 설명했듯이 랜더링 속도가 느려서 발생하는 문제로...
로드 된후, 실행시 까지 약간의 딜레이를 주거나,
인터벌울 돌려서 렌더링이 됐는지 체크를 한다.

난 걍 랜더링시 문제가 될경우에 한에서만 이렇게 쓴다.
el.innerHTML = sTpl;
var oInstance = this;
setTimeout(function(){
          oInstance._initialize();
}, 100);


불꽃남자 IT , , ,

2009/06/26 17:33 2009/06/26 17:33

네이버 블로그를 다시 해보렵니다.

2009/06/26 01:49
오늘 문득,.. 그동안 방치해놓고 있던..
내 네이버 블로그를 들어가봤다.

음... 사실 그닥 네이버 블로그를 쓸 이유는 없었고,..
내가 한때,.. 이글루스에서 처음 블로그를 시작하고,..
한창 쓰다가..이글루스가 SK에 넘어가면서 부터, 에라이~ 하면서..
테터툴즈로 갈아탔다가.. 서버가 죽는 바람에..
잠깐 네이버 블로그와 티스토리를 만들었었다..
(지금 티스토리는 비번을 잊어먹어서.. 그냥 버렸다.. ㅋㅋ)

그 뒤로는 거의 테스트 용으로 사용했는데..
오늘 다시 한번 보게 됐다..
네이버씨의 질문도 답하고,.. 해피빈 콩도 하나 얻었다..

요즘은 취미삼아 해피빈으로 기부를 하고 있어서..
부지런히, 블로그씨 답변을 해야지 하는 맘도 생겼다.ㅋ

어쨌거나 저쟀거나.. 오늘 나의 결론은 네이버 블로그 다시 해보련다! 이다..
그렇타고 마이크온블로그닷컴을 버리고 이사를 간다는 얘기는 아니고..

그냥 2개의 블로그를 운영하겠다는 얘기~!!
사실 오늘 같은 팀에 있는 송모군이 "고객문의"에 대한 경험담을 메일로 쏴줘서..
읽다가.. 참으로 느낀바가 많아.. 네이버 블로그를 다시 보게 됐다.

네이버 블로그 참으로 편하겠꾸나...
여기서 편하겠꾸나는.. 라는 표현은 내가 편하다는 얘기가 절대 아니다..

몇달전,.. 나도 고객문의를 한적이 있다..
고객PC에 원격접속을 하던 설레임을 뒤로하고,..
그때 느겼던 점은,.. 아~ 정말로 이걸 모를수도 있구나 하는 거였다!!

개발자들이 빠지기 가장 쉬운 오류들.. 내가 편하면.. 모두가 편하겠지..
내가 불편하면.. 모두가 불편하겠지..
정말이지 특정 부류를 타켓팅해서 서비스를 만들지 않는이상..
절대 다수를 고객으로 서비스해야 한다면,.. 고객의 눈높이는 절대적으로 낮다라는 것을..
잊지 말아야 하겠다.

그래서,.. 내 네이버 블로그는 고객과의 대화를 위해 쓰겠다!
이겁니다.. 헤헤

이상 끝~!!

불꽃남자 생각-I Think ,

2009/06/26 01:49 2009/06/26 01:49