iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。
使用 iframe 的页面一般不会包含太多 iframe,所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题:onload 事件以及连接池(connection pool)。
Iframes 阻塞页面加载
及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。
window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里,通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。
唯一的连接池
浏览器只能开少量的连接到web服务器。比较老的浏览器,包含 Internet Explorer 6 & 7 和 Firefox 2,只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接,Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇文章查看具体的数据表:Roundup on Parallel Connections.
有人可能希望 iframe 会有自己独立的连接池,但不是这样的。绝大部分浏览器,主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接,从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要,这当然是很好的。但通常情况下,iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是,在主页面上重要的元素加载完毕后,再动态设置 iframe 的 SRC。
美国前 10 大网站都使用了 iframe。大部分情况下,他们用它来加载广告。这是可以理解的,也是一种符合逻辑的解决方案,用一种简单的办法来加载广告服务。但请记住,iframe 会给你的页面性能带来冲击。只要可能,不要使用 iframe。当确实需要时,谨慎的使用他们。
原文链接:http://www.williamlong.info/archives/3136.html
英文链接:http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/
分享到:
相关推荐
iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级
不带边框的iframe因为能和网页无缝的结合...但中iframe的大小却不能像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行。现在来描述一种iframe 动态调整高度的方法...
iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,...
所以监控iframe的url变化就是必须要解决的问题了。 第一印象的解决方案是通过setInterval轮询监控,貌似不太理想了,而且有延迟。 千般搜索,终于找到了好的方法,可以通过H5新增的MutationObserver来解决,配合...
由于现在frame和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame 所谓的iFrame内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地...
说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了。 不过有一种情况的实现我还是选择了iframe,这就是本文要说的文件的异步上传,感兴趣的可以试试,如果用...
ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
用了很久的iframe,一直觉得很好用。一般情况头部,底部包括部分侧边栏都会放到iframe里面。用了那么多,今天才发现对他了解的那么少。
ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
利用bootStrap开发的Tabs+iframe框架 非常实用,网上很少,不可多得的web网页框架资源
iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小...少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数:
- 少⽤`iframe`:搜索引擎不会抓取`iframe`中的内容 - ⾮装饰性图⽚必须加`alt` - 提⾼⽹站速度:⽹站速度是搜索引擎排序的⼀个重要指标 ### 2、``的`title`和`alt`有什么区别 - 通常当⿏标滑动到元素上的时候显示 -...
弹出广告JQuery,兼容性好,代码少,易于上手,共享技术
作为发起端,我们可以open一个新窗口,或创建一个iframe,往新窗口里发送数据,简单起见,我们每6秒钟发送一次,然后创建消息监听器,从目标窗口监听它反馈的信息。 //弹出一个新窗口 var domain = '...
virus_lib.asp增加了对iframe,script的控制参数分别为: Const removeIframe=true '是否检查iframe Const IframeKey="3322" 'iframe 中的关键字,如果出现系统将自动清除 Const removeScript=true '是否检查...
DR解决方案具有2个iframe的朴素解决方案: (),跳转至37个iframe和iframe.location++ : (),跳至 37个iframe和iframe.name++ : (源代码),转到“让我们走得更快” 没有iframe和top.name++ : Easterxss....
为什么要使用SyncSharp? 以下是使用SyncSharp的好处: 干净: SyncSharp不会在您的同步文件夹中保存任何其他文件。 所有元数据文件和配置文件都保存在一个集中位置。 无需安装。 无依赖性(无需安装其他组件)。 ...
使用iframe,但是目前使用iframe的人已经越来越少了,而且iframe在不同浏览器之间还有不兼容的情况。而且我一些研发的人员,他们表示iframe窗口间传值似乎很麻烦。 第二种 使用jQuery的onload方法加载页面,不过这种...
但事实并非如此使用方便,可以用C99 shell轻松编辑,但是r57 shell的使用知识是必不可少的。如何使用底部的r57 shell 有一个R57文件编辑视频,R57 Shell可以做的就是编辑文件,连接sql,查看文件的写权限,查看...
在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常; 第一个servlet处理上传,及把上传进度保存到session,第二个servlet处理ajax请求,...