日期:2014-05-16  浏览次数:20345 次

理解IFRAME之iframe与js之争

? ? ? ??Iframes?提供了一个在页面中嵌入其它网站页面的简便方法,但应慎重使用。创建IFRAME比创建任 何其他类型的DOM元素(包括脚本和样式表)耗时多出1-2个数量级. 创建100个不同类型元素的时间展示了IFRAME多么的耗时.

页面通常不会使用太多数量的IFRAME,因此创建dom的时间也不是一个大问题,问题是这涉及到onload事件和并发连接池

Iframes 阻塞onload事件

尽快产生window的 onload事件是很重要的。这个事件会引发浏览器状态指示到达“完毕”状态,通知用户页面已经下载完毕。当onload事件被延迟,给用户的感受是页面变的更慢了

window的onload事件在所有的iframe和iframe内所有元素完全下载后才能触发。 在 Safari 和 Chrome浏览器内,通过JavaScript动态设置iframe的src属性可以避免这种阻塞行为

并发连接池

浏览器对任何一个给定的web服务器只打开一定数量的连接。 比较老的浏览器,包括Internet Explorer 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插入广告内容很容易实现。在许多情况下,iframe是合乎逻辑的 解决方案。但要记住他们会对你的页面产生性能影响。尽可能避免使用iframe,当必须使用时,要有节制的使用它们