5개중 두번째 – FireFox 에서는 document.write로 생성한 script를 지연시키다.(5b document.write scripts block in Firefox)

이건 지난 몇 주 동안 발생한 몇몇 브라우저들의 문제점에 대한 5개의 간단한 포스팅 중 두번째 포스팅 입니다.

ducument.write를 사용하여 로드된 script를 FireFox에서는 지연시킵니다..

불행히도 document.write는 발명되었습니다.

bzillion times 출판사 웹 사이트의 광고의 코드를 document.write script를 사용하여 삽입하는 문제가 발생하였습니다.

아래는 그 코드 입니다.

document.write('');

다행히도 요즘 최신 브라우저들은 대부분 document.write로 포함되는 script를 병렬방식으로 로딩 하고 있습니다.

그런데 얼마전 FireFox3.6에서 페이지내의 광고를 차단하는 이상한 행동을 보여 document.write를 사용하여 추가한 script를 확인해 보았습니다.

이 document.write 테스트 페이지에서 그 문제를 보여주고 있습니다. 여기에 4개의 script가 있습니다.

첫번째와 두번째는 document.write를 사용하여 script를 삽입하였습니다. 세번째와 네번째는 보통의 방식(external방식이나 embed방식)으로 로드 하였습니다.

전체 4개의 script들은 다운로드 하는데 4초 정도 걸리도록 만들었습니다. IE8, 크롬4, 사파리4 그리고 오페라10.10은 모두 로드 하는데 4초 이하가 걸립니다. 모든 script와 document.write를 사용하여 삽입한 script까지도 병렬로 로드하고 있습니다.

FireFox에서는 페이지를 로드하는데 약 12초 정도 걸립니다.(2.0,3.0 그리고 3.6에서 test해봤습니다.) 첫번째 ducument.wriet script는 1초부터 4초까지 로드되고, 두번째 ducument.write script는 5초부터 8초까지 로드됩니다. 그리고 마지막 두개의 script는 9초에서 12초 까지 병렬로 로드 됩니다.

이 ducument.write 문제는 잘 알려져 있으며 몇몇 제3의 단체(Google Analytics 포함)에서는 code의 document.write를 바꾸어 가고 있습니다.

하지만 대부분은 제3단체 들은 아직까지 회사 페이지 내부에서 document.write를 사용하여 code를 삽입하고 있습니다. 이것이 document.write를 자제 해야 하는 또 하나의 이유 입니다.

이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.