当前位置: 代码迷 >> Web前端 >> Iframe 加载技术和性能有关问题
  详细解决方案

Iframe 加载技术和性能有关问题

热度:111   发布时间:2012-09-21 15:47:26.0
Iframe 加载技术和性能问题
前提话:
搞性能的人都知道高性能网站建设指南的作者steve讲了很多怎么处理代码,使你的网站速度很快。也包括讲了Iframe 的blocking问题,今天在网上看了Aaron的关于讲Iframe的性能提出了新的思路。好的东东要分享,决定做个翻译(虽然英文很差但好东东就要说出来)。在性能方面的东东国内确实讲得很少。
Iframe setTimeout() does not work in IE9
Chad Barnsdale of Unfinishedman.com mentioned to me on May 25 that the Iframe setTimeout() technique does not work in IE9. And he was right. The file that gets loaded into the iframe simply does not load. Nothing happens. I will dive into this sometime soon. It's probably something small with the JavaScript code.
在IE9中使用Iframe setTimeout()的方式不能工作。注释一下吧。在steve中讲了iFrame不阻塞时讲到可以使用Iframe setTimeout()可以解除阻塞,为了能了解setTimeout实现方式。我这里贴两段代码:
1.最为普通的iframe代码,blocking page
 
<iframe id=iframe1 src="iframe-empty.php?t=" width=95% height=150 border=2></iframe>
Demo:http://stevesouders.com/efws/iframe-onload-blocking.php?t=1347283666
 
2.steve的setTimeout实现iframe代码
 
<iframe id=iframe1 src="" width=95% height=150 border=2></iframe>
<script type="text/javascript">
function setIframeSrc() {
    iframe1 = document.getElementById('iframe1');
if ( iframe1 ) {
  if ( -1 == navigator.userAgent.indexOf("MSIE") ) {
         t_iframe = Number(new Date());
   iframe1.src = "iframe-empty.php?t=";
  }
  else {
         t_iframe = Number(new Date());
   iframe1.location = "iframe-empty.php?t=";
  }
}
else {
  alert("ERROR: There was a race condition - the iframe doesn't exist.");
}
}
setTimeout(setIframeSrc, 5);
</script>
Demo:http://stevesouders.com/efws/iframe-onload-nonblocking.php?t=1347283111
大家明白了吧,其实原理很简单因为ifram会blocking页面,为了解决blocking,让这段ifram晚执行即你在设定的秒数后再执行。
前段话的大意是:5.25日Unfinsehman.com网站的Chad Bransdale向我提iframe的setTimeout技术不能在IE9工作了,他说的是对的,加载到iframe的文件不加载了。什么也没有发生,这时我很快的研究了下,这可能是javascript的问题。
Iframes are often used to load third party content, ads and widgets.The main reason to use the iframe technique is that the iframe content can load in parallel with the main page: it doesn't block the main page.Loading content in an iframe does however have two downsides, as Steve Souders outlines in his blog post Using Iframes Sparignly:
  • Iframes block onload of the main page
  • The main page and iframe share the same connection pool
  • Iframe被经常用于加载第三方内容,比如广告和其它小玩意,主要原因是使用iframe技术是iframe能在主页面中并行加载,它不阻止主页在,然而在iframe中加载内容有两个缺点的地方,正如steve souders在他的blog提到的保守的使用iframe.大家可以通过链接去看看,
    iframe阻塞主页面加载。
    主页面和iframe共享同一个连接池。
    The onload blocking is the biggest problem of the two and hurts performance the most.You really want the load event to fire as soon as possible, for optimal user experience of course but also because of how Google measures your site speed: Google Toolbar in IE and FF browsers of site visitors measures time to onload.
    加载阻赛是两个缺点中最大的问题并且大多数最影响性能。你真正的想尽快的加载事件到fire,给用户最佳的用户过程并且如何用google测量你网站速度:在网站访问者的IE和Firefox浏览器中的google工具条测量加载时间
    How can you load an iframe without blocking onload and as a result improve page performance?
    怎么样无阻塞的加载ifram, 作为一个结果提高网页性能的结果
    明天继续.....
      相关解决方案