加載內容和JavaScript的HTML順序

我有一個註冊頁面，一些JS僅用於該頁面，另一個JS用於3個不同的頁面。所以，JS這個頁面只有我已經寫了裏面的標籤，並在第二和外部文件，該文件被列入body標籤加載內容和JavaScript的HTML順序

代碼示例

HTML 
... 
<script type="text/javascript" scr="src.js"></script> 
<script type="text/javascript"> 
//some JS and jQuery code 
</script>

在其順序並在瀏覽器加載網頁？如果它正在讀取HTML，那麼當它找到第一個腳本時，它是否會加載該腳本，等到它完全加載，然後繼續閱讀HTML？

因爲在內部JS我使用外部的一些功能，如jQuery $（document）.ready（）函數，我想知道，如果這個事件是在DOM準備好時觸發的，所以這意味着函數是外部JavaScript？

來源

2012-08-14 Arxeiss

不要以任何態度採取這種態度，因爲沒有暗示，但你不能只是試試這個，看看會發生什麼？ – j08691 2012-08-14 16:38:19

@ j08691：我想他是想知道它是否被強制執行，或者如果這恰好是他現在在他的特定瀏覽器中的行爲。 – DaoWen 2012-08-14 16:39:32

近代瀏覽器，當讀取到外部變量（一個src屬性），將下載該腳本異步，也就是說，繼續閱讀/腳本它被下載時解析HTML。但是，瀏覽器會阻止所有後續腳本的執行（請注意不要下載），想到腳本執行隊列，所有腳本都會逐個排隊並執行，但下載是異步的。

高級瀏覽器（主要是IE6和IE7）不同，它們會阻止HTML解析過程，等待腳本被下載並執行，並繼續解析剩餘的HTML。

綜上所述：下載和執行是一個腳本的不同階段，近代的瀏覽器塊執行階段，下載可能是異步和平行提升了性能，早期的瀏覽器塊下載階段這使得頁面解析效率降低。

來源

2012-08-14 16:41:40 otakustay

謝謝。我需要這樣解釋。所以在HTML中的內聯JS中，我可以使用外部的函數等，因爲它將在執行外部（在我的情況下，因爲外部在上面）執行。非常感謝你 – Arxeiss 2012-08-14 17:17:52

wait until he isn't completely loaded and continue reading HTML

這不是它的工作原理，在頁面異步加載。

in internal JS I use some functions from external script, and in internal script is jQuery $(document).ready() function, and I want to know, if this event is triggered, when DOM is ready, so this mean even external JavaScript?

當通話連接到文檔準備事件，它們連接在它們被添加的順序隊列中，然後按順序調用。

來源

2012-08-14 16:38:17

儘管真的存在異步加載，但是當瀏覽器看到腳本標記時，它會停止加載其他東西，直到下載javascript爲止，這就是爲什麼在頁面底部包含儘可能多的腳本而不是頂部會提高性能在訪問者看到您的內容更快。請參閱：http://stackoverflow.com/questions/11786915/javascript-on-the-bottom-of-the-page – Wolfe 2012-08-14 16:40:21

是的，如果DOM準備好事件被觸發，這意味着所有的JavaScript已經被加載和解析。

來源

2012-08-14 16:38:31 DaoWen

只要它到達腳本標記，瀏覽器就會停止加載其他內容，直到它被解釋爲止。這意味着它會阻止（等待）並且不會開始獲取圖像或其他內容，直到完成。

只要代碼存在，在你調用它之前（比如說一個函數調用），它就不會給你任何錯誤。只要$（document）.ready（）函數被定義，在使用它之前，所有的代碼都應該是安全的，它是從$（document）.ready（）中調用的。

來源

2012-08-14 16:38:47 Wolfe

瀏覽器會先解析頭部。它將解析<head>中的html，並執行遇到的任何腳本。這將阻止頁面的加載。在<head>之後，它將以類似的方式解析<body>。這就是爲什麼把你的代碼放在一個函數中並且調用它onload對於你想訪問dom很重要。

希望這會有所幫助！如果您需要其他東西，請在下面發表評論。

來源

2012-08-14 16:44:28 starbeamrainbowlabs

我在內聯腳本'$（document）.ready（）;'所以我可以使用DOM，因爲我在ready（）中有重要的事情。 – Arxeiss 2012-08-14 17:12:58

你可以使用''也許？ – starbeamrainbowlabs 2012-08-14 17:13:53

是的，但爲什麼？我有jQuery，它更舒適。當所有圖像加載時，onload被觸發，而不僅僅是DOM。看看這裏[鏈接]（http://stackoverflow.com/questions/191157/window-onload-vs-body-onload） – Arxeiss 2012-08-14 17:24:53

腳本按照給出的順序加載。所以你的情況，你的內聯腳本

<script type="text/javascript"> 
//some JS and jQuery code 
</script>

可以在包含的腳本"src.js"定義使用對象。

在創建DOM對象之前，您無法操作它們。

<body> 
    <div id="div1"></div> 

    <script> 
    // this code can work with div1 
    // but cannot work with div2 
    </script> 

    <div id="div2"></div> 
</body>

所以，如果你的腳本工作與DOM，您可以：

把它在<body>（僅當它是一個內嵌腳本）
後，才調用它的結束整個DOM構造：

<body onload="myFunctionThatManipulatesDOM();">

當然，第二種方法更清潔。將您的腳本包含在<head>部分中，然後在頁面加載到body.onload事件中後啓動它們。

來源

2012-08-14 16:44:44 Imp

加載內容和JavaScript的HTML順序

回答

相關問題