首頁 > web前端 > js教程 > 討論html與javascript在瀏覽器中的載入順序問題_javascript技巧

討論html與javascript在瀏覽器中的載入順序問題_javascript技巧

WBOY
發布: 2016-05-16 17:12:11
原創
1089 人瀏覽過

前一陣子橫掃了javascript,當時自我感覺良好。現在一想,又覺得沒什麼。今天的任務是把asp.net ajax中客戶端頁面生命週期那一章研究完。然而,因為這一章的內容使我產生了一些迷惑。這些疑惑在書中都沒有隻字提及。

一、html頁面的詳細載入過程是什麼呢?頁面元素在載入時的優先順序是什麼?

二、javascript的作用域、變數的作用域、不同腳本段之間的關係?

三、html頁面的生命週期?

這些問題真的打中了我的死穴。不了解這些,我就無法透過asp.net ajax的框架看到其底層原理。只知其然而不知其所以然。

在網路上廣泛查閱資料的情況下。獲得了部分答案。

關於html的載入:

整體上,html的是依照從上到下的順序邊載入邊解析,邊產生dom對象,至於在html中夾雜的:

document.write("xxxx");

之類的東西,它們的順序是怎麼樣的呢?還是一樣,如果在解析html時,遇到這些東西就會停止解析,轉而執行這些生成語句,如果中間插入外部鏈接,就轉而解析、執行外部鏈接對應的js。對於以下語句對於不同瀏覽器有不同的結果:

在ie中。不會等待aaa.js下載並解析完的,會創建另一個線程搞定它,而主線程則越過去。但在ff中。則會等待,直到aaa.js下載、解析、執行完畢。

關於javascript的執行情況,請見本文後面所附的參考資料,裡面有詳盡的討論。

關於html中頁面的生命週期:

最重要的兩個事件就是onLoad、onUnLoad。 onLoad在頁面載入完畢的時候觸發。 onUnLoad在頁面的dom銷毀後觸發。不過,onLoad有點特殊狀況,也請參考本文後面所附的參考資料。一定要引起注意。

我看了幾個網站的html原始碼,發現如下碼:

這是某網站在頁面中顯示廣告的程式碼,國內網站,顯示廣告一般都是用iframe來引入第三方頁面,這兒卻是直接用javascript段來產生。後來,我又看了163部落格產生的html程式碼,超變態啊。整個html程式碼只有一個架子,所有頁面的產生都是透過js。我看到它的頁面後面引入了幾個js文件,最後在頁面最後還有一個initAll函數的呼叫。我沒有去仔細研究它的js程式碼,我懷疑它把所有表現層的功能全面放到客戶端的js檔案中去了。伺服器端只是很少的頁面架和許多的webservices。真是嘆為觀止。

關於一個事件觸發多個回應函數:

我曾想過要自己實現一個c#中委託一樣的東西。可以讓javascript的事件不只關聯到一個function。可以一次觸發一個事件清單。這幾天研究asp.net ajax,裡面對此有封裝。

asp.net ajax中,可以把一個dom元素封裝成asp.net ajax中的Sys.UI.DomElement物件。然後就可以用它的方法:addHandler()、addHandlers()、removeHander()來操作事件清單。真是方便。當時不大明白這個原理。今天看到後面參考資料中的兩段程式碼讓我徹底明白這中間的細節:

一、使用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中早有這個概念了。才曉得。看來,我對dom還是有許多不了解的地方。

二、這個方法就是純手實現了。請參閱下方程式碼:

複製程式碼 程式碼如下:

function addLoadEvent(func) {

   var oldonload = window.onload;

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

window.onload = func;

   } else {

     window.onload = function() {

       if (oldonload) {

         oldonload();

       }

       func();

     }

   }

}


這個函數寫得很巧妙。利用匿名函式搞定!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板