优点 : ?

缺点 : ?

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

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

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

2. 唯一的连接池

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

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

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

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

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

1、document.domain+iframe的设置

2.使用HTML5 postMessage

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

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

特别注意两点

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

浏览器并发数量统计

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

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

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

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

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	？

?

看网站吧

www.cnblogs.com/sunsky303/p…