優化網站設計（二十一）：盡量少用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/