1. 程式人生 > >javascript單獨執行順序和javascript和html混合執行順序

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