37

asyncスクリプトにいくつかの属性を追加して、ページを最適化しようとしています。$(document).readyすべてのスクリプトがロードされる前に実行されるため、JavaScript が壊れているようです。

$(window).load代わりに置くことで問題を解決できること$(document).readyがわかりましたが、より良い解決策があるかどうか疑問に思っていました。私の場合、このソリューションは2つの問題を引き起こします：

  1. 私はすべてを変更し$(document).ready、すべての開発者にもう使用しないように伝えなければなりません
  2. スクリプトは、すべての画像が読み込まれた後に実行されます。私のウェブサイトには大量の画像が含まれており、DOM の準備ができたらできるだけ早くスクリプトを実行する必要があります。

手品はありますか？たぶん、すべてのスクリプトを最後に置きますか？deferの代わりに使用しasyncますか?

4

3 に答える 3

33

広範な調査の結果、ページの最後にスクリプトを配置することがベスト プラクティスであると断言できます。

Yahoo は私に同意します: http://developer.yahoo.com/performance/rules.html#js_bottom

Google はこの慣行について語らず、非同期スクリプトを好むようです: https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

IMHO、ページの最後にスクリプトを配置すると、非同期/遅延よりもいくつかの利点があります。

  • すべてのブラウザーで動作します (はい、IE でも ;) )
  • 実行順序を保証します
  • $(document).readyまたは使用する必要はありません$(window).load
  • 画像が読み込まれる前にスクリプトを実行できます
  • 非同期/遅延として、ページがより速く表示されます
  • DOM が ready イベントをトリガーすると、すべてのスクリプトが読み込まれます
  • すべての js を 1 つのファイルにマージすることで問題なく最適化できます (mod_pagespeed などのツールを使用)。

私が見ることができる唯一の欠点は、ブラウザーがダウンロードを並列化できないことです。代わりに async/defer を使用する正当な理由の 1 つは、スクリプトが完全に独立しており (実行順序に依存する必要がない)、特定のタイミングで実行する必要がない場合です。例: Google アナリティクス。

于 2012-06-15T11:20:33.303 に答える
1

スクリプト ローダーを使用したくない場合は、次のように変更して、$(document).ready スクリプトをそのままにしておくことができる次のアプローチを使用できます。

$(()=>{

    function checkAllDownloads() {
        // Ensure your namespace exists.
        window.mynamespace = window.mynamespace || {};

        // Have each of your scripts setup a variable in your namespace when the download has completed.
        // That way you can set async on all your scripts except jquery.
        // Use the document ready event - this code - to check if all your scripts have downloaded.
        if (window.mynamespace.script1 && window.mynamespace.script2){

          // Proceed with page initialisation now that all scripts have been downloaded.
          // [ Add your page initialisation code here ].
          return;
        } 
        // Not all downloads have completed.
        // Schedule another check to give the async downloads time to complete.
        setTimeout(checkAllDownloads, 500);
    }

    // check if it is safe to initialise the page by checking if all downloads have completed.
    checkAllDownloads();

    })
于 2018-11-12T09:14:03.480 に答える