优化网站设计（二十一）：尽量少用iframe

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html，同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。 接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

为了跟随我进行后续的学习，你需要准备如下的开发环境和工具

1. Google Chrome 或者firefox ，并且安装 Yslow这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第二十一条原则：Minimize Number of iframes (尽量少用iframe)。

iframe以及与之相关的frameset,frame 都是早期HTML版本的产物，我记得在我第一次使用FrontPage创建网站的时候（那真的是很多年前了），确实用过它们，那时候其实主要用的是HTML，连ASP都是刚刚作为新事物被介绍，更不要说什么ASP.NET，以及AJAX等方面的新鲜玩意儿了。

frame 是必须嵌套在frameset里面用的，可以将它们理解为在一个页面大框架里面，定义了几个不同的框架，组成的一个框架集。每个框架可以加载一个页面。而iframe本质上就是一个frame,只不过是inner-frame（内联框架），也就是说这种框架是不需要有框架集的，可以自成一体，随意嵌套在页面的任意地方。

【备注】iframe在HTML的后续版本（例如HTML 5）中还是支持的，但frameset和frame 已经明确地要告别历史舞台了。

 

iframe可以用来做什么呢？

1. 它使得在一个网页中嵌入另外一个网页变得可能。
2. 为了避免这些嵌入的网页对我们自己的网页产生不利的影响，iframe实现了一个安全沙箱（Security Sandbox）。关于这一点，在HTML 5中进行了更加明确和丰富地支持。你可以参考
• http://developer.51cto.com/art/201002/181875.htm
• http://msdn.microsoft.com/EN-US/library/windows/apps/hh441129(v=vs.10).aspx
• https://developer.mozilla.org/zh-CN/docs/HTML/Element/iframe
3. 使用iframe可以实现并行的脚本下载。因为在框架里面是一个独立的运行环境，它里面的资源可以和主页面的资源并行下载。

 

目前新浪微博提供的“微博秀”还是用iframe来实现的。

iframe 可能的问题？

1. 安全问题：像上面提到的那样，虽然有安全沙箱，但其实还是有安全风险的。因为iframe引用的是别人做的网页。
2. 兼容性问题：并非所有浏览器都能很好地支持iframe。
3. 性能问题：iframe会导致页面加载变慢。
4. 其他问题：iframe的宽度和高度不能自动适应内容大小。

 

iframe替代方案

如果不用iframe，那么如何在页面中嵌入其他网站的内容呢？绝大部分时候，脚本可以实现iframe的功能。例如

1. Google的广告代码：http://blog.sina.com.cn/s/blog_4bec262601000947.html (因为没有办法访问到Google的网站，所以我找了一篇参考文档）
2. 网站分享边栏代码：http://www.jiathis.com/getcode

【备注】使用脚本的方式，前提是你完全信任这些脚本。而iframe唯一的好处在于它可以对外部页面的行为做限制（通过安全沙箱）

 

如果你仅仅是要动态插入另外一个网页的内容到当前网页上，你可以直接使用AJAX的方式，例如

1. get : http://api.jquery.com/jQuery.get/
2. load : http://api.jquery.com/load/