مقدمة
بغض النظر عما إذا كان رمز JavaScript الحالي مضمنًا أو في ملف ارتباط خارجي ، يجب إيقاف تنزيل وتقديم الصفحة وانتظار تنفيذ البرنامج النصي. كلما طالت عملية تنفيذ JavaScript ، كلما طال انتظار المستعرض الاستجابة لإدخال المستخدم. السبب في حظر المتصفحات عند تنزيل البرامج النصية وتنفيذها هو أن البرامج النصية قد تغير مساحة اسم الصفحة أو JavaScript ، والتي تؤثر على محتوى الصفحات اللاحقة. مثال نموذجي هو استخدام document.write() في صفحة ، مثل القائمة 1
سرد 1 رمز JavaScript مثال مضمّن
<html> <head> <title> مثال المصدر </title> </head> <body> <p> <script type = "text/javaScript"> document.write ("اليوم هو" + (تاريخ جديد ()). TODATESTRING ()) ؛ </script> </p> </body> </html>عندما يواجه المتصفح علامة <script> ، لا تحتوي صفحة HTML الحالية على طريقة لمعرفة ما إذا كانت JavaScript ستضيف محتوى إلى علامة <p> ، أو تقديم عناصر أخرى ، أو حتى إزالة العلامة. لذلك ، في هذا الوقت ، سيتوقف المتصفح عن معالجة الصفحة ، وتنفيذ رمز JavaScript أولاً ، ثم متابعة تحليل الصفحة وتقديمها. يحدث الشيء نفسه عند تحميل JavaScript باستخدام خاصية SRC. يجب أن يستغرق المتصفح أولاً الوقت لتنزيل الكود في ملف الارتباط الخارجي ، ثم تحليله وتنفيذه. خلال هذه العملية ، يتم حظر عرض الصفحة وتفاعل المستخدم بالكامل.
موقع السيناريو
تنص مواصفات HTML 4 على أنه يمكن وضع علامات <script> في <head> أو <Body> من مستندات HTML ويُسمح لها بالظهور عدة مرات. يعتاد مطورو الويب عمومًا على تحميل الرابط الخارجي JavaScript في <head> ، ثم استخدام علامة <ink> لتحميل ملفات CSS الخارجية أو معلومات الصفحة الأخرى. على سبيل المثال ، سرد 2
إدراج 2 مثال على مواقع البرنامج النصي غير الفعالة
<html> <head> <title> مثال المصدر </title> <script type = "text/javaScript" src = "script1.js"> </script> <script type = "text/javaScript" src = "script2. type = "text/javaScript" src = "script3.js"> </script> <link rel = "stylesheet" type = "text/css" href = "styles.css
ومع ذلك ، فإن هذا النهج التقليدي يخفي مشاكل الأداء الخطيرة. في المثال في القائمة 2 ، عندما يقوم المتصفح بتوحيد علامة <script> (السطر 4) ، يتوقف المتصفح عن تحليل المحتوى اللاحق ، ويعطي الأولوية لتنزيل ملف البرنامج النصي وتنفيذ الكود فيه ، مما يعني أنه لا يمكن تحميل ملف نمط الأنماط اللاحق أو علامة <Body>. نظرًا لأنه لا يمكن تحميل علامة <Body> ، فلن يتم عرض الصفحة بشكل طبيعي. لذلك ، تكون الصفحة فارغة حتى يتم تنفيذ رمز JavaScript بالكامل. يصف الشكل 1 عملية تنزيل البرامج النصية وملفات النمط أثناء تحميل الصفحة.
الشكل 1 تحميل وتنفيذ ملفات JavaScript لحظر تنزيل ملفات أخرى
يمكننا العثور على ظاهرة مثيرة للاهتمام: يبدأ ملف JavaScript الأول في التنزيل ، مع منع تنزيل الملفات الأخرى على الصفحة. بالإضافة إلى ذلك ، هناك تأخير قبل الانتهاء من تنزيل Script1.js ويبدأ Script2.js في التنزيل ، والذي يحدث ليكون عملية تنفيذ ملف Script1.js. يجب أن ينتظر كل ملف حتى يتم تنزيل الملف السابق وتنفيذه قبل أن يتمكن من البدء في التنزيل. أثناء تنزيل هذه الملفات واحدة تلو الأخرى ، يرى المستخدم صفحة فارغة.
بدءًا من IE 8 و Firefox 3.5 و Safari 4 و Chrome 2 ، يسمح جميعهم بتنزيل ملفات JavaScript بالتوازي. هذه أخبار جيدة لأن علامة <script> لا تمنع علامات <script> الأخرى عند تنزيل الموارد الخارجية. لسوء الحظ ، ستظل عملية تنزيل JavaScript تمنع تنزيل الموارد الأخرى ، مثل ملفات الأنماط والصور. على الرغم من أن عملية تنزيل البرنامج النصي لا تؤثر على بعضها البعض ، إلا أن الصفحة لا يزال يتعين عليها الانتظار حتى يتم تنزيل جميع رمز JavaScript وتنفيذها قبل أن تتمكن من المتابعة. لذا ، على الرغم من أن أحدث المتصفحات تعمل على تحسين الأداء من خلال السماح بتنزيل متوازي ، إلا أن المشكلة لم يتم حلها بالكامل ولا يزال حظر البرنامج النصي يمثل مشكلة.
نظرًا لأن البرامج النصية تمنع تنزيلات الموارد الأخرى على الصفحة ، فمن المستحسن وضع جميع العلامات <script> في أسفل <Body> بأكبر قدر ممكن لتقليل التأثير على تنزيل الصفحة بأكمله. على سبيل المثال ، سرد 3
إدراج 3 مثال على وضع الرمز الموصى به
<html> <head> <title> مثال المصدر </title> <link rel = "stylesheet" type = "text/css" href = "styles.css"> </head> <pody> <p> hello world! </p> <!-مثال على وضع البرنامج النصي الفعال-> <sript typ type = "text/javaScript" src = "script2.js"> </script> src = "script3.js"> </script> </body> </html>
يعرض هذا الرمز الموقع الموصى به لوضع علامات <script> في مستندات HTML. على الرغم من أن تنزيل البرنامج النصي يحظر برنامج نصي آخر ، فقد تم تنزيل معظم الصفحة وعرضها على المستخدم ، لذلك لن يظهر تنزيل الصفحة بطيئًا للغاية. هذه هي القاعدة الأولى لتحسين JavaScript: ضع البرنامج النصي في الأسفل.
تنظيم البرامج النصية
نظرًا لأن كل علامة <Script> يتم حظرها عند تنزيل الصفحة في البداية ، فإن تقليل عدد علامات <script> المضمنة في الصفحة يساعد على تحسين هذا الموقف. هذا ليس فقط لنصوص الارتباطات الخارجية ، ولكن أيضًا لعدد البرامج النصية المدمجة. عندما يواجه المتصفح علامة <script> أثناء تحليل صفحة HTML ، فإن ذلك سيؤدي إلى تأخير معين بسبب تنفيذ البرنامج النصي ، وبالتالي فإن تقليل وقت التأخير سيؤدي إلى تحسين الأداء الكلي للصفحة بشكل كبير.
تختلف هذه المشكلة قليلاً عند التعامل مع ملفات JavaScript الخارجية. بالنظر إلى الأداء الإضافي من طلبات HTTP ، سيكون تنزيل ملف 100 كيلو بايت أسرع من تنزيل ملفات 5 20 كيلو بايت. وهذا يعني أن تقليل عدد البرامج النصية للارتباطات الخارجية في الصفحة سيحسن الأداء.
عادة ما يحتاج موقع ويب أو تطبيق كبير إلى الاعتماد على العديد من ملفات JavaScript. يمكنك دمج ملفات متعددة في واحدة ، بحيث تحتاج فقط إلى الرجوع إلى علامة <script> لتقليل استهلاك الأداء. يمكن تحقيق دمج الملفات من خلال أدوات التغليف في وضع عدم الاتصال أو بعض الخدمات في الوقت الفعلي عبر الإنترنت.
تجدر الإشارة إلى أن وضع البرنامج النصي المدمج بعد الإشارة إلى ورقة نمط الارتباط الخارجية سيؤدي إلى حظر الصفحة وانتظار تنزيل ورقة الأنماط. يتم ذلك للتأكد من أن البرامج النصية المدمجة يمكنها الحصول على معلومات النمط الأكثر دقة عند تنفيذها. لذلك ، يوصى بعدم اتباع البرامج النصية المدمجة مباشرة بعد علامة <link>.
البرامج النصية غير الحظر
ليس من الممكن دائمًا تقليل حجم ملف JavaScript والحد من طلبات HTTP في تطبيقات الويب الغنية بالميزات أو مواقع الويب الكبيرة. كلما زادت ميزات تطبيق الويب ، زاد رمز JavaScript الذي يحتاجه. على الرغم من أن تنزيل ملف JavaScript واحد أكبر فقط ينشئ طلب HTTP مرة واحدة ، إلا أنه سيغلق المتصفح لفترة طويلة. لتجنب ذلك ، من الضروري تحميل ملفات JavaScript تدريجياً في الصفحة من خلال بعض التقنيات المحددة ، بحيث لا تمنع المتصفح إلى حد ما.
السر لإلغاء حظر البرامج النصية هو أن رمز JavaScript يتم تحميله فقط بعد تحميل الصفحة. هذا يعني تنزيل البرنامج النصي بعد إطلاق حدث Onload لكائن النافذة. هناك عدد من الطرق لتحقيق هذا التأثير.
تأخير تحميل البرامج النصية
يحدد HTML 4 سمة ممتدة لعلامة <script>: تأجيل. تشير السمة المؤجلة إلى أن البرنامج النصي الموجود في هذا العنصر لا يعدل DOM ، بحيث يمكن تأخير الرمز بأمان. يتم دعم السمة المؤجلة فقط من قبل المتصفحات IE 4 و Firefox 3.5 اللاحقة ، لذلك فهي ليست حلًا مثاليًا للمتصفح. في المتصفحات الأخرى ، يتم تجاهل السمة المؤجلة مباشرة ، وبالتالي سيتم معالجة علامة <script> بالطريقة الافتراضية ، مما يعني أنها ستؤدي إلى انسداد. ومع ذلك ، لا يزال هذا حلاً مفيدًا إذا كان متصفحك المستهدف يدعمه. القائمة 4 مثال
إدراج 4 مثال على طريقة استخدام السمة المؤجلة
<script type = "text/javaScript" src = "script1.js" defer> </script>
يمكن وضع علامة <script> مع السمة المؤجلة في أي مكان في المستند. سيبدأ ملف JavaScript المقابل في التنزيل عندما يتم تحليل الصفحة إلى علامة <script> ، ولكن لن يتم تنفيذها حتى يتم تحميل DOM ، أي حدث Onload. عند تنزيل ملف JavaScript مع سمة التأجيل ، فإنه لا يحظر العمليات الأخرى في المتصفح ، بحيث يمكن تنزيل هذه الملفات بالتوازي مع ملفات الموارد الأخرى.
لن يتم تنفيذ أي عنصر <script> مع السمة المؤجلة حتى يتم تحميل DOM ، سواء أكان مضمنًا أو نصوصًا خارجية. يوضح المثال في القائمة 5 كيف تؤثر السمة المؤجلة على سلوك البرنامج النصي:
سرد 5 تأثير السمة المؤجلة على سلوك البرنامج النصي
<html> <head> <title> مؤجل نص مؤجل </title> </head> <body> <script type = "text/javaScript" defer> ALERT ("defer") ؛ </script> <script type = "text/javaScript"> Alert ("script") ؛ </script> <script type = "text/javaScript"> window.onload = function () {Alert ("load") ؛ } ؛ </script> </body> </html>يظهر هذا الرمز ثلاثة مربعات حوار أثناء معالجة الصفحة. ترتيب المنبثقة للمتصفحات التي لا تدعم السمة المؤجلة هي: "تأجيل" ، "نص" ، و "تحميل". في المتصفحات التي تدعم السمة المؤجلة ، يكون الترتيب المنبثق: "Script" ، "Defer" ، و "Load". لاحظ أنه لا يتم تنفيذ عنصر <script> مع السمة المؤجلة بعد العرف الثاني ، ولكن يتم استدعاؤه قبل تشغيل حدث Onload.
إذا كان متصفحك المستهدف لا يشمل سوى Internet Explorer و Firefox 3.5 ، فإن البرنامج النصي المؤجل مفيد بالفعل. إذا كنت بحاجة إلى دعم متصفحات متعددة عبر المجالات ، فهناك طرق أكثر اتساقًا لتنفيذها.
يحدد HTML 5 سمة جديدة ممتدة للعلامة <script>: Async. وظيفتها هي نفسها المؤجلة ، ويمكنها تحميل وتنفيذ البرامج النصية بشكل غير متزامن ، دون حظر تحميل الصفحة بسبب تحميل البرامج النصية. ومع ذلك ، هناك شيء واحد يجب ملاحظة أنه في حالة Async ، سيتم تنفيذ البرامج النصية JavaScript بمجرد تنزيلها ، لذلك من المحتمل جدًا ألا يتم تنفيذها بالترتيب الأصلي. إذا كانت هناك تبعيات قبل وبعد البرامج النصية JavaScript ، فمن المحتمل جدًا أن يحدث خطأ باستخدام Async.
عناصر البرنامج النصي الديناميكي
يسمح لك نموذج كائن المستند (DOM) بإنشاء محتوى مستند تقريبًا من HTML تقريبًا باستخدام JavaScript. يمكن إنشاء عنصر <script> ، مثل العناصر الأخرى للصفحة ، بسهولة بالغة باستخدام وظائف DOM القياسية:
قائمة 6 إنشاء <script> عناصر مع وظائف DOM القياسية
var script = document.createElement ("script") ؛ script.type = "text/javaScript" ؛ script.src = "script1.js" ؛ document.getElementSbyTagName ("Head") [0] .AppendChild (script) ؛يقوم عنصر <script> الجديد بتحميل ملف مصدر Script1.js. قم بتنزيل هذا الملف فور إضافة العنصر إلى الصفحة. النقطة الرئيسية لهذه التكنولوجيا هي أنه بغض النظر عن مكان بدء التنزيل ، فإن تنزيل وتشغيل الملف لن يحظر معالجة الصفحات الأخرى. يمكنك حتى وضع هذه الرموز في قسم <Head> دون التأثير على رمز الصفحة للباقي (باستثناء اتصالات HTTP المستخدمة لتنزيل الملفات).
عندما يتم تنزيل ملف باستخدام عقدة نصية ديناميكية ، يتم تنفيذ الرمز الذي تم إرجاعه على الفور (باستثناء Firefox و Opera ، سينتظرون جميع العقد النصي الديناميكية السابقة لإكمال التنفيذ). تعمل هذه الآلية بشكل جيد عندما يكون البرنامج النصي من النوع "المدير الذاتي" ، ولكن إذا كان البرنامج النصي يحتوي فقط على واجهات للاستدعاء من البرامج النصية الأخرى على الصفحة ، فسوف يسبب مشاكل. في هذه الحالة ، تحتاج إلى تتبع ما إذا كان تنزيل البرنامج النصي قد اكتمل وما إذا كان جاهزًا. يمكنك استخدام العقد الديناميكية <script> لإصدار الأحداث للحصول على المعلومات ذات الصلة.
ستصدر Firefox و Opera و Chorme و Safari 3+ حدث Onload بعد اكتمال استقبال العقدة <script>. يمكنك الاستماع إلى هذا الحدث للحصول على إشعارات تحضيرها البرنامج النصي:
سرد 7 تحميل البرامج النصية JavaScript من خلال الاستماع إلى أحداث Onload
var script = document.createElement ("script") script.type = "text/javaScript" ؛ // firefox ، opera ، chrome ، safari 3+script.onload = function () {Alert ("script loaded!") ؛} ؛ script.src = "script1.js" ؛ document.getElementsByTagName ("Head") [0] .AppendChild (script) ؛يدعم Internet Explorer تطبيقًا آخر ينبعث منه حدث ReadyStateChange. يحتوي عنصر <script> على خاصية ReadyState التي تتغير قيمتها كعملية لتنزيل الملفات الخارجية. هناك خمس قيم لـ ReadyState:
1. "غير مهذار": الحالة الافتراضية
2. "التحميل": يبدأ التنزيل
3. "محملة": تنزيل مكتمل
4. "التفاعلية": تم الانتهاء من التنزيل ولكنه غير متوفر بعد
5. "كاملة": جميع البيانات جاهزة
تقول وثائق Microsoft أنه خلال دورة حياة العنصر <script> ، قد لا تظهر قيم ReadyState هذه ، ولكن لا تشير إلى القيم التي سيتم استخدامها دائمًا. في الممارسة العملية ، ما يهمنا أكثر هو الحالات "المحملة" و "الكاملة". لا يحتوي Internet Explorer على الحالة النهائية التي يمثلها هاتان قيمتان ReadyState. في بعض الأحيان ، سيحصل عنصر <script> على "محمل" ولكن لا "يكتمل" ، ولكن في بعض الحالات ، تظهر "كاملة" ولا يمكن استخدام "تحميل". الطريقة الأكثر أمانًا هي التحقق من هاتين الدولتين في حدث ReadyStateChange ، وعندما تظهر إحدى الولايات ، حذف مقبض الأحداث ReadyStateChange (تأكد من عدم معالجة الحدث مرتين):
سرد 8 تحميل البرامج النصية JavaScript عن طريق التحقق من حالة ReadyState
var script = document.createElement ("script") script.type = "text/javaScript" ؛ // Internet ExplorerScript.OnReadyStateChange = function () {if (script.readyState == "loaded" || script.readyState == "complete") تنبيه ("محمّل البرنامج النصي.") ؛ }} ؛ script.src = "script1.js" ؛ document.getElementSbyTagName ("Head") [0] .AppendChild (script) ؛في معظم الحالات ، تريد الاتصال بوظيفة لتنفيذ تحميل ديناميكي لملفات JavaScript. تُغلف الوظائف التالية الوظائف المطلوبة بواسطة التطبيقات القياسية وتطبيقات IE:
سرد 9 تغليف حسب الوظيفة
Function loadscript (url ، callback) {var script = document.createElement ("script") script.type = "text/javaScript" ؛ if (script.readyState) {// ie script.onReadyStateChange = function () {if (script.readyState == "loaded" || script.readyState == "COMMUNT") {script.OnReadyStateChange = null ؛ أتصل مرة أخرى()؛ }} ؛ } آخر {// others script.onload = function () {callback () ؛ } ؛ } script.src = url ؛ document.getElementsByTagName ("Head") [0] .AppendChild (Script) ؛}تتلقى هذه الوظيفة معلمتين: عنوان URL لملف JavaScript ، ووظيفة رد الاتصال التي يتم تشغيلها عند اكتمال استقبال JavaScript. يتم استخدام فحص السمة لتحديد الحدث الذي يجب مراقبته. في الخطوة الأخيرة ، قم بتعيين خاصية SRC وأضف عنصر <script> إلى الصفحة. يتم استخدام وظيفة loadscript () على النحو التالي:
سرد 10 كيفية استخدام وظيفة loadscript ()
loadscript ("script1.js" ، function () {Alert ("يتم تحميل الملف!") ؛}) ؛يمكنك تحميل العديد من ملفات JavaScript على الصفحة بشكل ديناميكي ، ولكن كن حذرًا من أن المتصفح لا يضمن الترتيب الذي يتم من خلاله تحميل الملفات. من بين جميع المتصفحات الرئيسية ، تضمن فقط Firefox و Opera تنفيذ البرامج النصية بالترتيب الذي تحدده. ستقوم المتصفحات الأخرى بتنزيل وتشغيل ملفات رمز مختلفة بالترتيب الذي يقوم الخادم بإرجاعها. يمكنك تسلسل عمليات التنزيل معًا لضمان طلبها ، على النحو التالي:
إدراج 11 تحميل نصوص JavaScript متعددة من خلال وظيفة loadscript ()
loadscript ("script1.js" ، function () {loadscript ("script2.js" ، function () {loadscript ("script3.js" ، function () {Alert ("يتم تحميل جميع الملفات!") ؛}) ؛}) ؛}) ؛ }) ؛ينتظر هذا الرمز script1.js ليكون متاحًا قبل البدء في تحميل script2.js ، ثم ابدأ في تحميل script3.js بعد توفر script2.js. على الرغم من أن هذه الطريقة ممكنة ، إلا أنها لا تزال مزعجة بعض الشيء إذا كان هناك العديد من الملفات التي يتم تنزيلها وتنفيذها. إذا كان ترتيب ملفات متعددة مهمًا للغاية ، فستكون هناك طريقة أفضل لتوصيل الملفات بملف واحد بالترتيب الصحيح. يمكن للملف المستقل تنزيل جميع التعليمات البرمجية في وقت واحد (حيث يتم ذلك بشكل غير متزامن ، لا توجد خسارة في استخدام ملف كبير).
يعد تحميل البرامج النصية الديناميكية النمط الأكثر استخدامًا في تنزيلات JavaScript غير المحظورة لأنه يمكن أن يكون متصفحًا وسهل الاستخدام.
باستخدام كائن XMLHTTPREQUEST (XHR)
تقوم هذه التقنية أولاً بإنشاء كائن XHR ، ثم يقوم بتنزيل ملف JavaScript ، ثم يقوم بحقن رمز JavaScript في الصفحة بعنصر ديناميكي <script>. القائمة 12 مثال بسيط:
سرد 12 نصوص JavaScript من خلال كائنات XHR
var xhr = new xmlhttprequest () ؛ xhr.open ("get" ، "script1.js" ، True) ؛ = document.createElement ("Script") ؛ script.type = "text/javaScript" ؛ script.text = xhr.Responsetext ؛ document.body.appendchild (script) ؛ }}} ؛ xhr.send (null) ؛يرسل هذا الرمز طلب الحصول على الخادم للحصول على ملف script1.js. يتحقق معالج الأحداث onReadyStateChange ما إذا كان ReadyState هو 4 ، ثم يتحقق مما إذا كان رمز حالة HTTP صالحًا (2xx يعني استجابة صالحة ، 304 تعني استجابة مخزنة مؤقتًا). إذا تم استلام استجابة صالحة ، يتم إنشاء عنصر <script> جديد وتم تعيين سمة النص الخاصة به على سلسلة Besponsetext المستلمة من الخادم. سيؤدي القيام بذلك في الواقع إلى إنشاء عنصر <script> مع رمز مضمّن. بمجرد إضافة عنصر <script> الجديد إلى المستند ، سيتم تنفيذ الرمز وجاهز للاستخدام.
الميزة الرئيسية لهذا النهج هي أنه يمكنك تنزيل رمز JavaScript الذي لم يتم تنفيذه على الفور. نظرًا لأن الكود يعود خارج علامة <script> (بمعنى آخر ، لا يخضع لعلامة <script>) ، فلن يتم تنفيذها تلقائيًا بعد التنزيل ، مما يسمح لك بتأجيل التنفيذ حتى يصبح كل شيء جاهزًا. ميزة أخرى هي أن نفس الكود لا يرمي استثناءات في جميع المتصفحات الحديثة.
يتمثل القيد الرئيسي لهذه الطريقة في أنه يجب وضع ملفات JavaScript في نفس المجال مثل الصفحة ولا يمكن تنزيلها من CDN (تشير CDN إلى "شبكة توصيل المحتوى" ، لذلك لا تستخدم صفحات الويب الكبيرة عادة تقنية حقن SCRIPT XHR.
أضف بعض الوظائف التي تستخدمها عادة
تحميل الوظائف (url ، رد الاتصال ، charset) {var head = document.getElementsByTagName ("head") [0] ؛ var script = document.createElement ("script") ؛ if (!! charset) script.charset = "utf-8" ؛ script.src = url ؛ script.onload = script.onReadyStateChange = function () {var f = script.readyState ؛ if (f && f! = "loaded" && f! = "complete") return ؛ script.onload = script.onReadyStateChange = null ؛ head.removechild (script) if (callback) {callback () || أتصل مرة أخرى }؛ } ؛ head.appendchild (script) ؛} // js getscripts getscripts (i ، linkarray ، fn) {env || getenv () ؛ var script = document.createElement ('script') ؛ script.type = 'text/javaScript' ؛ script.src = linkarray [i] ؛ var head = document.head || document.getElementSbyTagName ('head') [0] ؛ head.appendchild (script) ؛ if (env.ie && 'onReadyStateChange' in script &&! ('draggable' في البرنامج النصي)) {// ie browser تحميل script.onReadyStateChange = function () {if (/loaded occomplete/.test(script.readystate)) if (i === linkArray.length-1) {if (fn) {fn () ؛ }} آخر {getScripts (++ i ، linkarray ، fn) ؛ }}}} ؛ } آخر {script.onload = function () {if (i === linkArray.length-1) {if (fn) {fn () ؛ }} آخر {getScripts (++ i ، linkarray ، fn) ؛ }}} ؛ }} // JS لديه getScripts تحميل التبعية (0 ، ['http://caibaojian.com/demo/base.js' ، 'http://caibajian.com/demo/reset.js'] ، وظيفة ()لخص
هناك عدة طرق لتقليل تأثير أداء JavaScript:
وضع كل العلامات <script> في أسفل الصفحة ، أي قبل إغلاق العلامة ، يضمن هذا تقديم الصفحة قبل تنفيذ البرنامج النصي.
دمج البرامج النصية قدر الإمكان. عدد أقل من علامات <script> في الصفحة ، وكلما تم تحميلها بشكل أسرع وأسرع ما يستجيب. هذا صحيح لكل من البرامج النصية الخارجية والبرامج النصية المدمجة.
استخدم البرامج النصية JavaScript غير المحظورة للتنزيل:
استخدم السمة المؤجلة لعلامة <script> (متوفرة فقط لـ IE و Firefox 3.5 أو أعلى) ؛
استخدم عناصر <Script> التي تم إنشاؤها ديناميكيًا لتنزيل وتنفيذ التعليمات البرمجية ؛
استخدم كائنات XHR لتنزيل رمز JavaScript وحقنه في الصفحة.
يمكن للاستراتيجيات المذكورة أعلاه تحسين الأداء الفعلي لمواقع الويب والتطبيقات التي تتطلب الكثير من JavaScript.
ما ورد أعلاه هو المحتوى الكامل لملخص تحسين أداء JavaScript وتنفيذه. آمل أن يكون ذلك مفيدًا للجميع.