scriptをbodyに置く内容の最後の原因の詳細

2089 ワード
渋滞 httml 5 javascript
scriptをbodyに置く内容の最後の2つの理由
  • JavaScript操作DOMの失効を避ける
  • JavaScriptコードを解析する前に、ページの内容をブラウザに完全に表示し、ユーザーはブラウザが空白のページを表示する時間が短縮されたことで、ページを開く速度が速くなったと感じます.
    以下、この2つの原因について説明する.
    原因分析:JavaScriptブロックHTML解析
    次の図はHTML仕様から来ており、外部JavaScriptによるHTML解析のブロック(インラインスクリプトはスクリプトをロードするのではなく、直接実行される)を明確に説明しています.
    図中、parser:解析fetch:リソースexecutionの取得:JavaScriptコードを解析する場合(埋め込みコードでもdeferまたはasyncの属性がない外部JavaScriptでも)、ページの処理は一時的に停止し、ブラウザウィンドウは空白になります.つまり、タグはHTMLの をブロックします.
    ブロックプロセス:ブラウザがのラベルに すると、JavaScriptインタプリタが し、HTMLの を し、CSSOM が するまで(もしあれば)、JavaScriptスクリプトの を し、JavaScriptの が した 、HTMLの を します.つまり、ブラウザはJavaScriptリソースのダウンロードが し、 が するまでHTMLの を しません.
    この 、 たちは を します.JavaScriptは、DOMがまだ されていないため、その にあるDOMを できません.したがって、は、すべてのHTMLの が するまで ってからJavaScriptに する を うことが ましい.CSSはJavaScriptの をブロックするため、CSSリソースはJavaScriptリソースよりも に されるべきである.
    ps:JavaScriptはDOMを する 、ブラウザのリフローや を き こし、ページレンダリング に を える があるため、JavaScriptでDOMを することはできるだけ けるべきです.
    deferプロパティのあるスクリプトでは、scriptをページの に くのが です.
    の はCanI useから... から、 のことがわかります.
  • deferプロパティは、 スクリプトファイル
    • にのみ されます.
  • の スクリプトがある (すなわち、 の )、HTML 5 では、スクリプトが した に されるように されているが(すなわち、 の スクリプトが2 の スクリプトより に され、2つのスクリプトがDOMContentLoadedイベントより に される)、 には、 スクリプトが ずしも に されるとは らない.DOMContentLoadedイベントがトリガーされる に されるとは らないので、1つの スクリプト
    • のみが ましい.
  • deferプロパティをサポートしていないブラウザは、このプロパティを し、 のようにこのスクリプトを します( の の い ではサポートされていませんが、サポートされているブラウザは97.82%に していることがわかりますが、このプロパティは です).このプロパティを に させるためには、 スクリプトをページの に するのが です.

    JavaScriptコード の
    に、 の に ってjavaScriptコードの についていくつかのアドバイスをします.
  • すべてのJavaScriptをbody のページ の ろに する
    • に する.
  • は、1つの スクリプト
    • のみを むことが ましい.
  • スクリプトもページ
    • に する.
  • JavaScriptの にスタイルファイルを く(cssを に く)
    • boa cgi実現ajax
    ブラウザ側はJSでファイルの作成とダウンロードを行う