iframe 의 특징

일.iframe 은 오버헤드가 가장 높은 DOM 요소

iframe 생성의 오버헤드 (시간 소비) 는 다른 유형의 DOM 요소 생성보다 12 자릿수 높습니다 (10 배100 배 느림)

이.iframe 은 onload 이벤트를 블록

onload 이벤트가 트리거되면, 브라우저는 비지 인디케이터 (아이콘, 상태바, 커서, 프로그레스 바) 를 정지하고, 사용자에게 페이지가 준비 완료되었음을 피드백합니다. onload 가 신속하게 트리거되면, 사용자는 페이지 로딩이 빠르다고 느낍니다

iframe 은 부모 페이지의 onload 이벤트를 블록합니다. 예를 들어:

• iframe 이 요청한 페이지가 10 초 후에 반환됨

• iframe 이 요청한 페이지 중의 1 장의 이미지가 10 초 후에 응답 콘텐츠를 반환함

• iframe 이 요청한 페이지에 외부 스크립트가 포함되어 10 초 후에 로딩 완료됨

• iframe 이 요청한 페이지에 포함된 스타일시트가 10 초 후에 로딩 완료됨

위任何一种 상황에서도, iframe 이所在한 페이지의 onload 가 10 초 지연됩니다

js 로 동적으로 iframe 의 src 를 설정함으로써, 이 문제를 회피할 수 있습니다. 예를 들어:

<!-- <iframe id="myIframe" src="b.html" frameborder="2" width="400" height="300"></iframe> -->
<iframe id="myIframe" frameborder="2" width="400" height="300"></iframe>

<script>
var url = 'b.html';
window.frames['myIframe'].src = url;
// 在更老的浏览器中，IE6、7 之类的
// 需要把设置 src 放在 onload 事件之后，如下：
// window.onload = function() {
//     var url = 'b.html';
//     window.frames['myIframe'].src = url;
// }
</script>

이렇게 하면 iframe 은 onload 이벤트를 지연시키지 않습니다. 페이지에埋め込まれた iframe광고 에 대해 이 방식을 채택하면, 응답 속도를 명확하게 향상할 수 있습니다

P.S. 埋め込み 광고에 대해서는, iframe 보다 div 를 사용할 것을 권장합니다. div 의 id 는 스크립트의 url 에 포함할 수 있으며, 광고의 js 는 div 의 innerHTML 속성을 설정하여 광고를 페이지에 삽입합니다

삼.iframe 은 부모 페이지와 연결 풀을 공유

브라우저는 병렬 다운로드를 지원하지만, 연결 수 제한이 있습니다. IE6 와 7 은 동시에 2 개의 연결만 여는 것을 지원

iframe 은 부모 페이지와 연결 풀을 공유하며, iframe 을 사용해도연결 수의 제한을 돌파할 수 없습니다

게다가, 브라우저의 여러 탭 간도 연결 풀을 공유합니다. 즉, 사용자가 동시에 동일 호스트명 하의 여러 페이지 (여러 탭에서) 를 열면, 연결 리퀘스트의 쟁탈을 일으켜, 로딩 속도가 더 느려집니다.そのため, [크로스도메인 분리 컴포넌트](/articles/프론트엔드 최적화: 야후 35 조/#r20) 의 최적화 원칙이 나타났습니다

참고 자료

• 《고성능 Web 사이트 구축 가이드》