Javascript、CSSとIMGのウェブページは探求を実行します

39731 ワード
JavaScript
テスト環境:windows/chrome
例1:画像のみ
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <img src="1.jpg" width="200" height="300" />
</body>
</html>


Javascript、CSS和IMG之网页执行探索_第1张图片
1、上の図の赤い枠から出た青い線がDOMContentLoaded eventの時間で、この時の画像(1.jpg)はまだロードされていないので、ちょうどSend Request(1.jpg)です.これにより、DOMContentLoadedイベントは、ピクチャのロードが完了するのを待っていないことがわかる.
2、画像1.jpgはロードが完了するとすぐに復号化される(Image Decode).
 
例2:ページにcssとピクチャがある
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
        <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <img src="1.jpg" width="200" height="300" />
</body>
</html>

Javascript、CSS和IMG之网页执行探索_第2张图片
Javascript、CSS和IMG之网页执行探索_第3张图片
上の図からわかります.
1、DOMContentLoadedイベントはCSSファイルと画像のロード完了を直接待たない.
2、CSSはピクチャの復号をブロックした.画像をロードしてからRecalculate StyleやLayoutがあることは、CSSでは画像のスタイル上の修正などが行われている可能性があるので、理論的には理解できます.だからCSSのロードと実行が終わるまで待たなければなりません.
 
例3:ページの中にJS、CSSとピクチャーがあります
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
        <script type="text/javascript" src="jquery1.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery2.js"></script>
</head>
<body>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <img src="1.jpg" width="200" height="300" />
        <script type="text/javascript" src="jquery3.js"></script>
</body>
</html>

jquery1.js   
console.timeStamp('Inline script before link in head');
//console.timeStamp()    Timeline       ，          。

jquery2.js 
console.log('test');

Javascript、CSS和IMG之网页执行探索_第4张图片
Javascript、CSS和IMG之网页执行探索_第5张图片
上の図からわかります.
1、DOMContentLoadedイベントはすべてのJSが実行されるまで待たなければならない.
2、CSSより前のjquery 1.jsはロードが完了するとすぐに実行されます.CSS後のJSは、例えばjquery 3のようにCSSのロードが完了してから実行する必要がある.jsはとっくにロード済みですがstyleまで待っています.cssはロードが完了してから実行され、jquery 2にあります.jsはjquery 3のために実行する.jsはjquery 2に置かれた.jsの後.現代のブラウザでは、これらのCSS、JSリソースは同時要求である(Send Requestから分かる).
まとめ:現代ブラウザではCSS,JS,つまり最初から並行してこれらのリソースを要求しているが,CSSとJSを実行する順序は元の依存順である(JSの実行はその先にあるCSSとJSのロード,実行が完了するのを待つ).先に完了したリソースをロードし,その依存がまだロード,実行が完了していない場合は待つしかない.
 
例4:JSと画像のみ
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <img src="1.jpg" width="200" height="300" />
    <script type="text/javascript" src="jqueryE.js"></script>
</body>
</html>

ここでjquery.jsは大きくて900+KBあります.jqueryE.jsはもっと大きくて、1.8 MBです.目的は、2つのJSがピクチャの復号をブロックするかどうかをテストすることである.

Javascript、CSS和IMG之网页执行探索_第6张图片
上の図から分かるようにjquery.jsがロードして実行した後、ピクチャの復号が行われる(ピクチャが以前にロードが完了しても)、jqueryE.jsはピクチャの復号後に実行される.説明ラベルのscriptはピクチャの表示をブロックする.の一番下にあるJSはしない.
ラベルのscriptが画像の表示をブロックすることをさらに検証するためにjquery.jsを修正すると、より大きく変更され、結果は同じで、画像はJSが実行された後に復号されます.
jqueryEならテストしましたjsが小さいと、ピクチャ復号前にロードされて実行されるので、こんなに議論されているのに、実際の応用では、具体的な状況を具体的に分析しなければなりません.そしてchromeはこの方面でも絶えず最適化を更新しています.この検討はただの参考と言えるが、自分の業務、需要シーンを結びつけ、的確な分析と最適化を行うことが肝心だ.
 
次に、いくつかの最適化方法を試して、実際の結果を見てみましょう.
1、asyncを使用する(インスタンス4のコード例を使用するが、違いはasync属性を加えただけである)

async:これはhtml 5に追加されたプロパティで、スクリプトのロードによってページのロードをブロックすることなく、スクリプトのロードと実行を非同期で行うことができます.いったんロードされるとすぐに実行されます.asyncプロパティは、srcプロパティを使用する場合にのみ外部スクリプトに適用されます.
asyncがある場合、jsはダウンロードが完了すると実行され、windowのloadイベントの前に実行されます.したがって,本来の順序で実行されない可能性が高い.js前後に依存性がある場合はasyncを使うとエラーが発生する可能性があります.
それ以外にも、DOMContentLoadedイベントはJSの実行が完了するまで待たなければならないことに気づいたが、asyncが設定されていれば待たない.画像もロードして解析したので、スクリプトを待つことはありません.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery.js" async></script>
</head>
<body>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <img src="1.jpg" width="200" height="300" />
    <script type="text/javascript" src="jqueryE.js" async></script>
</body>
</html>


Javascript、CSS和IMG之网页执行探索_第7张图片
FF:
Javascript、CSS和IMG之网页执行探索_第8张图片
 
上の写真に問題がありますjqueryjsのロードは101 ms,GET 1を共有する.jpgは101 msとGET jqueryEをブロックする.js同期.これはchromeと大きく異なります(chromeのnetwork図と比較してわかります).これはブラウザの内部メカニズムが異なるためであるはずです.だから、できるだけスクリプトをに入れないでください.
2、deferの使用
Javascript、CSS和IMG之网页执行探索_第9张图片
deferプロパティは、ページがロードされるまでスクリプトの実行を遅延するかどうかを規定します.ドキュメントがユーザーに表示されるまで、スクリプトの解釈を延期します.
defer付きscriptでは、ページの解析が完了した後に実行されるタイミングで、ページに表示される順序で実行されることが保証されますが、DOMContentLoadedイベントの前に(chromeでテストしますが、firefoxでは、deferスクリプトはDOMContentLoadedの後に実行されます).
deferでは,外部チェーンのjsをページの下部に置いたと考えられる.jsのロードは、ページのレンダリングとリソースのロードをブロックしません.ただしdeferは元のjsの順に実行されるので,前後に依存関係のあるjsなら安心して使用できる.

Javascript、CSS和IMG之网页执行探索_第10张图片
FF:スクリプトはDOMContentLoaded(青線)の後に実行されていることがわかります
Javascript、CSS和IMG之网页执行探索_第11张图片
deferとasyncの2つの属性について特に注意しなければならないのは:1、inlineのscriptに対して無効です.2、この2つのプロパティを使用するスクリプトではdocumentを呼び出すことはできません.writeメソッド.
ブラウザの互換性:
Javascript、CSS和IMG之网页执行探索_第12张图片
とあるGCP SSL化のためのインデックス
JAva heap space解決方法とJVMパラメータ設定