在看公司数据平台代码时，发现一些地方使用了iframe标签。虽没有使用过iframe，但是一直听说尽量不要使用iframe。so,借此机会了解一下到底为什么。
iframe标签
所有的浏览器都支持<iframe>标签。
iframe元素会创建包含另一个文档的内联框架（即行内框架）。
可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
简单示例如下：
<html>
<body>
<iframe src="xxx.jpg"></iframe>
<p>一些老的浏览器不支持iframe</p>
<p>如果得不到支持，iframe是不可见的</p>
</body>
</html>或者
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<iframe src="iframe-demo2.html"></iframe>
</body>
// iframe-demo2.html的内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>被嵌入 嵌入 嵌入</h2>
</body>
</html>执行结果如下图
为什么要避免iframe的使用
iframe的创建比其他包含script 和css的DOM元素的创建慢了1-2个数量级。
使用相同一段代码，创建100个iframe并添加到DOM中，所需时间比较。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<script>
for(var i=0;i<100;i++){
var iframes=document.createElement('iframe'); // 创建iframe标签
//var iframes=docuemnt.createElement('img');// 创建img标签
iframes.setAttribute("src","xxx.jpg");
document.body.appendChild(iframes)
}
</script>
</body>
</html>创建100个iframe 总时间为4.91s
创建100个img ，总时间大概为592ms
测试了多次之后，虽然每次的时间略有差异，但创建100个iframe和创建100个ming的时间差异基本保持在10倍左右。
其他原因
1、window.onload事件的触发告诉用户当前页面已经加载完毕，当onload事件延迟加载，会感觉页面很慢。
window.onload事件需要在所有的iframe加载完毕后（包含里面的元素）才会触发。在Safari和Chrome中通过JavaScript动态的设置iframe的src可以避免这种阻塞的情况。
2、一个浏览器的并发连接数是有限制的。绝大部分的浏览器，主页面和其中的iframe是共享这些连接的。so，问题来了 。iframe在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。 解决方法：在主页面上的重要元素加载完毕后再动态的设置iframe的src.
3、有的浏览器可以设置，将iframe当做广告屏蔽。
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
