本文并不是一篇iframe API文檔講解，因此想了解iframe API的同學(xué)請移步 MDN， 我將在現(xiàn)在瀏覽器的角度與大家取探討iframe, 因此，本文中雖然會提及一些iframe在舊瀏覽器中的應(yīng)用， 但并不會去講解。 所以，您對iframe在舊瀏覽器中的應(yīng)用場景感興趣的話，還請自己搜索相關(guān)資料。 同時(shí)， 我也會從淺入深的來與大家探討iframe中的一些特性、各種現(xiàn)代瀏覽器中的渲染模式、應(yīng)用場景、以及在現(xiàn)代開發(fā)中的影響。
什么是iframe
在HTML中有三種結(jié)構(gòu)特征：樹結(jié)構(gòu)、層次結(jié)構(gòu)、框結(jié)構(gòu)。iframe正是框結(jié)構(gòu)中的一員。每個(gè)iframe中都是一個(gè)獨(dú)立的沙箱，它們擁有自己的window以及DOM。
為什么需要理解它
雖說在日常開發(fā)中，我們應(yīng)盡量少使用iframe，但在一些特殊場景下，我們也是不可避免需要使用iframe。因此，深入理解iframe能夠讓我們更合理的使用它。
渲染與阻塞
前面講到iframe是HTML三種結(jié)構(gòu)中的框結(jié)構(gòu)，框結(jié)構(gòu)中還有另外兩個(gè)元素：frameset和frame，但它們都已廢棄，不再推薦使用。
每一個(gè)框結(jié)構(gòu)都有一個(gè)獨(dú)立的HTML文檔，而不包含以上三種框結(jié)構(gòu)中任意一種的網(wǎng)頁就是最簡單的框結(jié)構(gòu)。其示圖如下： 
對應(yīng)的，復(fù)雜的框結(jié)構(gòu)即多個(gè)框結(jié)構(gòu)復(fù)合在一個(gè)頁面中， 其示圖如下：
像上圖中的多框結(jié)構(gòu)，非常不適合移動(dòng)端，因?yàn)檫@種結(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
