快捷導(dǎo)航

討論html與javascript在瀏覽器中的加載順序問(wèn)題

更新時(shí)間：2013年11月27日 09:59:30 投稿：jingxian

這篇文章主要是對(duì)html與javascript在瀏覽器中的加載順序問(wèn)題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

前一陣子橫掃了javascript，當(dāng)時(shí)自我感覺(jué)良好?，F(xiàn)在一想，又覺(jué)得沒(méi)什么。今天的任務(wù)是把a(bǔ)sp.net ajax中客戶端頁(yè)面生命周期那一章研究完。然而，因?yàn)檫@一章的內(nèi)容使我產(chǎn)生了一些迷惑。這些疑惑在書(shū)中都沒(méi)有只字提及。

一、html頁(yè)面的詳細(xì)加載過(guò)程是什么呢？頁(yè)面元素在加載時(shí)的優(yōu)先級(jí)是什么？

二、javascript的作用域、變量的作用域、不同腳本段之間的關(guān)系？

三、html頁(yè)面的生命周期？

這些問(wèn)題真的打中了我的死穴。不了解這些，我就無(wú)法透過(guò)asp.net ajax的框架看到其底層原理。只知其然而不知其所以然。

在網(wǎng)上廣泛查閱資料的情況下。獲得了部分答案。

關(guān)于html的加載：

總體上，html的是按從上到下的順序邊加載邊解析，邊生成dom對(duì)象，至于在html中夾雜的：

document.write("xxxx");

之類的東西，它們的順序是怎樣的呢？還是一樣，如果在解析html時(shí)，遇到這些東西就會(huì)停止解析，轉(zhuǎn)而執(zhí)行這些生成語(yǔ)句，如果中間外部鏈接，就轉(zhuǎn)而解析、執(zhí)行外部鏈接對(duì)應(yīng)的js。對(duì)于以下語(yǔ)句對(duì)于不同瀏覽器存在不同的結(jié)果：

在ie中。不會(huì)等待aaa.js下載并解析完的，會(huì)創(chuàng)建另一線程搞定它，而主線程則越過(guò)去。但在ff中。則會(huì)等待，直到aaa.js下載、解析、執(zhí)行完畢。

關(guān)于javascript的執(zhí)行情況，請(qǐng)見(jiàn)本文后面所附的參考資料，里面有詳盡的討論。

關(guān)于html中頁(yè)面的生命周期：

最重要的兩個(gè)事件就是onLoad、onUnLoad。onLoad在頁(yè)面加載完畢的時(shí)候觸發(fā)。onUnLoad在頁(yè)面的dom銷毀完后觸發(fā)。不過(guò)，onLoad有點(diǎn)特殊狀況，也請(qǐng)參見(jiàn)本文后面所附的參考資料。一定要引起注意。

我看了幾個(gè)站點(diǎn)的html源碼，發(fā)現(xiàn)如下代碼：

這是某網(wǎng)站在頁(yè)面中顯示廣告的代碼，國(guó)內(nèi)網(wǎng)站，顯示廣告一般都是用iframe來(lái)引入第三方頁(yè)面，這兒卻是直接用javascript段來(lái)生成。后來(lái)，我又看了163博客生成的html代碼。整個(gè)html代碼只有一個(gè)架子，所有頁(yè)面的生成都是通過(guò)js。我看到它的頁(yè)面后面引入了幾個(gè)js文件，最后在頁(yè)面最后還有一個(gè)initAll函數(shù)的調(diào)用。我沒(méi)有去仔細(xì)研究它的js代碼，我懷疑它把所有表現(xiàn)層的功能全面放到客戶端的js文件中去了。服務(wù)器端僅僅是很少的頁(yè)面架子和許多的webservices。真是嘆為觀止啊。

關(guān)于一個(gè)事件觸發(fā)多個(gè)響應(yīng)函數(shù)：

我曾想過(guò)要自己實(shí)現(xiàn)一個(gè)c#中一樣的東西?？梢宰宩avascript的事件不止是關(guān)聯(lián)到一個(gè)function?？梢砸淮斡|發(fā)一個(gè)事件列表。這幾天研究asp.net ajax，里面對(duì)此有封裝。

asp.net ajax中，可以把一個(gè)dom元素封裝成asp.net ajax中的Sys.UI.DomElement對(duì)象。然后就可以用它的方法：addHandler()、addHandlers()、removeHander()來(lái)操作事件列表。真是方便啊。當(dāng)時(shí)不大明白這個(gè)原理。今天看到后面參考資料中的兩段代碼讓我徹底明白這中間的細(xì)節(jié)：

一、使用dom 2中的接口：

復(fù)制代碼代碼如下:

if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
……
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
……
}

原來(lái)，dom中早有這個(gè)概念了。才曉得?？磥?lái)，我對(duì)dom還是有許多不了解的地方啊。

二、這個(gè)方法就是純手實(shí)現(xiàn)了。請(qǐng)參見(jiàn)下面代碼：

復(fù)制代碼代碼如下:

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

if (oldonload) {

oldonload();

}