iframe的创建比其他包括scripts和css的DOM元素的创建慢了1-2个数量级。当然页面一般不会包含太多的iframe，所以创建DOM节点花费的时间还不会占很大比重。
2、阻塞页面加载
及时触发window的onload事件是非常重要的。onload事件触发使浏览器的“忙”指示器停止，告诉用户当前网页已经加载完毕。当onload事件加载延迟后，它给用户的感觉是这个网页非常慢。
window的onload事件需要在所有iframe加载完毕后（包含里面的元素）才会触发。通过Javascript动态设置iframe的src可以避免这种阻塞情况。
3、唯一的连接池
浏览器只能开少量的连接到web服务器。绝大部分浏览器，主页面和其中的iframe是共享这些连接的。这意味着iframe在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果iframe中的内容比主页面的内容更重要，这当然是好的。但通常情况下，iframe里的内容是没有主页面重要的。这时iframe用光可用连接就不值得了。
4、不利于SEO
搜索引擎的检索程序无法解读iframe。另外，iframe本身不是动态语言，样式和脚本都需要额外导入。
综上，iframe应谨慎使用。
纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？答案很肯定 ：应用Iframe标记！
一、Iframe标记的使用
提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。
现在我们谈一下Iframe标记的使用。
Iframe标记的使用格式是:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。
比如:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
二、父窗体与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body οnclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？
点击阅读全文
打开CSDN，阅读体验更佳
网页加速系列_weixin_34259232的博客
网页加速系列(一)、 网页加速之图形处理篇 搜集到一些关于网站提速的资料,做一个系列,一些文章可能转或摘自网络。 (一)、 网页加速之图形处理篇 在维护网站的过程用,可能遇到过这样的情况:辛辛苦苦做出来的页面,但图片过多,网页结构...
14条让你的网页加速_ok7758521ok的博客
这本书里定义了14条让你的网页加速的方法,分别如下: 1.Make fewer HTTP requests 2.Use a CDN 3.Add an Expires header 4.Gzip components 5.Put CSS at the top 6.Move JS to the bottom ...
“画中画”效果--谈IFRAME标签的使用
作者：秋实文章来源：天极网页陶吧 纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？ 答案很肯定：应用Iframe标记！ 一、I
继续访问
怎么让iframe加载内容速度更快，用target而不是用js更改iframe的src
$(".expmenu a").attr("target","main_frame")//这样比用js更改iframe的src加载内容更快
继续访问
ppt iframe加载项_PPT启动卡爆了?一招帮你瞬间提速!_血汗钱被抢的博客...
这里给大家解释一下,PPT 插件安装后默认是随软件一起打开的,所以我们得等插件加载完才能使用 Office,加载是需要一定时间的,这个时间长短取决于你电脑的配置。 哪有人会为了一个 PPT 去升级电脑配置嘛?!
网站建设html代码优化,网站设计代码优化让网站打开速度飞起来_别总叫...
(1)巧用IFRAME布局 巧用iframe加快网页打开速度。如果网页上插入一些广告代码,又不想让这些广告网站影响 度的话,那么,使用iframe最合适不过了。例如在某个首页上插入一些广告代码方法:将这些广告代码放到一个独立的页面去,然后在首页用if...
热门推荐 iframe标签用法详解
iframe标签用法详解
继续访问
iframe嵌套页面加载慢_web前端入门到实战：分析页面加载慢
一般情况下，如果网页加载时间超过5s，用户就会感觉页面比较卡，用户体验相当差，用户可能会直接走人，所以加载的时间对于一个网站来说还是相当重要的。那做项目的时候怎样分析页面的加载速度慢呢？首先我们要知道影响页面加载的因素JS性能太差，阻塞页面浏览器解析过程中，遇到<script>标签的时候，便会停止解析过程，转而去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，...
继续访问
提升页面加载速度的方案_聂曦r的博客_提升页面加载速度
、释放资源:手动将iframe的内存释放、定时器销毁等 五、DNS优化 减少DNS查询,首先要了解访问路由到页面加载这个过程中间的流程,当用户在浏览器回车瞬间浏览器会解析域名向服务器发起TCP的3次握手,建立连接后发起HTTP请求,服务器响应请求返回...
微前端实际应用:iframe、qiankun_偷吃零食的小猫咪的博客_前端...
在上面的基础中了解到,目前常用的微前端实现方案有多种,其中目前常见使用的是qiankun,以前常用的框架是iframe的微前端方案,下面我们先来学习一下之前的框架iframe实现微前端方案 1、iframe 1-1 iframe基本理解 在之前使用iframe的时候,是...
iframe嵌套页面加载慢_Chrome 现已支持延迟加载网页中的 iframe，速度翻倍提升
谷歌曾在 Chrome 76 中添加了对图片的延迟加载支持。近日，ChromeEng 经理 Addy Osmani 则宣布，该团队已将 iframe 的延迟加载作为标准功能，添加至了 Chrome 浏览器和 Chromium 浏览器中。该功能会延迟窗口外 iframe 的加载，直到用户将网页滚动到附近为止。此举可以节省数据、加快页面其他部分的加载速度，并减少内存使用量。Chrome 小组的研究表明...
继续访问
加快ui显示速度 by iframe
iFrame: 为了能并行的加载JavaScript，避免浏览器卡住(http://goo.gl/lzGq8)，我在页面的body标记的顶部的一个Iframe里加载JavaScript。在iframe里加载JavaScript增加了代码的复杂度(通过Closure，我们很好的解决了这个问题)，但是为了速度的提升，值得这样做。
继续访问
最新发布 速度html代码是什么问题,HTML－加速、再加速_html
来源：中国教程网web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度？答案是：不一定！实际上，有许多关于HTML与DHTML方面的技巧，它们原理简单而且上手容易。无论是技术高超的老手，还是初涉编程的菜鸟，领会这些都十分必要。明显HTML，暗渡“公用脚本”减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。比如：我们.
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）