تقنيات تحميل البرامج النصية غير المتزامنة

تعتمد العديد من تطبيقات الويب على تحميل نصوص برمجية متعددة وملفات CSS لتوفير وظائف محسنة. ومع ذلك، يمكن أن يؤدي التحميل المتزامن إلى إبطاء عرض الصفحة بشكل كبير. لمعالجة هذه المشكلة، توجد عدة طرق لتحميل هذه الموارد بشكل غير متزامن.

تحميل البرامج النصية باستخدام السمة غير المتزامنة

تتمثل إحدى الطرق في استخدام السمة غير المتزامنة في علامة البرنامج النصي:

تشير هذه السمة إلى المتصفح بأنه يمكن تنفيذ البرنامج النصي دون حظر تحميل الموارد الأخرى. ومع ذلك، من المهم ملاحظة أن البرامج النصية ذات التبعيات قد لا تزال تسبب مشكلات إذا تم تحميلها بشكل غير متزامن.

استخدام الوظائف المخصصة

في المثال المقدم، يتم استخدام وظيفة مخصصة تسمى importScripts () لتحميل عدة البرامج النصية وأوراق الأنماط بشكل غير متزامن. ومع ذلك، تفتقر التعليمات البرمجية إلى آلية رد اتصال لضمان تحميل جميع الموارد قبل أن تصبح الصفحة تفاعلية.

باستخدام طريقة $.getScript الخاصة بـ JQuery

توفر طريقة $.getScript() الخاصة بـ JQuery طريقة موجزة طريقة تحميل البرامج النصية بشكل غير متزامن:

$.getScript('js/jquery-ui-1.8.16.custom.min.js', successCallback);

تعالج هذه الطريقة تلقائيًا تنفيذ الأمر البرنامج النصي الذي تم تحميله ويوفر وظيفة رد اتصال اختيارية.

التحميل المستند إلى الوعد

بالنسبة للمتصفحات الحديثة، يعد Promise يمكن استخدام الكائن لإنشاء وظائف تحميل غير متزامنة تقبل معالجات رد الاتصال:

function loadScript(src) {
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}

تسمح هذه الوظيفة بالتعامل مع سيناريوهات التحميل الناجحة والفاشلة.

الاعتبارات

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