結合jQuery +自定義腳本與異步或不？

當加速我們某個網站的初始加載速度時，我們將所有JavaScript都放在一個組合文件中，現在相當大 - 約90kb。所有的分析工具都會說「你應該切換到異步沒有JavaScript塊渲染你的網頁」。結合jQuery +自定義腳本與異步或不？

這就是我們今天

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="/js/script.js"></script>

我們的腳本依賴於jQuery的結束標記之前。所以，我的問題是，最好是有一個接近200kb的腳本，即jQuery與我們的腳本連接起來，這樣我們就知道jQuery在我們自己的腳本之前被加載，並且可以異步加載jQuery，或者有另一種方法可以在不涉及很多第三方解決方案，如headjs，reactjs等

放入代碼，這是

<script src="/js/combined.js" async></script>

比這

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="/js/script.js" async></script>

更好它是否幫助任何如果我們繼續jQuery的同步，並把我們的腳本異步或在這個意義上是危險的我們無法確定jQuery是否在我們之前加載？

或者，作爲一個非解決方案，我們是不是在乎這一點，並專注於其他的東西，即真的值得追求最後的性能收益？

任何見解將不勝感激。

來源

2015-07-10 Adergaard

@Adergarrd當你說「我們的所有的JavaScript」，你的意思是整個網站？ E.G不止一頁？ – bassxzero

是的。出於許多原因，我們將應用程序的基本邏輯放在一個相當大（90kb）的js文件中。統計圖表，日期時間選項卡等等，我們已經在腳本之外，並且它們被加載到他們需要的頁面上。他們不是問題。問題是 - 我們如何在不破壞順序的情況下實現異步。 – Adergaard

@Adergarrd在自定義js文件的頂部循環直到（window.jQuery！== undefined）是一個可怕的想法？ – bassxzero

更好的方法是使用一個腳本加載器，例如RequireJS或Head.JS.例如，Head.JS：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script> 

<script type="text/javascript"> 
    head.js(
    "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js", 
    "/js/script.js", 

    function() { 
     startMyCode(); 
    } 
); 
</script>

RequireJS是，它並沒有爲了而是依賴執行腳本功能更強大一些，但需要你來組織模塊代碼（而不是頭部。 JS，你可以使用它而不需要修改你的代碼）。

編輯：實際上，如果Head.JS似乎不再被維護，最好用$script.js去。澄清 - 這些事情做的是管理代碼的異步加載，然後確保在加載所有位時按正確順序執行它（按照Head.JS的順序，或以某種基於依賴關係圖的方式）。

來源

2015-07-10 04:14:50 Amadan

也許我的問題不是很清楚，但我們的主要抱怨是將腳本移動到異步加載。您的解決方案仍然同步加載afaik。還是謝謝。 – Adergaard

不，唯一的同步負載是'head.js'，它非常小。最初我錯過了你不想涉及第三方軟件，但它確實是這裏最好的選擇。 – Amadan

如果你想確保自己的腳本在jQuery之後加載，你可以添加延遲屬性。

看看這個：http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

來源

2015-07-10 04:16:56 Carlitrosss

推遲是異步的醜陋堂兄弟，因爲我明白，所以......不，謝謝。 – Adergaard

結合jQuery +自定義腳本與異步或不？

回答

相關問題