主頁(yè)面和iframe中加載資源的測(cè)試

《主頁(yè)面和iframe中加載資源的測(cè)試》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、主頁(yè)面和iframe中加載資源的測(cè)試對(duì)于iframe，我是比較少做測(cè)試的，今晚由于我的一個(gè)問(wèn)題“有沒(méi)有辦法讓頁(yè)面HTML內(nèi)容和其他資源并行加載”引發(fā)了我和瓶子之間的一番關(guān)于iframe的測(cè)試。首先是由于我的一個(gè)誤解“iframe會(huì)阻塞后面資源的下載”以及上面的問(wèn)題引發(fā)的“瀏覽器解析頁(yè)面和下載資源的順序問(wèn)題”開(kāi)始。在Webkit的官方博客中發(fā)表了這么篇文章：《HowWebKitLoadsaWebPage》，講述頁(yè)面解析HTML和下載資源的機(jī)制。文中就說(shuō)明了Webkit在加載一個(gè)頁(yè)面的時(shí)候存在兩個(gè)下載通道，一個(gè)用于加載htmldocument，另一個(gè)用于加載子資源（圖

2、片、CSS、JS等等），并且這兩個(gè)通道存在時(shí)間順序問(wèn)題（查看原文或者下面的圖示即可了解），這就說(shuō)明了“讓頁(yè)面HTML內(nèi)容和其他資源并行加載”就目前來(lái)說(shuō)是不可能實(shí)現(xiàn)的，因?yàn)檫@是由瀏覽器內(nèi)部的加載頁(yè)面的機(jī)制決定了。在這篇文章里，跟瓶子就“Frames”這個(gè)字眼見(jiàn)解有些不同，他認(rèn)為這就是跟普通頁(yè)面的iframe一樣的意思（這也是接下來(lái)一堆測(cè)試iframe的導(dǎo)火線(xiàn)），而我曾經(jīng)在某篇En文里看過(guò)Firefox中解析HTML頁(yè)面的時(shí)候，也提到了Frame這個(gè)字眼，而它所說(shuō)的Frame并不是普通html中的iframe，而是相當(dāng)于一個(gè)“暗箱”，或者說(shuō)是一個(gè)“容器”，來(lái)解析HTM

3、L頁(yè)面內(nèi)容。這個(gè)問(wèn)題未得到證實(shí)，就不多說(shuō)了。之后我就憑記憶說(shuō)了一句“加載iframe會(huì)阻礙后面的元素的加載”，我的本意是說(shuō)，當(dāng)iframe中有js、圖片、css等資源需要加載時(shí)，會(huì)阻塞主頁(yè)面中iframe后面資源的加載?？墒墙?jīng)過(guò)他的測(cè)試，發(fā)現(xiàn)說(shuō)“主頁(yè)面的html和iframe的html是并行加載的”。剛開(kāi)始我就納悶了，就拿出《高性能網(wǎng)站建設(shè)進(jìn)階指南》來(lái)查看關(guān)于iframe的內(nèi)容，發(fā)現(xiàn)書(shū)中并沒(méi)有關(guān)于“加載iframe會(huì)阻礙后面的元素的加載”的論述，而是敘述了當(dāng)iframe前面有CSS或者JS資源的時(shí)候，會(huì)阻塞iframe的加載（測(cè)試頁(yè)面），如果放到iframe其后的

4、話(huà)，則會(huì)iframe和主頁(yè)面會(huì)并行加載（測(cè)試頁(yè)面）。同時(shí)書(shū)中也指明了一點(diǎn)“iframe會(huì)阻礙主頁(yè)面onload事件的觸發(fā)”。經(jīng)過(guò)這一番測(cè)試，不得不承認(rèn)是我的失誤，記錯(cuò)了~但是我在測(cè)試過(guò)程中，通過(guò)觀察firebug和HTTPWatch生成的HTTP瀑布圖發(fā)現(xiàn)了一個(gè)比較有趣的事情：當(dāng)iframe在js、圖片、css等主頁(yè)面資源的前面的時(shí)候，在HTTP瀑布圖中顯示iframe內(nèi)的資源都是后于主頁(yè)面的資源加載的。我就納悶了，這么奇怪的問(wèn)題。接下來(lái)我就寫(xiě)了一個(gè)測(cè)試頁(yè)面，頁(yè)面中iframe內(nèi)的js文件中定義了一個(gè)函數(shù)，而且文件有100多K大?。辉谥黜?yè)面的fulljsmin.j

5、s文件中調(diào)用該函數(shù)，文件很?。y(cè)試頁(yè)面）。通過(guò)測(cè)試更有意思的是，成功調(diào)用了該函數(shù)，沒(méi)有出現(xiàn)未定義的錯(cuò)誤，這不是跟HTTP瀑布圖中顯示的不符合嗎？下面是在firebug和HTTPWatch下的HTTP瀑布圖：同時(shí)，在Chrome下用Inspect插件來(lái)測(cè)試，也都發(fā)現(xiàn)了這樣的情況。雖然在IE8下HTTPWatch中顯示iframe并沒(méi)有和主頁(yè)面并行加載，但是出現(xiàn)的問(wèn)題都基本跟上面所述一致。這難道是firebug、HTTPWatch、Inspect的一個(gè)bug？不可能同時(shí)都出現(xiàn)這個(gè)問(wèn)題吧？我想問(wèn)題還應(yīng)該是出在頁(yè)面加載iframe的機(jī)制上。對(duì)于這個(gè)問(wèn)題，我最初的想法是主頁(yè)

6、面在加載iframe的時(shí)候會(huì)開(kāi)啟另外一個(gè)進(jìn)程來(lái)加載iframe里面的資源，但是瀏覽器普遍都只能是兩個(gè)資源并行下載，iframe內(nèi)也同樣難逃這條規(guī)則。所以這個(gè)想法就錯(cuò)誤了，而瓶子對(duì)于這個(gè)頁(yè)面同時(shí)加載主頁(yè)面的資源和iframe內(nèi)的資源的看法是：1.父頁(yè)面html加載->html解析2.如果有iframe，就開(kāi)一個(gè)iframe線(xiàn)程下載html，重復(fù)步驟13.把頁(yè)面其他要請(qǐng)求的元素放入一個(gè)加載隊(duì)列，這個(gè)隊(duì)列是全局的，如果是iframe的html解析的時(shí)候，也會(huì)被加入到這個(gè)隊(duì)列里。但是最終會(huì)出現(xiàn)的順序可能有所不同，有的瀏覽器應(yīng)該會(huì)等html全部分析完再開(kāi)始執(zhí)行加載隊(duì)列，有的

7、則是一邊解析一邊對(duì)隊(duì)列進(jìn)行執(zhí)行。對(duì)于第一種情況，出現(xiàn)的順序應(yīng)該是：主頁(yè)面的內(nèi)容先加載，iframe里面的內(nèi)容會(huì)最后連續(xù)加載對(duì)于第二種情況，出現(xiàn)的順序可能是交叉的，不過(guò)iframe的加載應(yīng)該大多集中在一處。第一點(diǎn)看法是毋庸置疑的，但是第二點(diǎn)所說(shuō)的“開(kāi)一個(gè)iframe線(xiàn)程下載html，重復(fù)步驟1”，這點(diǎn)或許需要說(shuō)明一下，這開(kāi)一個(gè)iframe線(xiàn)程是受到瀏覽器通常只能同時(shí)兩個(gè)并發(fā)下載數(shù)的限制的，所以這里的新開(kāi)線(xiàn)程可能會(huì)受到CSS、JS文件的影響，就像開(kāi)頭說(shuō)的，CSS、JS在iframe前面的時(shí)候，會(huì)阻塞iframe的加載（測(cè)試頁(yè)面，這次在頁(yè)面中嵌套了兩個(gè)iframe）。從

8、下圖可以說(shuō)