ES 6 Moduleのロード実現

ブラウザで伝統的な方法を読み込みます.これまでのページでは、ブラウザがタブを使ってjsスクリプトを読み込みます.lt;bragt; &ボルトp>
<pre class="has"lt;codet>lt;!--ページに埋め込まれたスクリプト--gt;
<script type=「appication/javascript」gt;
//module code
ブラウザスクリプトのデフォルト言語はjsスクリプトですので、type=「appication/javascript」はデフォルトを省略することができます.ブラウザはJavaScriptスクリプトを同期してロードします.つまり、レンダリングエンジンはタグに出会うと停止します.スクリプトが実行されるまで、下にレンダリングし続けます.外部スクリプトであれば、スクリプトのダウンロード時間を追加しなければなりません.スクリプトのボリュームが大きいと、ダウンロードと実行の時間が長くなりますので、ブラウザが詰まり、ユーザーはブラウザの「カードが死ぬ」と感じてしまいます.これは明らかによくない経験ですので、ブラウザでスクリプトを非同期で読み込むことができます.次は2つの非同期で読み込む文法です.lt;bragt; &ボルトp>
<pre class="has"lt;codet>lt;script src=「./delect.js」defergt;

タグがdeferまたはasync属性を開くと、スクリプトが非同期的にロードされます.レンダリングエンジンはこの行のコマンドに出会うと、外部スクリプトのダウンロードを開始しますが、ダウンロードや実行を待つのではなく、直接に後のコマンドを実行します.lt;bragt;lt;strong gt;deferとasync</strong gt;前者はページ全体が正常にレンダリングされてから実行されます.後者はダウンロードが終わるとレンダリングエンジンが端末にレンダリングされます.このスクリプトを実行してからレンダリングを続けます.一つの話はdeferは「レンダリングしてから実行します.asyncはダウンロードが完了したら実行します.また、複数のdeferスクリプトがあれば、それらがページに現れる順番にロードします.複数のasyncシナリオはロード順序を保証できません.ボルトp>
<p>lt;strong gt;ルールを読み込み</ストリングス>lt;bragt;ブラウザでES 6テンプレートを読み込むのも、<スクリプト>ラベルは、type="module"属性を追加します.ボルトp>
<pre class="has"lt;codet>lt;script type='module'src="./method.js"
ホームページにモジュールmethod.jsを挿入します.type属性はmoduleに設定されていますので、ブラウザはES 6モジュールだと知っています.ブラウザはtype=「module」を持つものに対して、非同期的にローディングしています.ブラウザの詰まりを引き起こしません.つまり、ページ全体がレンダリングされるまで、モジュールスクリプトを実行します.スクリプト>タグのdefer属性ボルトp>
<pre class="has"lt;codet>lt;script type=「module」src=「./method.js」

ラベルのasync属性も開くことができます.ロードが完了すると、レンダリングエンジンはレンダリングを中断して直ちに実行します.実行が完了したら、レンダリングを再開します.
<pregt;
<pregt;ES 6モジュールは、ウェブページに埋め込むことができます.構文的挙動は、外部スクリプトのローディングと一致します.
<pregt;
<pre class="has"lt;codet>lt;script type="module"
import utils from"./utils.js"
//other code