轉自：http://www.cnblogs.com/beyondstorm/archive/2008/09/17/1292940.html

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

一、html頁面的詳細加載過程是什么呢？頁面元素在加載時的優先級是什么？

　　二、javascript的作用域、變量的作用域、不同腳本段之間的關系？

　　三、html頁面的生命周期？

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

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

關于html的加載：

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

　　document.write("xxxx");

　　<script type="text/javascript" src="aaa.js"></script>

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

　　<script type="text/javascript" src="aaa.js"></script>

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

關于javascript的執行情況，請見本文后面所附的參考資料，里面有詳盡的討論。

關于html中頁面的生命周期：

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

　　我看了幾個站點的html源碼，發現如下代碼：

<div class="ad1602"><script src="/ggjs/view1602_w.js"></script></div>

　　這是某網站在頁面中顯示廣告的代碼，國內網站，顯示廣告一般都是用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();

???? }

?? }

}

這個函數寫得很巧妙。利用匿名函數搞定！

參考資料：

javascript 控制優化頁面 js 加載順序

html的加載過程

動態加載外部css或js文件

如何減少網頁的內存與CPU占用

Javascript在頁面加載時的執行順序

document.onLoad事件的奇怪現象

javascript中的attachEvent與addEventListener

判斷一個變量是否定義的方法

居然有js寫的Virtual OS

轉載于:https://www.cnblogs.com/jubincn/archive/2012/09/29/3381156.html

總結

以上是生活随笔為你收集整理的关于html和javascript在浏览器中的加载顺序问题的讨论的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。