iframe

一、使用iframe的优缺点

优点 :

1.iframe能够把嵌入的网页原样展现出来；

2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

6.方便制作导航栏。

缺点 :

1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；

4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去； 

5.产生多个页面，不易管理；

6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

二、为什么尽量少用iframe

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。

使用iframe的页面一般不会包含太多iframe，所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload事件以及连接池(connection pool)，即 iframe 会阻塞主页面的 Onload 事件及 iframe 和主页面共享连接池，会影响页面的并行加载。

1.iframes 阻塞页面加载，影响网页加载速度

及时触发 window 的 onload 事件是非常重要的。
onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。
当 onload事件加载延迟后，它给用户的感觉就是这个网页非常慢。

window的onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发，
就会影响网页加载速度。
通过 JavaScript 动态设置 iframe的src属性可以避免这种阻塞情况。

2. 唯一的连接池

对每个 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的src赋值。

总之，iframe会给你的页面性能带来冲击，
尽可能不使用iframe，
当确实需要时，谨慎地使用他们。
目前框架的优点可以使用Ajax实现，这在某种角度也是一种替代方案。

三、iframe的一些应用场景

iframe的页面和父页面（parent）是分开的，所以它意味着，这是一个独立的区域，不受 parent的CSS或者全局的JavaScript的影响。

1.典型的，比如所见即所得的网页编辑器；

2.跨域通信。JavaScript跨域总结与解决办法 ，
    类似的还有浏览器多页面通信，比如音乐播放器，
    用户如果打开了多个tab页，应该只有一个在播放；

3.历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案，
    在html5的history api不可用时作为一种替代；

4.纯前端的utf8和gbk编码互转。
    比如在utf8页面需要生成一个gbk的encodeURIComponent字符串，
    可以通过页面加载一个gbk的iframe，
    然后主页面与子页面通信的方式实现转换；

5.用iframe实现无刷新文件上传，在FormData不可用时作为替代方案；

6.创建一个全新的独立的宿主环境。
    iframe还可以用于创建新的宿主环境，
    用于隔离或者访问原始接口及对象，
    比如有些前端安全的防范会覆盖一些原生的方法防止恶意调用，
    通过创建一个iframe，
    然后从iframe中取回原始对象和方法来破解这种防范；

7.用来加载广告，例如联盟广告；

8.一般邮箱使用iframe，如QQ邮箱；

9.一些简单的后台页面。

关于iframe在跨域的使用，这里稍微强调一下

首先，我们要了解什么是跨域。

简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。

网络上已经有非常多可行的方案，我们只限定在iframe中去讲解几种跨域方案。

1、document.domain+iframe的设置

document.domain，
这是浏览器暴露出来的一个准只读属性
（之所以说它是准只读属性，是因为它可以设置为当前域名的超级域），
利用这个特性，可以实现主域名相同子域名不同的网页实现通信。

2.使用HTML5 postMessage

HTML5提供的API，可以安全的启用跨域通信。

语法:targetWindow.postMessage(data, targetOrigin)，data参数是指要传递的数据。

如何在目标窗口接收到数据呢？编写如下代码即可：

window.addEventListener('message', function(evt) {
   console.log(evt.data);
}, false);

evt.data即是postMessage中传递过来的数据。

特别注意两点

1.如果是协议和端口造成的跨域问题“前台”是无能为力的。

2.在跨域问题上，
    域仅仅是通过“URL的首部”来识别
    而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

前端性能优化篇——浏览器同域名并发请求对限制

在浏览器同域名并发请求都产生并发数限制，并发限制通常是4～8以内，那么来了解浏览器请求并发限制的原因和优化手段。

浏览器并发数量统计

浏览器为什么要请求并发数限制？

在了解优化手段之前我们先了解浏览器限制并发请求的原因

1.对操作系统端口资源考虑

PC总端口数为65536，那么一个TCP（http也是tcp）链接就占用一个端口。
操作系统通常会对总端口一半开放对外请求，以防端口数量不被迅速消耗殆尽。

2.过多并发导致频繁切换产生性能问题

一个线程对应处理一个http请求，那么如果并发数量巨大的话会导致线程频繁切换。
而线程的上下文切换有时候并不是轻量级的资源。
这导致得不偿失，
所以请求控制器里面会产生一个链接池，以复用之前的链接。
所以我们可以看作同域名下链接池最大为4～8个，
如果链接池全部被使用会阻塞后面请求任务，等待有空闲链接时执行后续任务。

3.避免同一客户端并发大量请求超过服务端的并发阈值

在服务端通常都对同一个客户端来源设置并发阀值避免恶意攻击，
如果浏览器不对同一域名做并发限制可能会导致超过服务端的并发阀值被BAN掉。

4.客户端良知机制

为了防止两个应用抢占资源时候导致强势一方无限制的获取资源导致弱势一方永远阻塞状态。

优化手段

那么我们知道了浏览器并发限制的原因我们可以从下面几方面入手优化

域名散发

将请求通过多个域名分开请求，比如 100A请求 -> (25A + 25B + 25C + 25D)。但是建议4个左右。因为过多域名会导致dns解析性能问题。

cookie free

cookie free其实是区分主站点请求与其他次要请求的cookie存储和携带。当网站的cookie大小5kb，发送150个请求全部携带上cookie就是750kb，在1024 Kbps的常见上行带宽下，需要长达7.5秒左右才能全部发送完毕。尽管这些请求可能存在并发执行，但是在静态资源请求上几乎没必要携带cookie信息。所以我们可以启用主站点域名和其他域名进行请求区分cookie的携带。

小图片合并成大图（雪碧图）

把多张小图片合并成一张大图，通过css的background背景精灵定位显示。减少图片资源的请求数量，雪碧图就是常见的一种手段

设置Cache-Control max-age

当我们确定项目那些资源是长久不变化的我们对其设置版本号控制和Cache-Control max-age 进行长时间缓存，减少浏览器对资源重新请求。

loading Image 懒加载

懒加载其实是大型网站通常必备对一个手段，为了防止无意义加载场景。通常用户在进来对第一屏对内容不会全部查看，可能在浏览过程中已经跳转到其他页面。那么在用户浏览到的地方没必要进行图片加载、节点创建等操作，可以等用户滚动到节点内容区域再进行显示和加载内容。

PWA（渐进式应用）

近几年比较火的一个优化手段，通过web Service 对当前应用请求过的请求进行缓存到客户端，用户下次访问页面或刷新页面都是直接从客户端本机直接读取之前的response。可以细化控制缓存静态资源、api请求等。但是pwa缓存有限制条件：只能缓存https协议、主站点域名的请求。并且之前缓存过的请求需要在下次PWA机制启动时候进行清除和刷新，这样会导致缓存的资源需要两次访问页面才能发生更新。

浏览器同域名请求的最大并发数限制

当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的并发数量。并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的进行数量。

如果同时只有2个并发连接数数量，那网页打开的时候只能依赖于这2条线程，前面如果有打开慢的内容，就会直接影响到后面的内容打开。但是如果同时有更多的并发连接数，这样就会大大的提高网页加载速度。

下表概括了基于主机上运行的IE浏览器的版本的最大并发连接数、主机的连接速度和服务器的受支持的协议版本。

1，HTTP客户端一般对同一个服务器的并发连接个数都是有限制的。

实际上，浏览器确实使用并行连接，但它们将并行连接的总数限制为少量（通常为四个）。服务器可以自由地关闭来自特定客户端的过多连接。

2，一些主流浏览器对HTTP 1.1和HTTP 1.0的最大并发连接数目，可以参考如下表格：

浏览器	HTTP / 1.1	HTTP / 1.0
IE 11	6	6
IE 10	6	6
IE 9	10	10
IE 8	6	6
IE 6,7	2	4
火狐	6	6
Safari 3,4	4	4
Chrome 4+	6	6
歌剧9.63,10.00alpha	4	4
Opera 10.51+	8	？

iPhone 2	4	？
iPhone 3	6	？
iPhone 4	4	？
iphone 5	6	？

Android2-4	4	？

看网站吧