谨慎使用iframe框架

使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。

HTML网页制作教程:iframe(框架)标记使用需要谨慎

使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。值得关心的是 onload 事件和连接池。

iframe 阻塞 onload

window 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成,用户依据此判断页面是否已经加载完。而 onload 事件延迟,会让用户感觉页面变慢。

window 的 onload 事件直到它所包含的所有 iframe,以及所有 iframe 中的资源完全加载完成后才会触发。在 Safari 和 Chrome 中,用 javascritpt 动态的给 iframe 的 src 赋值可以避免这种阻塞行为。

一个连接池

对每个 web 服务器来说,浏览器只打开极少的几个连接数。老的浏览器,包括 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个使用了 iframe。它们多数用来加载广告。这不是很合适,但可以理解,这是一个简便的在内容中插入广告的途径。在很多情况下,使用 iframe 是合理的。但要意识到这对你的页面的性能影响。非必要时,请谨慎使用。

时间: 2024-08-11 19:28:37

谨慎使用iframe框架的相关文章

javascript iframe:javascript 改变iframe(框架)的方法

<iframe src="http://www.cxybl.com" name="content" height="200" width="468" scrolling="no" id="content" frameborder="0"></iframe>  <script>  function iframes(){  conten

Iframe框架高度自适应的实现

自适应 解决iframe框架页面自适应高度问题代码如下,需要注意的是框架引用页面一定要设置name属性,否则会不生效 方案一: <iframe src="test.asp" width="100%" frameborder="0" scrolling="no" name="hj" id="hj"></iframe> test.asp页面head间增加如下JS代码

让iframe框架实现自动高度

让iframe框架实现自动高度,参考代码如下:   <iframe name="pindex" src="about:blank" scrolling="auto" width="100%" height="100%" frameborder=no ></iframe>

以SEO的角度分析使用iframe框架所存在的优缺点

记得笔者在刚接触iframe框架的时候,对其并不是很了解,感觉用处也不大,然而最近在给站点加上一个微博直播控件的时候遇到了它,也不得不以SEO的角度来考量它,经过分析后,笔者认为ifame框架存在一定的优缺点. 首先我们需要了解一下什么是iframe框架? 如果我们在某一个页面中使用这个标签就会在该页面内构建一个独立的框架,例如页面1内的一个区域内使用ifram调用另外一个页面,即网页2,这样的话会在页面1的这个区域里调用显示页面2中被调用的部分.使用方法:   或其他网页的本文内容等写入标签内

iframe框架应用

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

Dreamweaver为iframe框架添加链接

  今天小编为大家介绍一下如何在Dreamweaver中为iframe框架添加链接. 首先选中iframe框架,这时我们可以在软件下方的属性窗口中找到链接项,在链接中填写需要链接的网页地址,就可以完成链接的添加.

Dreamweaver中如何插入IFrame框架

  在制作网页时,我们可以使用各种网页布局方法,今天小编为大家介绍一下如何使用IFrame框架进行布局. 首先在"插入"菜单中选择"HTML"--"框架"下的"IFrame",如下图所示: 插入IFrame后,会跳转到拆分模式,这时我们可以在代码窗口中看到<iframe></iframe>,说明你已经插入了iframe框架. 在代码中输入<iframe width="400"

js如何设置在iframe框架中指定div不显示

 在iframe框架中指定div不显示,有多种实现方法,接下来与大家分享下使用js的具体实现,感兴趣的朋友可以参考下 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" >  <head runat="server">  <title>测试</title>  <script language="javascript" type="text

ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容_实用技巧

 ASP.NET中iframe框架点击左边页面链接,右边则显示链接页面内容,具体实现内容如下 先看看效果图: 首先是主页面main.aspx <body style="background-color: #AFEEEE"> <form id="form1" runat="server"> <div> <center> <h1> 后台管理界面 </h1> <span st