بادئ ذي بدء ، أريد أن أتحدث عن تحميل وتنفيذ JavaScript. بشكل عام ، تحتوي المتصفحات على ميزتين رئيسيتين لتشغيل JavaScript: 1) تنفيذها مباشرة بعد التحميل ، 2) ستحظر المحتوى اللاحق للصفحة (بما في ذلك عرض الصفحات وتنزيل الموارد الأخرى) أثناء التنفيذ. لذلك ، إذا تم تقديم ملفات JS متعددة ، ثم بالنسبة للمتصفح ، يتم تحميل ملفات JS هذه بشكل متسلسل وتنفيذها بالتتابع.
نظرًا لأن JavaScript قد تدير DOM Tree of HTML ، فإن المتصفحات عمومًا لا تقوم بتنزيل ملفات CSS بالتوازي مثل التنزيلات المتوازية ، لأن هذا ناتج عن خصوصية ملفات JS. لذلك ، إذا أراد JavaScript الخاص بك تشغيل عنصر DOM اللاحق ، فسيقوم المتصفح في الأساس بالإبلاغ عن خطأ يقول أنه لا يمكن العثور على الكائن. لأنه عندما يتم تنفيذ JavaScript ، يتم حظر HTML وراء ، ولا توجد عقدة DOM خلف شجرة DOM. لذلك تم الإبلاغ عن البرنامج كخطأ.
الطريقة التقليدية
لذلك ، عندما تكتب الرمز التالي في الرمز:
نسخة الكود كما يلي:
<script type = "text/javaScript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
في الأساس ، ستقوم علامة <script> في الرأس بحظر تحميل الموارد اللاحقة وتوليد الصفحة بأكملها. لقد قدمت مثالاً خاصاً يمكنك إلقاء نظرة على: مثال 1. ملاحظة: هناك جملة واحدة فقط في تنبيه. JS: ALERT ("Hello World") ، مما يجعل من الأسهل بالنسبة لك أن ترى كيف تمنع JavaScript الأشياء وراءه.
لذلك ، أنت تعرف لماذا تضع العديد من مواقع الويب JavaScript في نهاية صفحة الويب ، إما باستخدام أحداث مثل Window.onload أو Docmuemt جاهزة.
بالإضافة إلى ذلك ، نظرًا لأن معظم رمز JavaScript لا يحتاج إلى انتظار الصفحات ، فإننا نقوم بتحميل الوظائف بشكل غير متزامن. فكيف نتحمل بشكل غير متزامن؟
document.write طريقة
لذلك ، قد تفكر في Document.write () يمكنها حل مشكلة عدم الحظر. بالطبع ستعتقد أنه بعد أن يمكن تنفيذ العلامة <script> ، يمكن تنفيذ الأشياء التالية ، وهو أمر صحيح. هذا صحيح بالنسبة لرمز JavaScript في نفس علامة البرنامج النصي ، ولكن بالنسبة للصفحة بأكملها ، سيظل هذا يحظر. هنا رمز الاختبار:
نسخة الكود كما يلي:
<script type = "text/javaScript" language = "javaScript">
وظيفة loadjs (script_filename) {
document.write ('<' + 'script language = "javaScript" type = "text/javaScript"') ؛
document.write ('src = "' + script_filename + '">') ؛
document.write ('<'+'/script'+'>') ؛
تنبيه ("loadjs () خروج ...") ؛
}
var script = 'http://coolshell.cn/asyncjs/alert.js' ؛
loadjs (السيناريو) ؛
تنبيه ("loadjs () انتهى!") ؛
</script>
<script type = "text/javaScript" language = "javaScript">
تنبيه ("كتلة أخرى") ؛
</script>
ما رأيك في ترتيب التنبيهات؟ يمكنك تجربتها في متصفحات مختلفة. فيما يلي صفحة الاختبار التي تريد إغلاقها: مثال 2.
خصائص التأجيل والمتزامنة من البرنامج النصي
لقد دعمت IE علامات تأجيل منذ IE6 ، مثل:
نسخة الكود كما يلي:
<script defer type = "text/javaScript" src = "./ alert.js">
</script>
بالنسبة إلى IE ، ستسمح هذه العلامة IE بتنزيل ملفات JS بالتوازي مع الاستمرار على تنفيذها حتى يتم اكتمال تحميل DOM بالكامل (DomContentLoaded). سيتم تشغيل مؤجلات متعددة <script> بالترتيب الذي يظهرون عند تنفيذه. أهم شيء هو أنه بعد إضافة التأجيل إلى <script> ، لن يمنع عرض DOM اللاحق. ومع ذلك ، لأن هذا التأجيل يستخدم فقط لـ IE ، يتم استخدامه بشكل عام أقل.
يضيف HTML5 القياسي أيضًا سمة تقوم بتحميل JavaScript بشكل غير متزامن: Async. بغض النظر عن القيمة التي تخصصها لها ، طالما ظهر ، فإنها تبدأ في تحميل ملف JS بشكل غير متزامن. ومع ذلك ، فإن التحميل غير المتزامن سيواجه مشكلة خطيرة ، أي أنه ينفذ بأمانة "التنفيذ مباشرة بعد التحميل" ، لذلك على الرغم من أنه لا يمنع عرض الصفحة ، لا يمكنك التحكم في ترتيب وتوقيت تنفيذها. يمكنك إلقاء نظرة على هذا المثال لتجربة ذلك.
المتصفحات التي تدعم علامة Async هي: Firefox 3.6+ ، Chrome 8.0+ ، Safari 5.0+ ، IE 10+ ، لا تدعمها الأوبرا (من هنا) ، لذلك هذه الطريقة ليست جيدة جدًا أيضًا. لأنه ليس كل المتصفحات يمكن أن تفعل ذلك.
إنشاء ديناميكي دوم
ربما تكون هذه الطريقة هي الأكثر استخدامًا.
نسخة الكود كما يلي:
وظيفة loadjs (script_filename) {
var script = document.createElement ('script') ؛
script.setattribute ('type' ، 'text/javaScript') ؛
script.setAttribute ('src' ، script_filename) ؛
script.setAttribute ('id' ، 'coolshell_script_id') ؛
script_id = document.getElementById ('coolshell_script_id') ؛
if (script_id) {
document.getElementsByTagName ('head') [0] .RemoveChild (script_id) ؛
}
document.getElementsByTagName ('head') [0] .appendChild (script) ؛
}
var script = 'http://coolshell.cn/asyncjs/alert.js' ؛
loadjs (السيناريو) ؛
أصبحت هذه الطريقة تقريبًا طريقة غير متزامنة قياسية لتحميل ملفات JS. للحصول على عرض لهذه الطريقة ، يرجى الرجوع إلى: مثال 3. تلعب هذه الطريقة أيضًا مع أشياء JSONP ، أي يمكنني تحديد البرنامج النصي للخلفية (مثل PHP) للسيناريو SRC ، ويعيد هذا PHP وظيفة JavaScript التي تعتبر معلمتها عبارة عن سلسلة JSON ، والتي تعود إلى وظيفة JavaScript المحددة مسبقًا. يمكنك إلقاء نظرة على هذا المثال: T.JS (هذا المثال هو مثال صغير على مكالمة AJAX غير المتزامنة التي جمعتها على Weibo من قبل)
تحميل JS بشكل غير متزامن عند الطلب
يحل المثال أعلاه لطريقة DOM مشكلة التحميل غير المتزامن لـ JavaScript ، لكنه لا يحل المشكلة التي نريد تشغيلها في الوقت الذي حددناه. لذلك ، نحتاج فقط إلى ربط طريقة DOM أعلاه بحدث معين.
على سبيل المثال:
مرتبط بـ Window.Load - مثال 4
يجب عليك مقارنة الاختلافات في التنفيذ بين المثال 4 والمثال 3. في كلا المثالين ، استخدمت خصيصًا JavaScript مع تمييز الكود لمعرفة تنفيذ البرنامج النصي مع تمييز الكود وتنفيذ ALERT.JS. ستعرف الفرق)
نسخة الكود كما يلي:
window.load = loadjs ("http://coolshell.cn/asyncjs/alert.js")
مرتبط بحدث معين - مثال 5
نسخة الكود كما يلي:
<p style = "cursor: pointer" onClick = "loadjs ()"> انقر لتحميل Alert.js </p>
هذا المثال بسيط للغاية. فقط عند النقر على عنصر DOM ، سيتم تحميل Alert.js بالفعل.
أكثر
ومع ذلك ، يبدو أن الارتباط بحدث معين يمر قليلاً ، لأن التنزيل الحقيقي لـ JS لن يتم فقط عند النقر ، والذي سيكون بطيئًا جدًا مرة أخرى. حسنًا ، علينا هنا أن نلقي مشكلتنا النهائية - نريد تنزيل ملف JS بشكل غير متزامن إلى المنطقة المحلية للمستخدم ، ولكن لا ننفذها ، فقط إذا أردنا تنفيذها.
سيكون من الرائع أن يكون لدينا الطريقة التالية:
نسخة الكود كما يلي:
var script = document.createElement ("script") ؛
script.noexecute = true ؛
script.src = "Alert.js" ؛
document.body.appendchild (script) ؛
// يمكننا القيام بذلك لاحقًا
script.execute () ؛
لسوء الحظ ، هذا مجرد حلم جميل. اليوم لا يزال JavaScript بدائي نسبيًا ، ولم يتم تحقيق "حلم JS" هذا بعد.
لذلك ، يمكن للمبرمجين لدينا استخدام الاختراق فقط للقيام بذلك.
يستخدم بعض المبرمجين نوع البرنامج النصي غير القياسي لتخزين JavaScript. يحب:
نسخة الكود كما يلي:
<script type = cache/script src = "./ alert.js"> </script>
نظرًا لأن "ذاكرة التخزين المؤقت/النص" ، لا يمكن تحليل هذا الشيء من قبل المتصفح على الإطلاق ، لذلك لا يمكن للمتصفح تنفيذ ALERT.JS كـ JavaScript ، ولكن يتعين عليه تنزيل ملف JS ، بحيث يمكن القيام به. لسوء الحظ ، يتبع WebKit بشكل صارم معايير HTML - لمثل هذه الأشياء غير المعترف بها ، فإنها ستحذفها مباشرة ولا تفعل شيئًا. لذلك ، تم كسر حلمنا مرة أخرى.
لذلك ، نحن بحاجة إلى اختراقها أكثر من ذلك بقليل. تمامًا مثل N التي تم تشغيلها قبل عدة سنوات ، يمكننا استخدام علامة الكائن (أو علامة iframe) ، لذلك لدينا الرمز التالي:
نسخة الكود كما يلي:
دالة cachejs (script_filename) {
var cache = document.createElement ('Object') ؛
cache.data = script_filename ؛
cache.id = "coolshell_script_cache_id" ؛
cache.width = 0 ؛
Cache.Height = 0 ؛
document.body.appendchild (ذاكرة التخزين المؤقت) ؛
}
ثم نسمي هذه الوظيفة في النهاية. يرجى الاطلاع على المثال ذي الصلة: مثال 6
اضغط على Ctrl+SHIT+I تحت Chrome ، قم بالتبديل إلى صفحة الشبكة ، ويمكنك أن ترى أنه تم تنزيل ALERT.JS ولكن لم يتم تنفيذه. ثم نستخدم طريقة المثال 5 ، لأن جانب المتصفح يحتوي على ذاكرة التخزين المؤقت ، لن يتم تنزيل Alert.js من الخادم. لذلك ، يمكن ضمان سرعة التنفيذ.
يجب أن تكون على دراية بهذا النوع من التحميل المسبق. يمكنك أيضًا استخدام طرق Ajax ، مثل:
نسخة الكود كما يلي:
var xhr = new xmlhttprequest () ؛
XHR.Open ('get' ، 'new.js') ؛
XHR.SEND ('') ؛
لن أقول المزيد وأعطي أمثلة هنا. يمكنك تجربة ذلك بنفسك.
أخيرًا ، دعنا نذكر اثنين من JS ، أحدهما هو ControlJs والآخر هو HeadJs ، والذي يستخدم خصيصا لجعل ملفات JavaScript غير متزامنة.
حسنًا ، هذا هو كل المحتوى. آمل أن تتمكن من فهم تحميل وتنفيذ JavaScript ، وكذلك التقنيات ذات الصلة بعد قراءتها. في الوقت نفسه ، آمل أيضًا أن يقدم لك جميع الخبراء الأماميين النصيحة!