私のページの読み込みは非常に重要です。ロード後、私は非常にjavascriptファイルを持っていますが、これはページが読み込まれてから10秒後までは「必要」ではありません。最初のページの読み込みを遅くすることなく、外部シートを最適にロードするにはどうすればよいですか？遅延Javascriptの読み込み
setTimeout(function(){
//import Javascript
},500);
JavaScriptをどのようにインポートしますか？ これはページの読み込み速度を上げますか？ 他のテクニックも使えますか？
私はこれが「価値がある」かどうかの分析には興味がありません。
（注：私は実際にはChromeの拡張機能のコンテキストでこれをやっている、私はそれが飛躍的に重要ではないと思います）
async属性を使用すると、スクリプトでページのレンダリングがブロックされません。
<script src="path/script.js" async></script>
、ページがロードされた後、あなたのが本当にスクリプトを実行したくない場合、あなたはまた、window.onloadでコードをラップすることができます。この方法では、スクリプトのダウンロードはページのレンダリングを妨げず、ページが読み込まれるまでコードは実行されません。
EDIT：
（お使いのブラウザがサポートしている場合）、全体DOMがロードされるまで、それは実際に待っているので、deferだろうでも良いだろう別の方法を、代わりにasyncこれはスクリプトの読み込みを並列化するだけです。したがって：
<script src="path/script.js" defer></script>
OPのポストでは、' defer'がいいですね。 'async'はロードされるたびにレンダリングをブロックするので、' path/script.js'が小さければそれほど役に立ちません。 – Jay
私は同意します。私が「延期」しない理由は、MDNによれば、すべての主要なブラウザによって実装されていないからです。私はその声明を検証する他のリソースを見つけるのに苦労していますが。それについてのアイデア？ –
ああ、良い点！私はそれについて考えなかった。私はOPはChrome拡張機能でそれをやっていると言いますが、Chromeのdefは「遅れています」と言います。私はIEのほとんどのバージョンがおそらくそうではないように感じる、あなたは正しいよ – Jay
ちょうどそのようなGoogleからのものなど、ほとんどの分析スクリプト、同じように、彼らは通常、下に行きます閲覧可能なコンテンツの読み込みを妨げることはありません。私は正確に負荷とコンテンツ/すべてのリソースの読み込みをシーケンシングするタイミングを正確に得ることで得られるものはないと思います。これは、コード内で何が起こっているかを正確に把握せずに、多くのテクニックの1つです。
この記事の内容は、https://varvy.com/pagespeed/defer-loading-javascript.htmlです。
リソースの遅延ロードにより、より早くトリガーされるロードイベントが可能になります – charlietfl
右</body>前にスクリプトを保ち、単一のファイルにあなたのJavaScriptのすべてを置きます。複数の.jsファイルを読み込まないようにしてください。それでおしまい。
これを試してみてください。
function loadJs(url) {
var script = document.createElement('script');
script.src = url;
script.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(script);
}
は、設定時間後にJSを読み込むために
loadJs("your-script.js");
で関数を呼び出し、
setTimeout(function(){
loadJs("your-script.js");
},500);
他のすべてのコンポーネントがあるときにも、それを呼び出すことができますロード済み
window.onload = function() {
loadJs("your-script.js");
}
新しく作成されたスクリプト要素を追加し、ファイルに 'src'を作成します – charlietfl