スクリプトの読み込み方法

1148 ワード

一、文書の要素にはすべてのJavaScriptファイルが含まれています.
すべてのJavaScriptコードがダウンロードされ、解析され、実行されてから、ページの内容が表示されるようになります.これは間違いなくブラウザーがページを表示する時明らかな遅延が現れることを招いて、特に比較的に巨大なシナリオ、極めて大きい影響のユーザーの体験.この問題を避けるために、JavaScriptのすべてを元素の後ろに引用します.このように、JavaScriptコードを解析する前に、ページの内容は完全にブラウザに表示されます.
二、ディレイシナリオ:defer属性を設定する
スクリプトは全ページ解析が完了したら実行します.すぐにダウンロードするのに相当しますが、実行が遅れます.ディレイスクリプトは先着順に実行されます.

のブラウザはこのプロパティを しますので、ディレイスクリプトを に くのはまだ いい です.
、 シナリオ:async を する
deferと ていますが、asyncは スクリプトファイルにのみ され、ブラウザにファイルをすぐにダウンロードするように えます.しかし、deferと って、asyncと されたスクリプトは された で されることを していません. いバージョンのIEブラウザを しない :async を すれば ローディングが であり、jsをロードするコードを に いても がありません.

すべてのブラウザに する : いブラウザに するためには、シナリオを に するためのスクリプトキャリアが できることを す があります. えば、require.jsなどを して ローディングが です.もう つの は、jsを したコードをbodyの に いて、async を つことです.これは いブラウザでスクリプトを にロードしませんが、bodyが する のDOM だけがブロックされています.これはブロックの を きく します. のブラウザでは、シナリオはDOM でbodyの のscriptタグを してからロードされます.このときローディングは ローディングに し、CSSOMをブロックすることはありません.