iframes를 사용하면 다른 웹 사이트의 페이지를 쉽게 호출 할 수 있지만주의해서 사용해야합니다. 스타일과 스크립트를 포함한 다른 DOM 요소를 만드는 것보다 수십 또는 수백 배 더 많은 성능을 소비합니다. 100 가지 다른 요소 추가 시간 비교는 Iframe의 성능이 어떻게 소비되는지를 보여줍니다.
iframes를 사용하는 페이지에는 일반적으로 iframes가 너무 많지 않으므로 DOM을 만드는 것에 대해 너무 걱정하지 마십시오. 우려할만한 가치가있는 것은 Onload 이벤트 및 연결 풀입니다.
iframe 블록 onload창의 온부하 이벤트가 가능한 빨리 실행하는 것이 매우 중요합니다. 이를 통해 브라우저의로드 진행 상황 표시기가 완료 될 수 있으며 사용자는 이에 따라 페이지가로드되었는지 여부를 결정합니다. Onload 이벤트 지연으로 인해 사용자가 페이지가 느려집니다.
온로드 이벤트는 모든 iframes의 모든 iframes와 리소스가 완전히로드 될 때까지 발사되지 않습니다. Safari와 Chrome에서 JavaScriptPt를 사용하여 iframes에 값을 동적으로 할당하면이 차단 동작을 피할 수 있습니다.
연결 풀각 웹 서버의 경우 브라우저는 몇 가지 연결 만 엽니 다. 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 개가 Iframes를 사용합니다. 그들 대부분은 광고를로드하는 데 사용됩니다. 이것은 그다지 적합하지는 않지만 당연히 컨텐츠에 광고를 삽입하는 쉬운 방법입니다. 많은 경우 iframe을 사용하는 것이 합리적입니다. 그러나 이것이 귀하의 페이지에 미치는 성능에주의하십시오. 필요하지 않은 경우주의해서 사용하십시오.