http://www.flickr.com/photos/jasonprini/4104210048/

스티브 사우더스씨가 브라우저의 이상한 동작에 대한 글을 작성했습니다. 성능에 관련된 내용인데, 간략한 내용은 다음과 같습니다.

스키마가 없으면 두 번 다운로드
인터넷 익스플로러 7과 8 버전은 http 프로토콜이 빠져있으면 스타일 시트를 두 번 다운로드 합니다. 가끔 "//stevesouders.com/images/book-84x110.jpg" 과 같이 사용하는 경우는 봤는데, 이 경우는 계속 주의해야 할 것 같습니다.

document.write 스크립트가 다운로드 정지의 원인(파이어폭스)
파이어폭스에서는 docuemnt.write를 사용한 스크립트를 읽어들이면 다른 다운로드를 정지시킵니다. 안타까운 사실이지만, document.write는 이미 만들어졌습니다. 이 문제는 페이지 컨텐트에 document.write를 이용해서 광고를 삽입하려고 할 때 수천억배쯤 더 나빠집니다. 대충 이런 식으로 작성하죠.
[code:js]
document.write('<script src="http://www.adnetwork.com/main.js"><\/script>');
다행히 대부분의 최신 브라우저들은 document.write로 추가된 스크립트까지 병렬로 읽어들입니다. 그러나, 몇 주전 파이어폭스 3.6에서 광고를 삽입할 때 이상한 중단 현상을 발견하고, 추적해보았더니 document.write로 추가된 스크립트가 문제였습니다.
document.write 스크립트 테스트 페이지에서 이 문제점을 보여주고 있습니다. 이 페이지에는 4개의 스크립트가 있는데, 첫번째와 두번째 스크립트는 document.write를 사용해 추가되었습니다. 세번째와 네번째 스크립트는 일반적인 방법(HTML과 SCRIPT SRC)을 사용해서 추가했습니다. 그리고 모든 스크립트는 4초가 걸려야 다운로드 할 수 있도록 했습니다. IE8, 크롬4, 사파리4, 오페라 10.10은 페이지를 전부 다운로드 하는데 ~4초가 걸렸습니다. 모든 스크립트는 document.write까지 포함해서 병렬로 처리되었습니다. 반면 파이어폭스에서는 페이지를 전부 다운로드 하는데 12초가 걸렸습니다(2.0, 3.0, 3.6에서 테스트). 첫번째 document.write 스크립트는 1초부터 4초까지 걸렸고, 두번째 document.write 스크립트에 5초부터 8초까지 걸렸습니다. 그리고 나머지 두 개의 일반적인 스크립트를 9초부터 12초까지 다운로드 했습니다.

media=print 스타일시트
인터넷 익스플로러에서는 media="print"를 사용한 스타일시트가 렌더링을 정지시킵니다.
저는 웹브라우저가 현재 사용중이지 않은 미디어 타입의 스타일시트를 건너뛰지 않고 다운로드한다는 사실에 놀랐습니다. 몇몇 웹 개발자들에게 물어보았지만 아무도 이런 동작에 대한 적당한 이유를 대지 못하더군요. 또한 여러분은 media="print" 타입의 스타일시트라 하더라도 Page Speed나 YSlow의 추천에 따라 문서 HEAD에 스타일시트를 두려고 할 것입니다.

동적인 스타일시트
IE에서는 DHTML과 setTimeout을 사용해서 스타일시트를 읽어들이면 렌더링이 멈추는 것을 방지할 수 있습니다. 몇 주전에 유명한 위젯을 만든 회사와 회의를 했습니다. 위젯이 메인 페이지에 주는 영향을 줄이기 위해 그들이 사용한 기술이 바로 다음과 같이 스타일시트를 동적으로 불러들이는 것이었습니다.
[code:js] var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = '/main.css'; document.getElementsByTagName('head')[0].appendChild(link);
과거에는 다운로드 중단을 피하기 위해 스크립트를 동적으로 로딩하는 것에만 주의를 기울였습니다. 스타일시트를 동적으로 읽어들일 생각은 미처 하지 못했었죠. 스타일시트로 오면 다운로드 중단은 문제가 되지 않습니다. 스타일시트는 다운로드를 멈추게 하지 않습니다(파이어폭스 2.0는 예외). 스타일시트 다운로드에서 걱정스러운 부분은 스타일시트를 모두 다운로드 하기 전까지 렌더링을 멈추는 IE의 특성입니다. 다른 브라우저에서는 스타일이 적용되지 않은 컨텐트가 잠깐 나왔다가 사라지는 현상(Flash Of Unstyled Content, FOUC)이 생길 것입니다.

배경이미지 예측
크롬과 사파리는 스타일시트가 전부 준비되기 전이라도 배경 이미지의 다운로드를 시작합니다. 배경 이미지 스타일이 재정의 되는 경우라면 쓸데없는 다운로드가 늘어나는 셈입니다.
직장 동료인 스티브 램이 이런 동작을 저에게 알려주었는데, 이 얘기를 들었을 때 제가 처음 했던 말은 "완전 낭비잖아!" 였습니다. 개인적으로 프리페칭(prefetching)을 좋아하기는 하지만, 대부분의 프리페칭 기능은 너무 공격적이어서 크게 좋아하지 않습니다. 사용하지 않아도 될 다운로드 리소스를 소모하는 일이 잦기 때문입니다. 이 얘기를 처음 들은 이후에 조금 더 생각해봤습니다. 예측된 배경 이미지의 낭비는 얼마나 자주 일어날까? 검색해봤더니 유명 웹 사이트에서는 재정의된 배경 이미지 스타일이 없더군요. 하나도요. 그런 페이지가 하나도 없다고 말할 수는 없겠지만, 매우 이례적인 경우인 것만은 확실합니다.
다르게 생각하면 이러한 배경 이미지 예측 다운로드는 사용자가 인지하는 페이지 속도와 성능을 개선시킬 것입니다.

from Souders blast off 5 in a row
Posted by 행복한고니 트랙백 1 : 댓글 3