scriptラベルの知識
3067 ワード
scriptラベルの知識
scriptラベルの実行順序
scriptはそれらが現れる順序で実行され、実行時にプログラムの実行をブロックし、ページ実装クラスのjsをbodyの前に置くことを提案し、動作、インタラクション、イベント駆動、dom属性へのアクセス操作はbodyのdomの後尾ラベルの前に置くことができる.これにより、Webページのロード速度が速くなります.
scriptラベルのasyncとdeferプロパティ
HTML 5には、スクリプトの実行を制御する2つのツールが追加されています.
asyncは「すぐに実行する必要はありません」と述べた.より具体的には、Webページ全体のロードが完了した後にこのスクリプトを実行し、他のスクリプトの実行後に置いても構いません.これは、ページに他のコードが統計スクリプトに依存して実行される必要がないため、統計解析スクリプトにとって非常に役立ちます.ページに必要な変数や関数を定義することはasyncのコードではできません.asyncコードが実際に実行されるタイミングが分からないからです.
deferは「ページ解析が完了してから実行する」ことを示す.スクリプトをDOMContentedLoadedイベントにバインドしたり、jQueryを使用したりするのとほぼ同じです.ready.このコードが実行されると、DOMのすべての要素が使用できます.asyncとは異なり、deferが追加されたすべてのスクリプトは、HTMLページに表示される順序で実行されます.HTMLページの解析が完了した後に実行が開始されるだけです.
scriptラベルのtypeプロパティ
scriptタグにtype=text/javascriptと書くかどうかは関係ありません.typeでJavaScript以外のMIMEタイプを設定した場合、ブラウザは実行しません.自分の言語を定義したい場合は、これはクールです.
このコードの実際の実行結果は、runEmeraldCode関数を自分で作成するなど、自分で決定します.
特に必要な場合は、metaタグを使用してページ上のscriptタグのデフォルトtypeを書き換えることもできます.
または、Content-Script-Type headerを返すリクエストがあります.
scriptラベルのintegrityプロパティ
integrityプロパティは、サブリソース整合性の新しい仕様の一部です.スクリプトファイルに含まれるコンテンツのhashを提供できます.これは、伝送中にコンテンツが失われたり、悪意のある修正が行われたりすることを防止できることを意味する.SSLを使用しても、この仕様は意味があります.コードなど、制御できない局外リソースをロードする場合があります.jquery.com.
使用を選択した場合は、scriptタグにhashタイプとhash値を含め、ハイフンで区切ります.次のように見えます.
scriptラベルのcrossoriginプロパティ
まだ完全に標準化されていませんが、crossoriginプロパティをサポートするブラウザもあります.基本的な考え方は、ブラウザが非同源リソースの使用を制限することです(同源リソースとは、同じプロトコル、hostname、およびポートを指します.例えば、`http://google.com:80).
これは、例えば、競合他社のサイトにリクエストして、ユーザーの相手のサイトのアカウントを抹消することを防止するためです(これはよくありません!).この問題はscriptタグにかかわるのはちょっと意外ですが、crossoriginが実現したら、handlerをwindowに追加します.onerrorイベントでは、コンソールを見て警告メッセージが表示され、導入すべきでない外部スクリプトを導入するように指示されます.安全なブラウザでcrossoriginプロパティを指定しない限り、外部スクリプトのロードにエラーはありません.
document.currentScript
document.CurrentScriptのプロパティ.現在実行中のスクリプトを指します.埋め込まれたscriptタグからいくつかのプロパティを使用したい場合は、非常に役立ちます.個人的には、まだ完全にサポートされていないことを喜んでいます.そうしないと、一部の仕事でより複雑なコードを埋め込むことを望んでいます.IEはサポートされていません.
scriptタグとinnerHTML
ページにDOMで動的に追加されたscriptタグは、ブラウザによって実行されます.
ページにinnerHTMLで動的に追加されたscriptタグは実行されません.
なぜそうなるのかは不明ですが、「Chromeコードインスペクタにscriptタグを表示して実際に実行しない方法がありますか?」という小さな問題を解決しました.これを利用して同僚に悪劇をすることができます.
scriptラベルの実行順序
scriptはそれらが現れる順序で実行され、実行時にプログラムの実行をブロックし、ページ実装クラスのjsをbodyの前に置くことを提案し、動作、インタラクション、イベント駆動、dom属性へのアクセス操作はbodyのdomの後尾ラベルの前に置くことができる.これにより、Webページのロード速度が速くなります.
scriptラベルのasyncとdeferプロパティ
HTML 5には、スクリプトの実行を制御する2つのツールが追加されています.
asyncは「すぐに実行する必要はありません」と述べた.より具体的には、Webページ全体のロードが完了した後にこのスクリプトを実行し、他のスクリプトの実行後に置いても構いません.これは、ページに他のコードが統計スクリプトに依存して実行される必要がないため、統計解析スクリプトにとって非常に役立ちます.ページに必要な変数や関数を定義することはasyncのコードではできません.asyncコードが実際に実行されるタイミングが分からないからです.
deferは「ページ解析が完了してから実行する」ことを示す.スクリプトをDOMContentedLoadedイベントにバインドしたり、jQueryを使用したりするのとほぼ同じです.ready.このコードが実行されると、DOMのすべての要素が使用できます.asyncとは異なり、deferが追加されたすべてのスクリプトは、HTMLページに表示される順序で実行されます.HTMLページの解析が完了した後に実行が開始されるだけです.
scriptラベルのtypeプロパティ
scriptタグにtype=text/javascriptと書くかどうかは関係ありません.typeでJavaScript以外のMIMEタイプを設定した場合、ブラウザは実行しません.自分の言語を定義したい場合は、これはクールです.
make a social network
but for cats
このコードの実際の実行結果は、runEmeraldCode関数を自分で作成するなど、自分で決定します.
var codez = document.querySelectorAll('script[type="text/emerald"]');
for (var i=0; i < codez.length; i++)
runEmeraldCode(codez[i].innerHTML);
特に必要な場合は、metaタグを使用してページ上のscriptタグのデフォルトtypeを書き換えることもできます.
または、Content-Script-Type headerを返すリクエストがあります.
scriptラベルのintegrityプロパティ
integrityプロパティは、サブリソース整合性の新しい仕様の一部です.スクリプトファイルに含まれるコンテンツのhashを提供できます.これは、伝送中にコンテンツが失われたり、悪意のある修正が行われたりすることを防止できることを意味する.SSLを使用しても、この仕様は意味があります.コードなど、制御できない局外リソースをロードする場合があります.jquery.com.
使用を選択した場合は、scriptタグにhashタイプとhash値を含め、ハイフンで区切ります.次のように見えます.
scriptラベルのcrossoriginプロパティ
まだ完全に標準化されていませんが、crossoriginプロパティをサポートするブラウザもあります.基本的な考え方は、ブラウザが非同源リソースの使用を制限することです(同源リソースとは、同じプロトコル、hostname、およびポートを指します.例えば、`http://google.com:80).
これは、例えば、競合他社のサイトにリクエストして、ユーザーの相手のサイトのアカウントを抹消することを防止するためです(これはよくありません!).この問題はscriptタグにかかわるのはちょっと意外ですが、crossoriginが実現したら、handlerをwindowに追加します.onerrorイベントでは、コンソールを見て警告メッセージが表示され、導入すべきでない外部スクリプトを導入するように指示されます.安全なブラウザでcrossoriginプロパティを指定しない限り、外部スクリプトのロードにエラーはありません.
document.currentScript
document.CurrentScriptのプロパティ.現在実行中のスクリプトを指します.埋め込まれたscriptタグからいくつかのプロパティを使用したい場合は、非常に役立ちます.個人的には、まだ完全にサポートされていないことを喜んでいます.そうしないと、一部の仕事でより複雑なコードを埋め込むことを望んでいます.IEはサポートされていません.
scriptタグとinnerHTML
ページにDOMで動的に追加されたscriptタグは、ブラウザによって実行されます.
var myScript = document.createElement('script');
myScript.textContent = 'alert("✋")';
document.head.appendChild(myScript);
ページにinnerHTMLで動的に追加されたscriptタグは実行されません.
document.head.innerHTML += 'alert("✋") ';
なぜそうなるのかは不明ですが、「Chromeコードインスペクタにscriptタグを表示して実際に実行しない方法がありますか?」という小さな問題を解決しました.これを利用して同僚に悪劇をすることができます.