javascript - type - Defer Attribute(Chrome)
script type= text/javascript (2)
دائمًا ما كان 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>
https://code.i-harness.com
ماذا يعني 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
وتنفيذ IEasync
.
إذن ما الذي يجب على مطور الويب استخدامه؟
لا توجد قاعدة واحدة يجب اتباعها في هذا الوقت. يجب عليك اختيار الحل الذي يوازن بين البساطة ووقت استجابة الصفحة ووقت تنفيذ البرنامج النصي لمجموعة المتصفحات التي تصل إلى موقع الويب الخاص بك.
- إن أبسط طريقة لجعل الصفحة تقدم قبل تنفيذ البرامج النصية ، كما أشار آخرون ، هو وضع النصوص البرمجية في أسفل الصفحة. ولكن إذا كانت النصوص البرمجية ضرورية ، أو تحتوي صفحة الويب على الكثير من 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>
.
هذه السمة غير مدعومة بشكل جيد من قبل المتصفحات الرئيسية ، وهذا بحد ذاته يجب أن يكون تلميحًا للتوقف عن استخدامه.