本文并不是一篇iframe API文檔講解，因此想了解iframe API的同學請移步 MDN， 我將在現(xiàn)在瀏覽器的角度與大家取探討iframe, 因此，本文中雖然會提及一些iframe在舊瀏覽器中的應用， 但并不會去講解。 所以，您對iframe在舊瀏覽器中的應用場景感興趣的話，還請自己搜索相關(guān)資料。 同時， 我也會從淺入深的來與大家探討iframe中的一些特性、各種現(xiàn)代瀏覽器中的渲染模式、應用場景、以及在現(xiàn)代開發(fā)中的影響。

什么是iframe

在HTML中有三種結(jié)構(gòu)特征：樹結(jié)構(gòu)、層次結(jié)構(gòu)、框結(jié)構(gòu)。iframe正是框結(jié)構(gòu)中的一員。每個iframe中都是一個獨立的沙箱，它們擁有自己的window以及DOM。

為什么需要理解它

雖說在日常開發(fā)中，我們應盡量少使用iframe，但在一些特殊場景下，我們也是不可避免需要使用iframe。因此，深入理解iframe能夠讓我們更合理的使用它。

渲染與阻塞

前面講到iframe是HTML三種結(jié)構(gòu)中的框結(jié)構(gòu)，框結(jié)構(gòu)中還有另外兩個元素：frameset和frame，但它們都已廢棄，不再推薦使用。 
每一個框結(jié)構(gòu)都有一個獨立的HTML文檔，而不包含以上三種框結(jié)構(gòu)中任意一種的網(wǎng)頁就是最簡單的框結(jié)構(gòu)。其示圖如下： 
移動開發(fā)培訓,Android培訓,安卓培訓,手機開發(fā)培訓,手機維修培訓,手機軟件培訓

 


對應的，復雜的框結(jié)構(gòu)即多個框結(jié)構(gòu)復合在一個頁面中， 其示圖如下： 

移動開發(fā)培訓,Android培訓,安卓培訓,手機開發(fā)培訓,手機維修培訓,手機軟件培訓

 


像上圖中的多框結(jié)構(gòu)，非常不適合移動端，因為這種結(jié)構(gòu)的頁面多觸控操作非常不友好。 到此，對于框結(jié)構(gòu)的基礎(chǔ)知識普及便告一段落了， 下面筆者將分別從 Chrome、Firefox、Safari、IE 11的測試結(jié)果來分析iframe在不同瀏覽器中的渲染模式以及阻塞情況，代碼如下： 
我們先定義iframe要引用的頁面，并編寫如下代碼：

const start = Date.now();
const limit = function() {return Date.now() - start;
}while(limit() <= 1000 * 5) {}

接下來， 在主頁面中引入它： 

<iframe src="./frame-sets.html"></iframe>

代碼很簡單， 就是讓if