브라우저별 iframe 리소스 다운로드의 차이 performance
2010.06.22 13:56 Edit
오늘 우연치 않게 maxzero.kr을 HttpWatch로 IE에서 확인을 해보았습니다.
다른 부분은 예상했던 데로 진행이 되었지만 한가지 궁금한 부분이 생기더군요
바로 "Iframe이 페이지 랜더링 및 다운로드에 미치는 영향은 무엇이 있을까?" 였죠.
그래서 간단한 실험을 진행 하였죠
아래는 그 실험을 실행한 간단한 코드 입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Test</title> <link rel="stylesheet" type="text/css" href="외부CSS-1"> <link rel="stylesheet" type="text/css" href="외부CSS-2"> </head> <body> <div> 아....오나전 기대되네? <img src="이미지1"> <img src="이미지2"> <iframe src="iframe_test.html"></iframe> <img src="이미지3"> <iframe src="iframe_test2.html"></iframe> </div> </body> </html>
각 Iframe 내부에는 이미지 1개와 외부 CSS가 1개씩 추가 되어 있습니다.
그리고 아래는 실험시 참고했던 Tool과 브라우저 정보입니다.
- IE8 (pagespeed)
- FireFox3.6(pagespeed)
- chrome5.0(개발자도구)
- Opera10.53(개발자도구)
- * Safari는 간헐적으로 다운로드 순서가 변경되어 노출되어 이번 실험에서 제외하였습니다.
IE8
리소스 다운로드 순서는 아래와 같습니다.
- parent HTML
- 외부CSS - 1
- 외부CSS - 2
- 이미지1
- 이미지2
- 이미지3
- ifraem_test.html
- ifraem_test2.html
- ifraem_test.html의 외부 CSS
- ifraem_test.html의 외부 이미지
- ifraem_test2.html의 외부 CSS
- ifraem_test2.html의 외부 이미지
FireFox
리소스 다운로드 순서는 아래와 같습니다.
- parent HTML
- 외부CSS - 1
- 외부CSS - 2
- 이미지1
- 이미지2
- iframe_test.html
- 이미지3
- iframe_test2.html
- iframe_test.html의 외부 CSS
- iframe_test.html의 외부 이미지
- iframe_test2.html의 외부 CSS
- iframe_test2.html의 외부 이미지
chrome, Opera
리소스 다운로드 순서는 아래와 같습니다.
- parent HTML
- 외부CSS -1
- 외부CSS - 2
- iframe_test.html
- iframe_test2.html
- iframe_test.html의 외부 CSS
- iframe_test2.html의 외부 CSS
- parent와 child html에 삽입 되어있는 이미지
각 브라우저 마다 iframe이 삽입 되어 있을 경우 리소스 다운로드 순서는 위와 같이 약간의 차이를 두고 있었습니다.
Javascript가 삽입되고 동적인 UI작업들이 추가되면 위의 리소스 다운로드 순서에 영향을 줄 수 있습니다.
오늘도 즐거운 하루 되세요~^^
Trackbacks 1
-
맥스제로이쉐뀌의 생각
브라우저별 iframe 리소스 다운로드의 차이