javascript單獨執行順序和javascript和html混合執行順序
一、單獨討論javascript的執行順序
1 只有原生的javascript,沒有jquery。
1.1在<head>裡面的JS誰寫在前面,誰就優先執行。
1.2在<body>裡面的JS要比<head>裡面的JS後執行,因為html程式碼是先執行<head>再執行<body>的。同理JS誰寫在前面,誰就優先執行。
1.3最後頁面全部載入完成之後,就是從<head>一直到<body>全部執行完,觸發頁面載入完成函式onload()。
2.使用jquery的情況。
2.1在引入Jquery之後,執行順序的基本原則還是一樣的,誰先被引用誰就優先執行,所不同的是:$.(function)方法要在onload()方法之前執行。
總結:
JS的執行順序,由HTML的載入順序決定,誰寫在前面,誰就優先執行(無論是寫在頁面上的JS程式碼還是引入的JS檔案),最後執行onload()方法。如果有Jquery的$(function)或者$(document).ready(function(){}),其原則跟上面的原則一致,有出入的是:它優先onload()方法執行。
二、javascript和html混合執行順序
1.<head>中的內容按從上往下的順序執行。
2.<body>中的執行時:從上往下的順序執行(此時遇到html內容也不會渲染,我的理解是暫時載入到記憶體),直到遇到第一個<script>會執行完其中的js程式碼,而後開始渲染html。 一直按照這個順序執行。假設臨近</body>有一個相鄰的<p>我是最後的內容</p>,且body有onload 或Jquery的$(function)或者$(document).ready(function(){})的內容,則按順序執行Jquery的$(function)或者$(document).ready(function(){}),後執行onload,最後渲染<p>我是最後的內容</p>。
總結:<body>中的js和html執行的順序是:載入直到<script>之前的所有html到記憶體(此時不渲染,瀏覽器上看不到內容),執行完html直接兄弟<script>(此<script>後緊挨著還有<script>也不執行),而後渲染html。載入html->執行script->渲染html。
三、總結:
這麼執行的目的可能是:網頁大部分都是先寫html,在下面寫script,這script中有些對html樣式的指定,所以瀏覽器只能制定先載入html到記憶體,執行script,而後綜合整合樣式,後渲染。
注:因時間原因,沒放程式碼的圖片。
啟發博文:http://1017401036.iteye.com/blog/2107138