تسلسل تنفيذ جافا سكريبت عند تحميل الصفحة

1. تتمثل طريقة تضمين Javascript في HTML في وضع كود Javascript مباشرةً بين زوج العلامات <script> و</script>. استخدم سمة src للعلامة <script /> لصياغة ملف js خارجي ووضعه فيه معالج الحدث، مثل: <p onclick="alert('أنا Javascript الذي تم تنفيذه بواسطة حدث onclick')">انقر فوقي</p>
باعتباره نص عنوان URL، يستخدم عنوان URL هذا بروتوكول Javascript: الخاص، مثل: <a href="javascript:alert('أنا جافا سكريبت يتم تنفيذه بواسطة javascript:protocol')">انقر فوقي</a>
استخدم طريقة document.write() الخاصة بجافا سكريبت نفسها لكتابة كود جافا سكريبت جديد. استخدم Ajax للحصول على كود جافا سكريبت بشكل غير متزامن، ثم قم بتنفيذ

الطريقتين الثالثة والرابعة. يجب تشغيل جافا سكريبت المكتوب قبل أن يتم تنفيذه، لذلك ما لم يكن تم تعيينه خصيصًا، ولن يتم تنفيذ الصفحة.

2. يعد ترتيب تنفيذ Javascript على الصفحة جزءًا من مستند HTML، لذا فإن الترتيب الذي يتم به تنفيذ Javascript عند تحميل الصفحة هو الترتيب الذي تظهر به علامة المقدمة <script /> في علامة <script /> أو من خلال src، يتم تنفيذ JS الخارجي المستورد بالترتيب الذي تظهر به بياناته، وتكون عملية التنفيذ جزءًا من تحميل المستند.
يمكن استدعاء المتغيرات والوظائف العامة التي يحددها كل برنامج نصي بواسطة البرامج النصية التي يتم تنفيذها لاحقًا.
يجب أن يكون قد تم الإعلان عن استدعاء المتغير مسبقًا، وإلا ستكون قيمة المتغير التي تم الحصول عليها غير محددة.
<script type="text/javscrpt">//<![CDATA[
تنبيه (tmp)؛ // الإخراج غير محدد
فار تمب = 1؛
تنبيه (تم)؛ // الإخراج 1
//]]></script>
في نفس البرنامج النصي، يمكن أن يظهر تعريف الوظيفة بعد استدعاء الوظيفة، ومع ذلك، إذا كان في قطعتين من التعليمات البرمجية وكان استدعاء الوظيفة في القطعة الأولى من التعليمات البرمجية، فسيتم الإبلاغ عن خطأ دالة غير محدد.
<script type="text/javscrpt">//<![CDATA[
aa(); // خطأ في المتصفح
//]]></script>
<script type="text/javscrpt">//<![CDATA[
أأ ()؛ // الإخراج 1
وظيفة أأ () {تنبيه (1)؛}
//]]></script>
سوف يقوم document.write() بكتابة الإخراج إلى موقع مستند البرنامج النصي بعد أن يقوم المتصفح بتحليل محتوى المستند حيث يوجد documemt.write()، وسوف يستمر في تحليل إخراج المحتوى بواسطة document.write(). ثم تابع تحليل مستند HTML.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('تنبيه(2);')
document.write('alert("أنا" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
تنبيه (3)؛
//]]></script>
محتوى test.js هو:

var tmpStr = 1;
تنبيه (tmpStr)؛
ترتيب القيم المنبثقة في Firefox وOpera هو: 1، 2، أنا 1، 3
ترتيب القيم المنبثقة في IE هو: 2، 1، 3. وفي الوقت نفسه، يُبلغ المتصفح عن خطأ: tmpStr غير محدد، قد يكون السبب هو أن IE لا ينتظر رمز Javascript في SRC سيتم تحميله قبل تنفيذ السطر التالي عند ظهور document.write، لذلك، ينبثق 2 أولاً، وعند تنفيذ document.write('document.write("I am" + tmpStr)') واستدعاء tmpStr، لم يتم تعريف tmpStr ، مما أدى إلى حدوث خطأ.

لحل هذه المشكلة، يمكنك استخدام مبدأ تحليل HTML لتحليل علامة HTML واحدة ثم تنفيذ العلامة التالية، وتقسيم الكود لتحقيق ذلك:

<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('تنبيه(2);')
document.write('alert("أنا" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
تنبيه (3)؛
//]]></script>
بهذه الطريقة، يكون ترتيب قيم الإخراج ضمن IE والمتصفحات الأخرى متسقًا: 1، 2، أنا 1، 3.

3. كيفية تغيير ترتيب تنفيذ Javascript على الصفحة باستخدام onload
<script type="text/javascript">//<![CDATA[
window.onload = f;
وظيفة و () {تنبيه (1)؛}
تنبيه (2)؛
//]]></script>
ترتيب قيم الإخراج هو 2، 1.

تجدر الإشارة إلى أنه إذا كان هناك العديد من winodws.onload، فإن الحل الأكثر فعالية هو فقط:

window.onload = function(){f();f1();f2();.... }
استخدام أنواع أحداث DOM من المستوى الثاني

if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}آخر{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
يمكن استخدام التأجيل في IE. تتمثل وظيفة التأجيل في تحميل التعليمات البرمجية وعدم تنفيذها على الفور. وهي تشبه إلى حد ما window.onload، ولكنها لا تحتوي على قيود window.onload يمكن استخدام .onload بشكل متكرر، ولكنه صالح فقط في IE، لذلك يمكن تعديل المثال أعلاه
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('تنبيه(2);')
document.write('alert("أنا" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
تنبيه (3)؛
//]]></script>
بهذه الطريقة، لن يقوم IE بالإبلاغ عن خطأ، ويصبح ترتيب قيم الإخراج: 1، 3، 2، أنا 1.

عندما يواجه محلل HTML برنامجًا نصيًا، يجب عليه إنهاء تحليل المستند كالمعتاد و انتظر حتى يتم تنفيذ البرنامج النصي. لحل هذه المشكلة، يحدد معيار HTML4 التأجيل. استخدم التأجيل لمطالبة المتصفح بمواصلة تحليل مستند HTML وتأخير تنفيذ البرنامج النصي. يعد هذا التأخير مفيدًا جدًا عند تحميل البرنامج النصي من ملف خارجي، بحيث لا يضطر المتصفح إلى انتظار تحميل جميع الملفات الخارجية قبل متابعة التنفيذ، مما قد يؤدي إلى تحسين الأداء بشكل فعال. يعد IE حاليًا المتصفح الوحيد الذي يدعم سمة التأجيل، لكن IE لا يطبق سمة التأجيل بشكل صحيح لأن البرامج النصية المؤجلة تتأخر دائمًا حتى نهاية المستند، بدلاً من تأخيرها فقط إلى البرنامج النصي التالي غير المؤجل. وهذا يعني أن ترتيب تنفيذ البرامج النصية المؤجلة في IE مربك للغاية، ولا يمكن تحديد أي وظائف ومتغيرات غير مطلوبة من قبل البرامج النصية اللاحقة غير المؤجلة. يجب أن يكون وقت تنفيذ جميع البرامج النصية المؤجلة في IE بعد إنشاء شجرة مستندات HTML وقبل window.onload.

الاستفادة من اياكس.
نظرًا لأن xmlhttpRequest يمكنه تحديد حالة تحميل المستندات الخارجية، فيمكنه تغيير ترتيب تحميل التعليمات البرمجية.