js遅延荷重の方法は何ですか?

7828 ワード

js。

deferとasync属性、動的にDOM方式を作成し(一番多く使う)、必要に応じてjsを非同期でロードします.注:(setTimeOut(js,time)
JSのロードが遅れています.つまり、ページの読み込みが完了したら、JavaScriptファイルをロードします. JSの遅延荷重はページの読み込み速度を上げるのに役立ちます.
1.defer属性
HTML 4.01はタグがされています. defer です. :スクリプトはにページのにしないことをします.つまり、スクリプトはページをしたにされます.での defer は、ブラウザにすぐにダウンロードするということですが、がれています.


<html>
<head>
    <script src="test1.js" defer="defer">script>
    <script src="test2.js" defer="defer">script>
head>
<body>

body>
html>

1 2 3 4 5 6 7 8 9 10 :ですがをにれましたが、まれているスクリプトはブラウザがタブにしてからします.HTML5 によると、スクリプトはそれらのにされる. には、ディレイシナリオはずしもにされるとはらない.defer はスクリプトファイルにのみされます.HTML 5のをサポートします. めみスクリプトのはされます. defer です
2.async
HTML 5はタグがされています. async です.deferとに、スクリプトののをするためにされる. に、スクリプトファイルにのみされます. :ページをスクリプトのダウンロードとをつことなく、ページののコンテンツをにみみます.
スクリプトはずページのロードイベントのにされます. スクリプトがにされるとはできません.


<html>
<head>
    <script src="test1.js" async>script>
    <script src="test2.js" async>script>
head>
<body>

body>
html>

1 2 3 4 5 6 7 8 9 10 asyncはdeferとじで、ののダウンロードをブロックしないので、ページのロードにしません. :ロードのをコントロールできない
3.ダイナミックにDOM をする

//         body>   (  HTML    )
<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = 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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 4.jQueryをうget Script()

$.getScript("outer.js",function(){//    ，              
      console.log("      ")  
});

1 2 3 5.setTimeout をする
6.JSににロードさせる
js からしたファイルをページのにいて、にjsをして、ページのみみをめます.

reduxはどのように倉庫の値を修正し、コンポーネントをコンテナコンポーネントとuiコンポーネントに分割するかを話します.