javascript type Defer Attribute(Chrome)



script type= text/javascript (3)

دائمًا ما كان Chrome بالنسبة لي مرجعًا لمعايير الويب ، وللأسف لم يكن defer مدعومًا و IE يدعمه منذ الإصدار 5.5. لماذا ا ؟

js.js 

document.getElementById ("hi").innerHTML = "Hi :)";

HTML 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <script defer="defer" src="js.js"></script>
        <title>Hi</title>
    </head>
    <body>
        <div id="hi"></div>
    </body>
</html>

ماذا يعني async ؟

بشكل افتراضي ، علامة <script src=...></script> شر! يجب أن يتوقف المستعرض عن تحليل HTML حتى يتم تنزيل البرنامج النصي وتنفيذه (بما أن البرنامج النصي قد يستدعي document.write(...) أو يحدد المتغيرات العامة التي تعتمد عليها البرامج النصية اللاحقة). وهذا يعني أن أي صور وأوراق أنماط موجودة بعد علامة البرنامج النصي لا تبدأ في التنزيل إلا بعد الانتهاء من تنزيل البرنامج النصي وتنفيذه. البرامج النصية الخارجية عادة ما تجعل تحميل الويب أبطأ بكثير ، وهذا هو السبب في أن نظام NoScript أصبح شائعًا جدًا.

قدمت شركة مايكروسوفت defer لحل المشكلة. إذا كنت تستخدم <script defer src=...></script> ، فإنك تعد بعدم استدعاء document.write(...) . سيبدأ تنزيل البرنامج النصي الخارجي الذي تم defer الفور ولكن لن يتم تنفيذه إلا بعد تقديم الصفحة. بعد تقديم الصفحة ، يتم تنفيذ جميع البرامج النصية المؤجلة بنفس الترتيب الذي تم إعلانها به. ليست كل المتصفحات تنفذ defer حتى الآن.

قدم HTML5 سمة async التي قد تنفذ في أي وقت - ربما قبل الانتهاء من تحليل الصفحات أو حتى قبل البرامج النصية الأخرى defer / async التي لا تزال قيد التنزيل. ولكن من الصعب استخدام برامج نصية متعددة غير async لأن أمر التنفيذ الخاص بهم غير مضمون. مثل defer ، لا تنفذ جميع المتصفحات async حتى الآن.

بعد تنفيذ جميع البرامج النصية DOMContentLoaded والبرامج غير async ، يتم DOMContentLoaded load الأحداث.

نبذة مختصرة عن async

  • 1997 إي إي 4 يقدم defer .
  • 1998 defer ، ولكن لسوء الحظ فإنه لا يقول بالضبط عند تنفيذ البرامج النصية defer (كل في النظام؟ قبل onload ؟). وبالتالي ، لا توجد متصفحات أخرى تنفذ defer لأن لا أحد يريد عكس هندسة IE أو كسر البرامج النصية التي قد تعتمد على خصوصيات IE. (انظر طلب ميزة Mozilla ، على سبيل المثال).
  • يصف مسودة HTML5 لعام 2006 في النهاية التفاصيل اللازمة لتنفيذ defer : يجب تنفيذ جميع البرامج النصية المؤجلة بالترتيب بعد تحليل بقية الصفحة ، وقبل onload . كما يقدم async لتحديد البرامج النصية التي يمكن تنفيذها متى تم تنزيلها دون الحاجة إلى الانتظار لبعضها البعض. لسوء الحظ ، يتناقض HTML5 مع IE عن طريق عدم السماح بالبرامج النصية defer المضمنة. هذا يكسر ثابتة أن يتم تنفيذ جميع البرامج النصية defer بالترتيب (إذا كان بعض البرامج النصية defer src وبعضها مضمنة مضمنة).
  • 2009 Gecko 1.9.1 (فايرفوكس 3.5) يدعم defer .
  • 2010-01 Gecko 1.9.2 (فايرفوكس 3.6) يدعم async .
  • يتم التحقق من التأخير والتزامن 2010-09 إلى Webkit . من المفترض أن تشاهده في Chrome و Safari قريبًا جدًا (إنه موجود بالفعل في قناة مطوري Chrome ولكنه صغير عربات التي تجرها الدواب).
  • نحن لا نزال ننتظر أن تقوم Opera بتنفيذ async وتنفيذ IE async .

إذن ما الذي يجب على مطور الويب استخدامه؟

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

  • إن أبسط طريقة لجعل الصفحة تقدم قبل تنفيذ البرامج النصية ، كما أشار آخرون ، هو وضع النصوص البرمجية في أسفل الصفحة. ولكن إذا كانت النصوص البرمجية ضرورية ، أو تحتوي صفحة الويب على الكثير من HTML ، فيجب عليك وضع النصوص الخاصة بك أعلى في الصفحة.
  • إذا كان البرنامج النصي الخاص بك قائمًا بذاته وكان العملاء يستخدمون IE أو الإصدارات الجديدة من Firefox ، فاستخدم <script async defer src=...></script> : يتيح هذا العرض الاستمرار بالتوازي مع تنزيل البرامج النصية لـ IE ومتصفحات HTML5 الجديدة ولكن تسبب متصفحات ما قبل HTML5 (بما في ذلك جميع إصدارات Opera) للحظر.
  • إذا كان أحد البرامج النصية الخارجية يعتمد على آخر ، فضع علامة على كلاهما (ولكن ليس async ) وسيتم تنفيذها بالترتيب الذي تم الإعلان عنه (باستثناء IE <= 9 في ظروف معينة يمكن تنفيذها خارج الترتيب ). مرة أخرى ، يتيح هذا العرض الاستمرار بالتوازي مع تنزيل البرامج النصية في IE و HTML5-Gecko / Webkit ، ولكن ستعاني المتصفحات القديمة والأوبرا. من defer استخدام defer حتى لو كانت النصوص في أسفل الصفحة بحيث يتم تنزيلها بالتوازي مع بعضها البعض.
  • لا تستخدم defer أبدًا للنصوص البرمجية المضمنة لأن مسودة HTML5 قد استبعدت ضمانًا لتنفيذ الأمر.
  • إذا كان جمهورك يضم العديد من مستخدمي Opera أو مستخدمي Firefox / Safari القديمين ، فسيقوم المقتطف التالي بتنفيذ النص البرمجي بعد تحليل المستند في معظم المتصفحات السابقة لـ HTML5 (IE ، Webkit ، والحاجة إلى اختبار Firefox القديم) ، بينما تبدأ أحدث متصفحات HTML5 المدركة يتم تنزيله على الفور ولكن لن يتم حظره لتنفيذ النص البرمجي بسبب سمة async . بمعنى آخر ، فإن معظم المتصفحات القديمة تعامله مثل نص برمجي في أسفل الصفحة ، وأحدث المستعرضات تتعرف على async . لكن مستخدمي أوبرا يحصلون على أسوأ ما في العالمين ، لأن أوبرا يبدأ التنفيذ على الفور ولا يفهم async . هذا هو النمط الذي أوصت به Google Analytics للقنفذ على العديد من صفحات الويب.

مقتطف: 

<script>
(function() {
  var script = document.createElement('script');
  script.src = '...';
  script.async = true;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(script, s);
})();
</script>
  • إذا كان هناك نص برمجي آخر يعتمد على البرنامج النصي الأول المطلوب تحميله ، فيمكنك استخدام نفس النمط الموضح أعلاه ، ولكن يمكنك الاستماع إلى حدث onload الخاص بعنصر البرنامج النصي الأول قبل تنفيذ البرنامج النصي الثاني. راجع مثال LABjs للتعرف على كيفية الانتظار حتى يتم تحميل نص برمجي آخر .
  • إذا كان لديك برامج نصية متعددة ذات تبعيات معقدة ، فاستخدم LAB.js أو YUI Loader لتحميلها بالتوازي وتنفيذها بترتيب صالح.
  • إذا كنت تستخدم مكتبة شائعة مثل jQuery ، ففكر في استخدام نسخة Google بدلاً من نسخة خاصة بك لزيادة احتمال قيام المتصفح بتخزينها مؤقتًا بالفعل.

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

إذا كان من الممكن تأجيل النصوص ، يمكن أيضًا نقلها إلى أسفل الصفحة (كما أشار إليها @ Christian في التعليقات)

سيكون هذا خيارًا أفضل من حيث الأداء ، حيث إنه لن يمنع بقية الصفحة من التحميل. يمكنك وضع البرامج النصية الخاصة بك قبل العلامة </body> .

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

يتم دعم defer فقط بواسطة مستكشف الإنترنت. لا تحتاج إلى الاعتماد عليه. هناك طرق أخرى للحصول على نفس التأثير ، مثل وضع البرامج النصية في نهاية الصفحة قبل علامة </body> ، كما أشار آخرون.

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

تحدث ميزة التأجيل في اتصال مع Internet Explorer ، نظرًا لأن هذا المتصفح هو الوحيد الذي يدعم سمة defer. لذلك ، إذا كنت تحتاج إلى نص سريع لتشغيله في IE فقط ، ولا تمانع في تحميل الصفحة بالكامل قبل أن تبدأ في التنفيذ ، فما عليك سوى إضافة defer = "تأجيل" في علامتك وسيتولى ذلك بسرعة مشكلة. يعد إصلاح مشكلة PNG شفافة في IE6 أحد الاستخدام العملي الممكن للتأجيل.

يجب استخدام سمة defer عند إخفاء برنامج نصي من متصفحات أخرى مع تعليق شرطي يستهدف برنامج نصي مخصص لـ IE-only - وإلا سيتم تشغيل البرنامج النصي بشكل طبيعي في المتصفحات الأخرى.)

المرجع: http://www.impressivewebs.com/10-javascript-quick-tips-and-best-practices/




type   script   meaning   javascript   google-chrome   attributes  

attributes