この場合、ダイナミックに追加されたスクリプトファイルはどのような順序で実行されますか？

私はここの記事を読む：この場合、ダイナミックに追加されたスクリプトファイルはどのような順序で実行されますか？

https://varvy.com/pagespeed/defer-loading-javascript.html

をそれは私がJavaScriptをロードするために、このようなものを使用する必要があることを述べている：

<script type="text/javascript"> 
function downloadJSAtOnload() { 
    var element = document.createElement("script"); 
    element.src = "defer.js"; 
    document.body.appendChild(element); 
} 
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script>

私はロードする複数のdefer.jsを持っている場合、私は、疑問に思ってどのような順序で実行されますか？例えば

：

<script type="text/javascript"> 
function downloadJSAtOnload() { 
    var element1 = document.createElement("script"); 
    element.src = "defer1.js"; 
    document.body.appendChild(element); 

    var element2 = document.createElement("script"); 
    element.src = "defer2.js"; 
    document.body.appendChild(element); 
} 
if (window.addEventListener)window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent)window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script>

がdefer1.jsを確実defer2.js前に実行されますか？

おかげ

出典

2016-11-11 Aw Qirui Guo

上の記事では、これは単に直前に、文書の最後にスクリプトタグを置くよりも優れていると主張します終了タグ「」。失礼ですが同意できません。それは何十年もの間、数百万のウェブサイトで美しく働いています。 –

私はロードするために、複数のdefer.jsを持っている場合、私は何のためにそれが実行されるだろう、疑問に思って？

Chaotically。

defer1.jsはdefer2.jsより前に実行されますか？

号

あなたが動的にそのようなスクリプトを追加、順序について保証するものではありません。それらは検索されるとすぐに実行されるので、より早くdefer2.jsを検索すると、最初に実行されます。

順番に実行するには、順番にリクエストする必要があります。defer1.jsにloadイベントが届くまで、defer2.jsをリクエストすることはできません。これは、ブラウザーが並行して要求を行うことができないため、JavaScriptを遅くダウンロードすることを意味します。これは、文書末尾にスクリプトタグ</body>が置かれた直前に置くだけです。

あなたがPageSpeed Insightsの評価によるからのより少なくより完璧なスコアを得ることを懸念していると述べました。心配しないでください。リンクされた記事にもかかわらず、PageSpeed Insightsは、</body>タグの直前のscriptタグが読み込み時間の問題を引き起こさないことを知るのに十分なスマートです。の

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Testing</title> 
<meta name=viewport content="width=device-width, initial-scale=1"> 
<style> 
body { 
    font-size: 16px; 
} 
</style> 
</head> 
<body> 
<p>Testing 1 2 3.</p> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="script1.js"></script> 
<script src="script2.js"></script> 
</body> 
</html>

（。script1.jsとscript2.jsがそれらにjQueryのコードのビットを有する場合）

：あなたは適切なキャッシングヘッダではJavaScriptを果たす場合は、このページには、例えば、PageSpeed Insightsの評価による上100/100を受け取ります可能であれば、可能であればscript1.jsとscript2.jsを組み合わせてください;その1つの結合されたファイルにjQueryを含めるか上記のようにCDNを使用するかのどちらかの引数があります）。

出典

2016-11-11 08:29:15

しかし、私が ''タグの直前に置くと、Google Speed Insightは私にフルスコアを与えませんでした。どのように私は完璧なソリューションでそれを行うことができますか？ –

@AwQiruiGuo：それは実際には本当ですか？私はちょうどそれをテストし、100/100（デスクトップのために、私のテストページはモバイルに対応していませんでした）。当然のことながら、PageSpeed Insightは、「」タグを閉じる直前の 'script'タグは、あなたの読み込み性能に影響しません。 –

「」の直前にスクリプトタグを置いて保存している限り、あなたは意味しますか？プライベートでない場合は、あなたのページを送ってもらえますか？ありがとう！ –

appendChild()は、スクリプトノードを同期的に付加しますが、スクリプトを非同期にロードします。したがって、実行順序は未定義です（ネットワークの遅延に依存します）。

出典

2016-11-11 08:32:44 MarcoS

defer1.jsは、このスクリプトは、Th1 1つのロード第1および defer2.jsをロードしますので、

出典

2016-11-11 09:42:45 rani

この場合、ダイナミックに追加されたスクリプトファイルはどのような順序で実行されますか？

答えて

関連する問題