哪個JavaScript加載選項對頁面加載時間的影響最小？

比方說，我在www.website.com/javascripts/application.js，我想第三方網站加載了我的主機服務器上的JavaScript文件。哪個JavaScript加載選項對頁面加載時間的影響最小？

在這些第三方網站，你只需要添加：

<script src="www.website.com/javascripts/application.js" type="text/javascript"></script>

，但它需要完全加載頁面之前評估的所有JavaScript。

相反，如果第三方網站有這樣的事情

<script type="text/javascript> 
    var script = document.createElement('script'); 
    script.setAttribute('type', 'text/javascript'); 
    script.setAttribute('src', 'www.website.com/javascripts/application.js'); 
    document.getElementsByTagName('head').appendChild(script); 
</script>

將本作在頁面加載時間有什麼區別？它會異步加載JavaScript文件嗎？

那麼如果該網站有

<script src="www.website.com/javascripts/dynamic_loader.js" type="text/javascript"></script>

其鏈接到動態生成腳本標記鏈接到application.js文件右以上示例腳本？

這將是最好的選擇，爲什麼？有沒有更好的方式來加載我不知道的第三方JavaScript？

來源

2012-01-12 Justin Meltzer

你的第二個選項將異步加載腳本和腳本加載之前的頁面可以顯示。如果您針對頁面顯示時間進行優化，並且沒有頁面初始化腳本需要使用腳本，這可能是一個優勢。這可能是一個缺點（並且不會加快整個頁面的加載速度），如果其他所有內容都需要等待腳本加載才能完全填充頁面。

所以，這真的取決於腳本的作用。可以成功異步加載的一個完美例子是Google Analytics，因爲它是100％獨立的。頁面上沒有其他內容取決於它。與頁面顯示相關的加載完全無關緊要。

一個並不真正從異步加載中受益的例子是一個腳本，它在顯示初始內容或具有依賴腳本的腳本中扮演着不可或缺的角色，腳本在初始內容的顯示中起着不可或缺的作用。由於無論如何都無法看到內容，因此無法完成異步加載。當你只想要加載在需求模塊

動態加載（你的最後一個選項）是最有用的（不一定是在頁面加載時在所有），當他們真正需要（如果有的話）。

來源

2012-01-12 23:30:27 jfriend00

雖然如果OP只是把正常'script'標籤頁面最底部，儘管它可能會推遲「DOM已準備就緒」事件的種類（和窗口'load'事件），它不會阻止頁面被渲染和響應。事實上，這是通常的「把腳本放在最底部，如果你可以」的建議（例如來自[這裏]（http://developer.yahoo.com/performance/rules.html）），以及有很多原因可以避免使用「dom ready」類型的事件（你不能總是避免它們;例如，圖書館經常需要，因爲他們不知道它們將被加載到何處）。 – 2012-01-12 23:34:42

@ T.J.Crowder - 在頁面底部加載腳本是否仍然會延遲頁面的響應（儘管它不會延遲渲染）？畢竟，在加載所有常規（非異步）腳本之前，您不能擁有任何JavaScript事件。 – jfriend00 2012-01-13 03:04:08

哪個JavaScript加載選項對頁面加載時間的影響最小？

回答

相關問題