討論html與javascript在瀏覽器中的加載順序問題
前一陣子橫掃了javascript,當(dāng)時(shí)自我感覺良好?,F(xiàn)在一想,又覺得沒什么。今天的任務(wù)是把a(bǔ)sp.net ajax中客戶端頁面生命周期那一章研究完。然而,因?yàn)檫@一章的內(nèi)容使我產(chǎn)生了一些迷惑。這些疑惑在書中都沒有只字提及。
一、html頁面的詳細(xì)加載過程是什么呢?頁面元素在加載時(shí)的優(yōu)先級(jí)是什么?
二、javascript的作用域、變量的作用域、不同腳本段之間的關(guān)系?
三、html頁面的生命周期?
這些問題真的打中了我的死穴。不了解這些,我就無法透過asp.net ajax的框架看到其底層原理。只知其然而不知其所以然。
在網(wǎng)上廣泛查閱資料的情況下。獲得了部分答案。
關(guān)于html的加載:
總體上,html的是按從上到下的順序邊加載邊解析,邊生成dom對(duì)象,至于在html中夾雜的:
document.write("xxxx");
<script type="text/javascript" src="aaa.js"></script>
之類的東西,它們的順序是怎樣的呢?還是一樣,如果在解析html時(shí),遇到這些東西就會(huì)停止解析,轉(zhuǎn)而執(zhí)行這些生成語句,如果中間外部鏈接,就轉(zhuǎn)而解析、執(zhí)行外部鏈接對(duì)應(yīng)的js。對(duì)于以下語句對(duì)于不同瀏覽器存在不同的結(jié)果:
<script type="text/javascript" src="aaa.js"></script>
在ie中。不會(huì)等待aaa.js下載并解析完的,會(huì)創(chuàng)建另一線程搞定它,而主線程則越過去。但在ff中。則會(huì)等待,直到aaa.js下載、解析、執(zhí)行完畢。
關(guān)于javascript的執(zhí)行情況,請(qǐng)見本文后面所附的參考資料,里面有詳盡的討論。
關(guān)于html中頁面的生命周期:
最重要的兩個(gè)事件就是onLoad、onUnLoad。onLoad在頁面加載完畢的時(shí)候觸發(fā)。onUnLoad在頁面的dom銷毀完后觸發(fā)。不過,onLoad有點(diǎn)特殊狀況,也請(qǐng)參見本文后面所附的參考資料。一定要引起注意。
我看了幾個(gè)站點(diǎn)的html源碼,發(fā)現(xiàn)如下代碼:
<div class="ad1602"><script src="/ggjs/view1602_w.js"></script></div>
這是某網(wǎng)站在頁面中顯示廣告的代碼,國內(nèi)網(wǎng)站,顯示廣告一般都是用iframe來引入第三方頁面,這兒卻是直接用javascript段來生成。后來,我又看了163博客生成的html代碼。整個(gè)html代碼只有一個(gè)架子,所有頁面的生成都是通過js。我看到它的頁面后面引入了幾個(gè)js文件,最后在頁面最后還有一個(gè)initAll函數(shù)的調(diào)用。我沒有去仔細(xì)研究它的js代碼,我懷疑它把所有表現(xiàn)層的功能全面放到客戶端的js文件中去了。服務(wù)器端僅僅是很少的頁面架子和許多的webservices。真是嘆為觀止啊。
關(guān)于一個(gè)事件觸發(fā)多個(gè)響應(yīng)函數(shù):
我曾想過要自己實(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()來操作事件列表。真是方便啊。當(dāng)時(shí)不大明白這個(gè)原理。今天看到后面參考資料中的兩段代碼讓我徹底明白這中間的細(xì)節(jié):
一、使用dom 2中的接口:
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
……
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
……
}
原來,dom中早有這個(gè)概念了。才曉得。看來,我對(duì)dom還是有許多不了解的地方啊。
二、這個(gè)方法就是純手實(shí)現(xiàn)了。請(qǐng)參見下面代碼:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
這個(gè)函數(shù)寫得很巧妙。利用匿名函數(shù)搞定!
相關(guān)文章
JS實(shí)現(xiàn)按比例縮放圖片的方法(附C#版代碼)
這篇文章主要介紹了JS實(shí)現(xiàn)按比例縮放圖片的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)等比例縮放圖片的原理與具體實(shí)現(xiàn)技巧,并附上C#版的圖片縮放代碼做對(duì)比參考,需要的朋友可以參考下2015-12-12
JavaScript中this函數(shù)使用實(shí)例解析
這篇文章主要介紹了JavaScript中this函數(shù)使用實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
js實(shí)現(xiàn)點(diǎn)小圖看大圖效果的思路及示例代碼
點(diǎn)小圖看大圖的效果想必很多的朋友都有見到過吧,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-10-10
原生JS實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)
下面小編就為大家?guī)硪黄鶭S實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
用javascript實(shí)現(xiàn)在小方框中瀏覽大圖的代碼
用javascript實(shí)現(xiàn)在小方框中瀏覽大圖的代碼...2007-08-08
javascript實(shí)現(xiàn)unicode與ASCII相互轉(zhuǎn)換的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)unicode與ASCII相互轉(zhuǎn)換的方法,涉及JavaScript字符串的遍歷、正則匹配及編碼轉(zhuǎn)換相關(guān)技巧,需要的朋友可以參考下2015-12-12

