ホームページ > 記事 > ウェブフロントエンド > js で遅延読み込みを実装する方法は何通りありますか? js で遅延読み込みを行う 6 つの方法の紹介

js で遅延読み込みを実装する方法は何通りありますか? js で遅延読み込みを行う 6 つの方法の紹介

不言オリジナル: 2018-08-22 11:37:012552ブラウズ

この記事の内容は、js で遅延読み込みを実装する方法は何通りあるのかについてです。 js の遅延読み込みの 6 つの方法の紹介は、参考になると思います。

JS 遅延読み込み。これは、JavaScript ファイルを読み込む前にページが読み込まれるのを待つことを意味します。
JS の遅延読み込みにより、ページの読み込み速度が向上します。
一般的なメソッドは次のとおりです:

defer属性
async属性
DOMメソッドの動的作成
jQueryのgetScriptメソッドを使用
setTimeout遅延メソッドを使用
JSを最後にロードする

1. defer属性
HTML 4.01は3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは defer 属性を定義します。 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签定义了 defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

在3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

说明：虽然3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素放在了93f0f5c25f18dab9d176bd4f6de5d30e元素中，但包含的脚本将延迟浏览器遇到73a6ac4ed44ffec12cee46588e518a5e标签后再执行。

HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行。

defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。

2、async属性

HTML5 为 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签定义了 async属性。与defer目的: スクリプトが実行時にページの構造に影響を与えないことを示します。つまり、スクリプトは、実行前にページ全体が解析されるまで遅延されます。 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素に defer 属性を設定します。これは、ブラウザにすぐにダウンロードするが実行を遅らせるように指示するのと同じです。

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

注: 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素は 93f0f5c25f18dab9d176bd4f6de5d30e 要素内に配置されていますが、含まれているスクリプトによりブラウザが e1132614dfd1d78b0f137c3955f8a178 タグを実行する前に。

HTML5 仕様では、スクリプトは出現順に実行する必要があります。実際には、遅延スクリプトは必ずしも順番に実行されるわけではありません。

defer 属性は外部スクリプトファイルにのみ適用されます。 HTML5 をサポートする実装では、埋め込みスクリプトによって設定された defer 属性が無視されます。

2. async 属性

HTML5 は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの async 属性を定義します。 defer 属性と同様に、これらは処理スクリプトの動作を変更するために使用されます。繰り返しますが、

は外部スクリプトファイルでのみ機能します。

目的: ページの他のコンテンツを非同期でロードするために、スクリプトがダウンロードされて実行されるまでページを待たせないでください。

非同期スクリプトは、ページ読み込みイベントの前に実行する必要があります。 スクリプトが順番に実行されるという保証はありません。

//这些代码应被放置在</body>标签前（接近HTML文件的底部）
<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",downloadJAAtOnload);    
        else
        window.onload = downloadJSAtload;</script>

非同期は、遅延と同様に、他のリソースのダウンロードをブロックしないため、ページの読み込みには影響しません。欠点: ロードの順序を制御できません

3. DOMメソッドを動的に作成します

$.getScript("outer.js",function(){  
//回调函数，成功获取文件后执行的函数
    console.log("脚本加载完成")
});

5. setTimeoutの遅延メソッドを使用します

6. JS を最後に読み込むようにします

js で遅延読み込みを実装する方法は何通りありますか? js で遅延読み込みを行う 6 つの方法の紹介

関連記事