検索
ホームページウェブフロントエンドjsチュートリアルJavaScript ファイルの同期読み込みと非同期読み込みの実装原則_JavaScript スキル

HTML 4.01 スクリプト属性
charset: オプション。 src によって導入されるコードの文字セットを指定します。ほとんどのブラウザはこの値を無視します。
defer: ブール値、オプション。スクリプトの実行を遅らせることは、ページの body タグの下部に script タグを配置することと同じであり、js スクリプトはドキュメントの DOMContentLoaded の前に実行されます。 IE および Firefox の新しいバージョンを除き、他のブラウザはサポートされていません。
言語: 非推奨になりました。ほとんどのブラウザはこの値を無視します。
src: オプション。サフィックス名を制限せずにインポートする外部コードファイルを指定します。
タイプ: 必須。スクリプトのコンテンツタイプ(MIMEタイプ)を指定します。実際には、通常、この値を指定する必要はありません。ブラウザはデフォルトで text/javascript タイプとして解釈して実行します。 HTML5 の

script 属性 : 新しい HTML5 標準で定義された属性に加えて、HTML5 の
script タグは、HTML4.01 と比較して language 属性を削除して変更しました。 type 属性はオプション (デフォルトは text/javascript) で、新しい属性 async が追加されます。
async: 属性の役割であるブール値は、スクリプトが非同期で実行されるかどうかを定義します。値は true または false です。
async が true に設定されている場合、defer 属性は無視されます。
非同期で実行される js ファイルは、読み込むドキュメントにコンテンツを書き込むために document.write() を使用しないと想定されているため、非同期で実行される js ファイルの読み込みおよび実行中に document.write() を使用しないでください。
例外は次のとおりですscript タグ属性に追加すると、ページが js ファイルを導入する方法がその読み込みと実行モードに影響します。
スクリプト ノード (appendChild(scriptNode) など) を追加することによって導入されたすべての js ファイルは非同期で実行されます (scriptNode を挿入する必要があります)ノードを作成して src を設定するだけでは、js ファイルはロードされません。これは、img のプリロードとは異なります)
HTML ファイルの <script> タグ内のコードまたは js 内のコードsrc によって参照されるファイルは同期的にロードされ、実行された <BR>html ファイルの <script> タグ内のコードは、 document.write() メソッドを使用して、<script&gt の src 属性によって参照される js ファイルを導入します。非同期的に実行される <BR>html ファイル内の ; タグ。 js ファイルのコード内で document.write() メソッドを使用して導入された js ファイルが同期的に実行されます。 <BR>Image オブジェクトを使用して、js ファイルを非同期的にプリロードします (実行されません) <br><br>次のようなものは使用しないでください。このメソッドは、js ファイルをロードするリクエストを開始しません: <BR>divNode.innerHTML = '<script src="xxx.js"&gt ;</script>';
window.onload イベントは、ファイルがロードされた後にのみ実行されます (非同期でロードされた場合でも)
============ ===========================================
1. ><script> <BR>// 実行されたコードを同期的にロードします <BR></script>
2.
xx.js
3.
<script><BR>document.write('<script src="xx.js"></script>'); のコードを同期的にロードして実行します。 //xx.js

4,

xx のコードを非同期的にロードして実行します。 js には次のコードが含まれています:

コードをコピー コードは次のとおりです:
document.write ('');
document.write('');

その後、xx.js、11.js、および 22.js がすべて同期的に読み込まれ、実行されます。
スクリプト ノードの挿入によって xx.js、11.js、および 22.js が非同期的に読み込まれる場合、11.js と 22.js は非同期的に読み込まれます。
スクリプト ノードの挿入によって xx.js が非同期的に読み込まれる場合、 11.js と 22.js は document.write(script) モードでロードされ、次に 11.js と 22.js は同期的にロードされます (最新のブラウザーでテストされています。Chrome では、xx.j の非同期ロード実行は行われなくなりました)利用可能な document.write() はコンテンツをドキュメントに書き込みますが、Firefox と IE はドキュメントが閉じる前に書き込むことができます (メソッドは HTML でアラートを使用してドキュメントが閉じないようにします))
テスト: 11 のalert() .js (for ループは使用しないでください。ブラウザは単一のスレッドで実行され、コードの一部の実行を続けると残りのコードがブロックされます)、22.js の console.log()、 22.js のコードがブロックされていることがわかります
5.
次のメソッドでは、appendChild の実行後に xx.js がロードされ、非同期で実行されます

コードをコピーします コードは次のとおりです:
var script = document.createElement("script");
script.setAttribute("src") ","xx.js");
documentrt.getElementsByTagName("head") [0].appendChild(script);


6. Image オブジェクトを使用して js ファイルを非同期的にプリロードします (実行されません)
リクエストは、イメージの src が割り当てられたときに開始され、ファイル タイプは選択されません (イメージは動的に指定される場合もあります)検証コードなどのスクリプトによって作成されるため、js ファイルの URL を image.src に割り当てることができます。js はロード後にブラウザーによってキャッシュされます。
コードをコピー コードは次のとおりです:

var img = new Image();
img.onload = function(){alert( 1); }; //返された js ファイル MIME は画像ではないため、onload コールバック関数はトリガーされません
img.src = 'http://localhost/test/loadjs/try.2.js' ;
var s = document.createElement("script");
var h = document.getElementsByTagName("head")[0];
//js
s.src=img を実行します。 src;
h.appendChild(s);

js ファイルをロードする関数:
コードをコピーします コードは次のとおりです。

varloadJS = function(url,callback){
var head = document.getElementsByTagName('head');
if(head&&head); .length){
head = head[0];
}else{
head = document.body;
var script = document.createElement('script'); >script.src = url;
script.type = "text/javascript";
head.appendChild(script);
script.onload = script.onreadystatechange = function(){
//スクリプト タグ、IE には onreadystatechange イベントがあり、w3c 標準には onload イベントがあります
//これらの readState は IE8 以下用です。W3C 標準のスクリプト タグには onreadystatechange がなく、
//Onload はありません。ファイルが正常にロードされなかった場合に実行されます。
//(!this.readyState) は W3C 標準用です。IE 9 は W3C 標準の onload
if ((!this.readyState) || this.readyState もサポートします。 == "完了" || this.readyState == "ロード済み" ){
callback();
}
}//end onreadystatechange
}


ポイント 4 のテスト (同期読み込み) (アラートを挿入すると、読み込み中のブロックを簡単に確認できます)
tryjs .html





< ;body>



tryjs



>
コードは次のとおりです: console.log('write begin'); document.write(''); document.write('');
console.log('書き込み完了');


try.1.js



コードをコピー
コードは次のとおりです: console.log('loadjs 1 begin'); console.log('loadjs 1 終了');
try.2.js



コードをコピーします
コードは次のとおりです: console.log('loadjs 2 begin') ; console.log('loadjs 2 が完了しました');
テスト結果 (IE789 ではファイル 2 とファイル 1 のコールバック完了の順序は不明)
IE 7:
ログ: 外部 js コールバックの読み込み IE
ログ: 外部 js コールバックの読み込み IE
ログ:書き込み開始
ログ:書き込み終了
ログ:外部 JS コールバック完了 IE
ログ:ファイル 1 コールバック読み込み IE
ログ:ファイル 2 コールバック読み込み IE
ログ:loadjs 1 開始
ログ:loadjs 1 完了
ログ:loadjs 2 begin
ログ:loadjs 2 完了
ログ:ファイル 2 コールバック完了 IE
ログ:ファイル 1 コールバック完了 IE

IE8:
ログ: 外部 js コールバックのロード IE
ログ: 外部 js コールバックがロードされた IE
ログ: 書き込み開始
ログ: 書き込み終了
ログ: 外部 js コールバック完了 IE
ログ: ファイル 1 コールバックの読み込み IE
ログ: ファイル 2 コールバックの読み込み IE
ログ:loadjs 1 開始
ログ:loadjs 1 終了
ログ:loadjs 2 開始
ログ:loadjs 2 終了
ログ: ファイル 2 コールバック完了 IE
ログ: ファイル 1 コールバック完了 IE

IE9:
ログ: 書き込み開始
ログ: 書き込み完了
ログ: 外部 JS コールバック完了 IE
ログ: ファイル 1 コールバックの読み込み IE
ログ: ファイル 2 コールバックの読み込み IE
ログ:loadjs 1 開始
ログ:loadjs 1 終了
ログ:loadjs 2 開始
ログ:loadjs 2 終了
ログ: ファイル 1 コールバック完了 IE
ログ: ファイル 2 コールバック完了 IE

FIREFOX:
書き込み開始
書き込み完了
IE ではなく外部の JS コールバック
loadjs 1 開始
loadjs 1 終了
ファイル 1 コールバック、IE ではありません
loadjs 2 開始
loadjs 2 終了
ファイル 2 コールバック、IE ではありません

CHROME:
書き込み開始
書き込み完了
IE ではなく外部 js コールバック
loadjs 1 開始
loadjs 1 終了
ファイル 1 コールバック、IE ではありません
loadjs 2 begin
loadjs 2終了した
ファイル 2 コールバック、IE ではありません
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
揭露Ajax异常,解决错误的方法一览揭露Ajax异常,解决错误的方法一览Jan 30, 2024 am 08:33 AM

Ajax异常大揭秘,如何应对各种错误,需要具体代码示例2019年,前端开发已经成为互联网行业中不可忽视的重要岗位。而Ajax作为前端开发中最常用的技术之一,能够实现页面异步加载和数据交互,其重要性不言而喻。然而,使用Ajax技术时经常会遇到各种错误和异常,如何应对这些错误是每一位前端开发者必须面对的问题。一、网络错误在使用Ajax发送请求时,最常见的错误就是

Scrapy基于Ajax异步加载实现方法Scrapy基于Ajax异步加载实现方法Jun 22, 2023 pm 11:09 PM

Scrapy是一个开源的Python爬虫框架,它可以快速高效地从网站上获取数据。然而,很多网站采用了Ajax异步加载技术,使得Scrapy无法直接获取数据。本文将介绍基于Ajax异步加载的Scrapy实现方法。一、Ajax异步加载原理Ajax异步加载:在传统的页面加载方式中,浏览器发送请求到服务器后,必须等待服务器返回响应并将页面全部加载完毕才能进行下一步操

有效应对jQuery .val()不起作用的情势有效应对jQuery .val()不起作用的情势Feb 20, 2024 pm 09:36 PM

标题:解决jQuery.val()不起作用的方法及代码示例在前端开发中,经常会使用到jQuery来操作页面元素。其中,获取或设置表单元素的值是常见的操作之一。通常,我们会使用jQuery的.val()方法来实现对表单元素值的操作。然而,有时候会遇到jQuery.val()不起作用的情况,这可能会导致一些问题。本文将介绍如何有效应对jQuery.val(

Vue3中的suspense函数详解:优化异步数据加载Vue3中的suspense函数详解:优化异步数据加载Jun 18, 2023 am 08:10 AM

Vue3中的suspense函数详解:优化异步数据加载在现代网站和应用程序中,异步数据加载是必不可少的。但是,由于网络连接速度的不稳定性,异步数据加载可能导致用户界面的延迟和卡顿。为了解决这个问题,Vue3引入了一个新的suspense函数来优化异步数据加载。suspense函数是Vue3中的一个新特性,它允许您在异步加载数据时展示一个加载中的UI,直到异步

Vue3中的defineAsyncComponent函数详解:异步加载组件的应用Vue3中的defineAsyncComponent函数详解:异步加载组件的应用Jun 18, 2023 pm 07:39 PM

Vue3中的defineAsyncComponent函数详解:异步加载组件的应用在Vue3中,我们经常会遇到异步加载组件的需求。这时我们就可以使用Vue3提供的defineAsyncComponent函数来实现异步加载组件的功能。本文将详细介绍Vue3中defineAsyncComponent函数的用法和应用场景。一、defineAsyncComponent

提升网站速度的关键优化模式,每个前端开发者都必须掌握!提升网站速度的关键优化模式,每个前端开发者都必须掌握!Feb 02, 2024 pm 05:36 PM

前端开发者必备:掌握这些优化模式,让网站飞起来!随着互联网的快速发展,网站已经成为企业宣传和交流的重要渠道之一。一个性能优良、加载迅速的网站不仅可以提升用户体验,还可以吸引更多的访问者。作为一名前端开发者,掌握一些优化模式是必不可少的。本文将介绍一些常用的前端优化技术,帮助开发者更好地优化网站。压缩文件在网站开发中,经常使用的文件类型包括HTML、CSS和J

Vue3中的defineAsyncComponent函数:异步加载组件Vue3中的defineAsyncComponent函数:异步加载组件Jun 18, 2023 am 10:57 AM

Vue3是一个非常流行的前端框架,它将组件化思想带入到前端开发中,使得开发者能够更快速、更高效地构建复杂的应用程序。在Vue3中,我们经常会使用组件来构建页面,并且使用大量的第三方组件库来扩展我们的功能。但是,加载多个组件可能会导致应用程序的启动速度变慢,这就是为什么我们需要异步加载组件。在Vue3中,提供了一个函数叫做defineAsyncComponen

揭秘网站性能优化:掌握这些方法,让你的网站速度飞升!揭秘网站性能优化:掌握这些方法,让你的网站速度飞升!Feb 03, 2024 am 08:00 AM

网站性能优化大揭秘:掌握这些方式,让你的网站飞起来!随着互联网的快速发展,网站已经成为企业宣传、产品展示和交流互动的重要渠道。然而,当用户访问网站时,如果加载速度过慢、响应时间过长,用户体验将会大打折扣,甚至可能直接导致用户离开。因此,网站性能优化变得越来越重要。那么,什么是网站性能优化呢?简单来说,网站性能优化是通过一系列的方式和技术手段,提升网站的加载速

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境