it-swarm.asia

هل "وضع جافا سكريبت في القاع" يهزم غرض المستند.

أعلم أنه يوصى بوضع جافا سكريبت في أسفل الصفحة ، لكن إذا كنت تستخدم jQuery ، ألا يؤدي هذا إلى هزيمة الغرض من تشغيله أثناء تحميل DOM؟

إذا كان لدي قائمة منسدلة ، على سبيل المثال ، فلن تظهر القوائم المنسدلة حتى يتم تحميل بقية الصفحة. أحاول أيضًا التطوير مع مراعاة التحسين التدريجي ، لذلك قد يكون لدي عناصر مخفية باستخدام jQuery بدلاً من CSS (حتى يتمكن المستخدمون من غير JS من رؤيتهم).

هل هناك وسيلة سعيدة ، ربما؟

26
DisgruntledGoat

ينتظر Document.ready تحميل DOM قبل تشغيل أي JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

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

لا يزال JS يعمل عند تحميل كل شيء ، سواء كان في البداية أو النهاية.

30
Callan

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

هذا لا يؤثر على المستند. جاهز ، حيث يتم استدعاء ذلك عند انتهاء المتصفح من إعداد DOM لصفحة. وفي كلتا الحالتين ، كل شيء لا يزال يحتاج إلى تحميل أولاً.

6
Macha

لا يوجد استخدام فعلي للبرنامج النصي حتى يتم الانتهاء من تحميل HTML - لا يمكن للبرنامج النصي تغيير DOM حتى يتم تحميل HTML. document.ready ينتظر تحميل DOM. لذلك ، ليس هناك فائدة من تعليق أشياء مهمة مثل أوراق الأنماط.

ضع البرامج النصية في أسفل الصفحة (قبل علامة </body>) لترتيب توصيل HTML و CSS للمستخدم بأسرع ما يمكن. سيكون المستعرض قادراً على جعل الصفحة أسرع كثيرًا ومن ثم يمكن تحميل البرامج النصية ، بدلاً من ترك صفحة فارغة ليحدق المستخدم بها أثناء انتظار تنزيل البرامج النصية.

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

عيوب وضع البرامج النصية في أسفل الصفحة هي أنه نظرًا لأن الصفحة ستعرض قبل أن تبدأ النصوص البرمجية ، فلن تتمكن بشكل خاص النقرات السريعة من التفاعل مع موقعك قبل تجهيز Javascript.

ملاحظة: العكس هو الصحيح بالنسبة إلى أوراق الأنماط - أوراق الأنماط بالقرب من أسفل التقديم التدريجي لحظر الصفحة حتى يتم تنزيل جميع أوراق الأنماط ونقلها إلى المستند HEAD يحل المشكلة.


هناك خدعة نظيفة لتحميل javascript دون جعل المستخدم ينتظر ، يمكنك إنشاء عنصر <script/> باستخدام أسلوب DOM createElement() وإضافته إلى الصفحة قبل علامة الإغلاق </body> مباشرة:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

لا يبدأ المستعرض في تنزيل البرنامج النصي js حتى تتم إضافة عنصر <script/> الجديد فعليًا إلى الصفحة. بمجرد اكتمال التنزيل ، يفسر المتصفح رمز Javascript الموجود في.

3
Tom

نعم. إذا وضعت البرامج النصية في الأسفل ، فلن تكون هناك حاجة doc.ready (DOMContentLoaded الحدث) بعد الآن - سيتم تنفيذ البرنامج النصي الخاص بك بعد تحميل DOM السابق على أي حال.

نظرًا لأن البرامج النصية في النهاية تعمل على تحسين الأداء (لا يتم حظر تحليل HTML وتحميل CSS والصور بواسطة البرامج النصية) أوصي بوضع البرامج النصية في الأسفل بدلاً من استخدام doc.ready.

1
Kornel