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,当必须使用时,要有节制的使用它们
分享到:
相关推荐
js控制/获取a.html中iframe加载的b.html中的iframe,很多人都以为getElementById可以直接获取,其实不行的,以上代码就解决了这个问题,js控制iframe加载页面的iframe,不过测试只在IE和火狐通过,谷歌不行,其他自...
动态创建iframe,并动态添加js代码动态创建iframe,并动态添加js代码
js调用-嵌入iframe,测试JS之间的调用关系
主要处理javascript对iframe框架的处理
主要介绍了js调用iframe实现打印页面内容的方法,需要的朋友可以参考下
iframe框架\JS获取iframe元素
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时,无法获取跨域界面的属性值的问题
基于iframe的js动态标签tab基于iframe的js动态标签tab基于iframe的js动态标签tab基于iframe的js动态标签tab基于iframe的js动态标签tab
js 实现iframe 之间传值
javascript iframe 自适应高度js demo
这个库允许的高度与同跨域iframe来适应他们所...在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。
javascript动态调整iframe高度
js 操作iframe
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
本篇主要是对JS操作iframe里的dom进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
纯JS实现的iframe自适应高度。兼容主流浏览器。
js iframe 方法及元素相互调用 js调用iframe方法
JS页面跳转和js对iframe进行页面跳转、刷新
本文实例讲述了js改变Iframe中Src的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title>...
js 实现 动态添加iframe框架! 值得下载看看!资源免费,大家分享!!