iframe을 사용하면 다른 웹사이트의 페이지를 쉽게 호출할 수 있지만 주의해서 사용해야 합니다. 다른 DOM 요소(스타일 및 스크립트 포함)를 생성하는 것보다 수십 배, 심지어 수백 배 더 많은 성능 비용이 듭니다. 100개의 다양한 요소를 추가하는 시간을 비교하면 iframe이 얼마나 성능 집약적인지 알 수 있습니다.
iframe을 사용하는 페이지에는 일반적으로 iframe이 그리 많지 않으므로 DOM을 생성하는 데 걸리는 시간에 대해 크게 걱정할 필요가 없습니다. 더 관심을 가질만한 것은 onload 이벤트와 연결 풀입니다.
iframe 블록 온로드
윈도우의 onload 이벤트가 최대한 빨리 실행되는 것이 매우 중요합니다. 그러면 사용자가 페이지 로드가 완료되었는지 확인하는 데 사용할 브라우저의 로드 진행률 표시기가 완성됩니다. onload 이벤트가 지연되면 사용자는 페이지가 느리다는 느낌을 받게 됩니다.
창에 포함된 모든 iframe과 모든 iframe의 리소스가 완전히 로드될 때까지 창의 onload 이벤트가 트리거되지 않습니다. Safari 및 Chrome에서 javascript를 사용하여 iframe의 src에 값을 동적으로 할당하면 이러한 차단 동작을 방지할 수 있습니다.
커넥션 풀
브라우저는 각 웹 서버에 대해 아주 적은 수의 연결만 엽니다. IE 6/7 및 Firefox 2를 포함한 이전 브라우저에는 호스트당 2개의 연결만 있습니다. 새 브라우저에서는 연결 수가 증가합니다. Safari 3와 Opera 9는 4로 늘었고, Chrome 1, IE 8, Firefox 3는 6으로 늘었습니다.
각 iframe마다 별도의 연결 풀이 있을 것으로 예상할 수 있지만 그렇지 않습니다. 대부분의 브라우저에서는 기본 페이지와 해당 iframe 간에 연결이 공유됩니다. 즉, iframe의 리소스가 사용 가능한 연결을 차지하고 기본 페이지의 리소스 로드를 차단할 수 있음을 의미합니다. iframe의 콘텐츠가 기본 페이지보다 동일하거나 더 중요한 경우에는 괜찮습니다. 그러나 일반적인 상황에서는 iframe의 콘텐츠가 페이지에 중요하지 않으며 iframe이 연결 수를 차지하는 것은 바람직하지 않습니다. 한 가지 해결책은 우선순위가 더 높은 리소스를 다운로드한 후 iframe의 src에 값을 동적으로 할당하는 것입니다.
미국 상위 10개 웹사이트 중 5개가 iframe을 사용합니다. 대부분은 광고를 로드하는 데 사용됩니다. 이는 매우 적합하지는 않지만 이해할 수 있고 콘텐츠에 광고를 삽입하는 쉬운 방법입니다. 많은 경우 iframe을 사용하는 것이 합리적입니다. 그러나 이것이 귀하의 페이지에 미치는 성능 영향에 유의하십시오. 꼭 필요한 경우가 아니면 주의하여 사용하시기 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
