解读iframe

内嵌的frame

iframe也叫内嵌frame,它允许把一个HTML文档嵌入另一个中。iframe常用于整合诸如广告这样的HTML内容,它们一般来自和主页不同的站点。

使用iframe的好处是它们的文档完全独立于其父文档。iframe中的相对URL是相对其基准URI,而非其父文档的URI。

iframe中包含的Javascript访问其父文档是受限的。例如,来自不同域的iframe不能访问其父文档的Cookie。

iframe有什么缺点

  • 开销最高的DOM元素

即使是空iframe,其开销(加载DOM元素的开销)比其他的DOM元素高出1~2个数量级

  • iframe阻塞onload事件

当我们在典型方式下使用iframe时(<iframe src=”url”></iframe>),它会阻塞onload事件。结果会延长浏览器的忙指示,导致用户感觉页面加载很慢。动态地设置iframe的src属性能在Safari和Chrome中避免这个问题。对于其他浏览器而言,可以在onload事件后设置src属性来避免。

iframe中连接共享

浏览器打开单个主机名的连接数是有限制的。连接数决定了能并行下载的资源数量。

因为iframe是“完全独立的嵌入式文档”,所以我们希望下载iframe中的资源时能使用独立于主页面的连接池。但实践表明父文档和iframe中所有请求共享了同一个连接池。

使用iframe不会增加指定主机名的并行下载数量。

延伸知识点

  • 跨标签页和窗口的连接共享

跨iframe和其父文档的连接数限制令人既吃惊又失望。这就引出一个问题:跨多个浏览器标签页和窗口是否也存在类似受限的连接池?

在同一个浏览器打开多个向相同主机名请求的标签页。即使加载在独立的标签页中,它们也必须共享连接。

  • 期待尽可能触发onload事件的3个原因

当onload事件触发时,浏览器停止“忙指示器”,并向用户反馈页面已经准备就绪。

开发者经常在onload事件触发时初始化UI操作。尽可能快地让onload事件触发从而使用户的等待时间变短是很重要的。

开发者有时把一些重要的操作(减少内存泄露的Javascript代码)和window的unload事件绑定在一起。在一些浏览器中,只有onload事件触发后unload事件才会触发。如果等待onload事件太久,用户会很快离开该页面,那么unload代码就永远不会执行了。

 少用iframe

原文地址:https://www.cnblogs.com/mackxu/p/iframe.html