مناقشة موجزة حول طريقة مرجع ملف JS والتنفيذ المتزامن والتنفيذ غير المتزامن

الكاتب：Eve Cole وقت التحديث：2025-05-30 20:00:04

يتم تنفيذ أي ملف JS الذي تم تقديمه في AppendChild (ScriptNode) بشكل غير متزامن (يجب إدراج ScriptNode في المستند ، فقط إنشاء العقد وإعداد SRC لن يقوم بتحميل ملف JS ، الذي يختلف عن IMG وتحميله)

يتم تحميل الرمز في علامة <script> في ملف HTML أو الرمز في ملف JS المشار إليه بواسطة SRC وتنفيذه بشكل متزامن

يتم تنفيذ الكود في علامة <script> في ملف HTML بشكل غير متزامن باستخدام طريقة document.write ().

يتم تنفيذ ملف JS الذي تم تقديمه باستخدام طريقة document.write () بشكل متزامن في رمز ملف JS المشار إليه بواسطة سمة SRC في ملف HTML.

 <script> // تحميل متزامن من التعليمات البرمجية التي تم تنفيذها </script>

 <script src = "xx.js"> </script> // تحميل رمز وتنفيذه بشكل متزامن في xx.js

 <script> document.write ('<script src = "xx.js"> <// script>') ؛ // التحميل غير المتزامن لتنفيذ التعليمات البرمجية في xx.js </script>

 <script src = "xx.js"> </script>

هناك الرمز التالي في xx.js:

 document.write ('<script src = "11.js"> <// script>') ؛ document.write ('<script src = "22.js"> <// script>') ؛

ثم يتم تحميل وتنفيذ XX.JS و 11.JS و 22.js في وقت واحد.

إذا تم تحميل xx.js بشكل غير متزامن في الإدراج ، لا يزال يتم تحميل 11.js و 22.js بشكل متزامن (متزامن في غير متزامن ، أي أن تحميل هذين الملفان في التسلسل)

الاختبار: في حالة تأهب في 11 ، document.write () في 22 ، يمكنك أن ترى أن عبارة الكتابة في 22 محظورة

بالطريقة التالية ، سيتم تحميل XX.JS وتنفيذها بشكل غير متزامن بعد تنفيذ AppendChild.

 var script = document.createElement ("script") ؛ script.setAttribute ("src" ، "xx.js") ؛ documenrt.getElementsByTagname ("Head") [0] .AppendChild (script) ؛

وظيفة تقوم بتحميل ملف JS:

 var loadjs = function (url ، callback) {var head = document.getElementsByTagName ('head') [0] ، script = document.createElement ('script') ؛ script.src = url ؛ script.type = "text/javaScript" ؛ head.appendchild (script) ؛ script.onload = script.onReadyStateChange = function () {// script tag ، هناك حدث onReadyStateChange بموجب IE ، W3C standard لديه حدث onload // هذه readyStates من أجل ie8 وأسفل ، w3c المعيار هو أن علامة البرنامج النصي لا يتمتع بهذا الأمر ، لذلك لن يكون ذلك. يتم تنفيذها. (! this.readyState) هو معيار W3C if ((! this.readyState) || this.readyState == "COMMUNT" || this.readyState == "loaded") {callback () ؛ } آخر {Alert ("لا يمكن تحميل ملف JS")}}}}

لاختبارات النقطة 4 (حيث من السهل رؤية تنبيه الإدراج أثناء التحميل)

tryjs.html

 <! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> <script src = "tryjs.js" onload = "! onReadyStateChange = "Console.log ('Outer JS Callback' ، this.readyState ، 'ie') ؛"> </script> <body> </body> </html>

tryjs.js

 console.log ('write start') ؛ document.write ('<script src = "try.1.js" onReadyStateChange = "console.log (/' file 1 callback /'This.ReadyState ، ) )

Try.1.js

 console.log ('loadjs 1 begin') ؛ console.log ('loadjs 1 int') ؛

Try.2.js

 console.log ('loadjs 2 begin') ؛ console.log ('loadjs 2 int ") ؛

نتائج الاختبار (كامل رد الاتصال من الملف 2 والملف 1 غير مؤكد في أمر IE7/8/9)

أي 7:

السجل: تحميل رد الاتصال الخارجي JS أي
السجل: تم تحميل رد الاتصال الخارجي JS أي
سجل: اكتب ابدأ
السجل: اكتب الانتهاء
السجل: Callback Outer JS أكمل أي
السجل: ملف 1 تحميل رد الاتصال أي
السجل: ملف 2 تحميل رد الاتصال أي
السجل: Loadjs 1 ابدأ
السجل: loadjs 1 الانتهاء
السجل: LoadJS 2 تبدأ
السجل: loadjs 2 الانتهاء
السجل: ملف 2 رد الاتصال أكمل أي
السجل: ملف 1 رد الاتصال أكمل أي

IE8:

IE9:

سجل: اكتب ابدأ
السجل: اكتب الانتهاء
السجل: Callback Outer JS أكمل أي
السجل: ملف 1 تحميل رد الاتصال أي
السجل: ملف 2 تحميل رد الاتصال أي
السجل: Loadjs 1 ابدأ
السجل: loadjs 1 الانتهاء
السجل: LoadJS 2 تبدأ
السجل: loadjs 2 الانتهاء
السجل: ملف 1 رد الاتصال أكمل أي
السجل: ملف 2 رد الاتصال أكمل أي

Firefox:

اكتب ابدأ
اكتب الانتهاء
رد الاتصال الخارجي JS ، لا IE
loadjs 1 تبدأ
loadjs 1 الانتهاء
ملف 1 رد الاتصال ، لا IE
LOADJS 2 تبدأ
loadjs 2 الانتهاء
الملف 2 رد الاتصال ، لا IE

الكروم:

ما سبق هو مناقشة موجزة لطريقة مرجع ملف JS وتنفيذها المتزامن والتنفيذ غير المتزامن الذي يجلبه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع ودعم wulin.com أكثر ~