推遲為JQuery加載解析JavaScript

Question

在使用Google Page Speed測試網站時，我發現我無法擺脫Defer parsing of JavaScript 。 我刪除了所有的javascript代碼，只剩下一個小代碼

<script defer type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.test').click(function(){
            $(this).slideDown();
        });
    });
</script>

或者甚至沒有任何jquery代碼，只需將jQuery文件單獨加載為

<script defer type="text/javascript" src="jquery.min.js"></script>

仍然得到Defer parsing of JavaScript的警告。

Answer 1

@samsaffron寫了一篇關於推遲jQuery的好文章 - http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

Answer 2

我找到了這個文檔頁面 ，其中說明：

要使用此技術，首先應確定onload事件之前文檔實際未使用的所有JavaScript函數。 對於包含超過25個未調用函數的任何文件，將所有這些函數移動到單獨的外部JS文件中。 這可能需要對代碼進行一些重構以解決文件之間的依賴關系。 （對於包含少於25個未調用函數的文件，重構的努力是不值得的。）

然后，在包含文檔的頭部插入一個JavaScript事件偵聽器，強制在onload事件之后加載外部文件。 您可以通過任何常用的腳本方式執行此操作，但我們建議使用非常簡單的腳本化DOM元素（以避免跨瀏覽器和同域策略問題）。 這是一個例子（其中“deferredfunctions.js”包含要延遲加載的函數）

我從中理解：你應該從一個onload事件處理程序“懶惰加載”jQuery（參見上面的鏈接，了解如何執行此操作的示例）。

Answer 3

不應該那樣

<script defer='defer' type="text/javascript" src="jquery.min.js"></script>

而不是提供空defere屬性使用defer ='defer'

Answer 4

只需將此添加到您的腳本async示例中：

<script type="text/javascript" async src="jquery.min.js"></script>