2010-03-06 36 views
20

我經常看不到有關JavaScript文件加載/執行順序的討論或研究。我對解釋JavaScript如何處理的網站很感興趣。特別是,如果我有JavaScript文件如何加載和執行?

<script src="a.js"></script> 
<script src="b.js"></script> 
<script src="c.js"></script> 

我相信a.js首先下載,然後b.js最後c.js或者他們正在同時下載?執行怎麼樣?標題中的腳本優先於身體中的腳本?

我對這個主題非常感興趣的主要原因是因爲我正在編寫一個使用這些腳本的動態加載的JavaScript軟件,有時候我得到像x這樣的錯誤是未定義的(它尚未加載腳本),但通常這些錯誤不會發生。我不明白爲什麼。

+0

在代碼中添加java腳本文件,就像在代碼中包含javascript代碼一樣。 (如我們需要或包含在PHP中)。 – Pavunkumar 2010-03-06 10:35:45

+0

而且,它將同時工作,根據您根據事件調用的函數 – Pavunkumar 2010-03-06 10:40:24

+1

關於此主題的一些較好的閱讀內容:http://www.stevesouders.com/blog/2010/02/07/browser-script-loading -roundup/http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/ http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without -blocking /和一個很好的非阻塞解決方案:http://labjs.com/ – hojberg 2010-03-06 16:46:37

回答

14

腳本是以並行方式下載的,但是按照它們在HTML中出現的順序進行分析和執行,阻止頁面上的其他操作(包括渲染)直到它們執行完畢。如果腳本是通過DOM代碼通過JavaScript添加的,或者Firefox的最新版本中存在async attribute,則腳本可能是非阻塞的。

+1

腳本是並行下載的,但如果'c.js'在'b.js'或'a.js'之前下載,瀏覽器將會等到先前的腳本被下載並執行以執行'c.js'。 – AxeEffect 2015-11-30 06:21:26

3

什麼控制JavaScript下載主要是您的瀏覽器。如果你從同一個域加載它們,就像你在上面做的那樣,它們將一個接一個地加載,因此按你指定的順序加載。

作爲一個簡單的測試,您可以簡單地嘗試在每個文件上指定函數,並嘗試從列表中的下一個文件調用它們,以便您可以看到它們加載的順序。

在考慮到負載,大多數網站優化的書會告訴你在最底層來加載JS文件的優先級,因爲這會讓你的頁面加載速度更快,JS文件將被載入需要的最後資源。這需要小心完成,如果您的頁面在加載時直接依賴JavaScript,則可能會導致無盡的js錯誤。

庫如jQuery將有很大的幫助與,當爵士在HTML的底部加載它們只會讓JS的動作發生,一旦DOM可用,因此沒有JS錯誤。

另一個有趣的事情是確保你保持你的js文件適當縮小,並堅持q最少的文件,這樣做,你只做了幾個服務器請求,我會有你的JavaScript隨時可用。

希望這可以幫助你。