كما JavaScript في كتل عرض HTML ، أليس كذلك مع CSS أيضا؟
https://stackoverflow.com/questions/4026183
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
نظرًا لأن JavaScript في كتل HTML ، فمن الجيد الحفاظ على JavaScript في الأسفل ، قبل إغلاق علامة الجسم مباشرة ، أليس كذلك مع CSS أيضًا؟
أعلم أننا لا نستطيع الحفاظ على CSS الخارجية في الخارج.
المحلول
لا يحظر CSS بنفس الطريقة التي تقوم بها JavaScript
يقتبس مدونة شبكة مطور Yahoo
مع أوراق الأنماط ، يتم حظر التقديم التدريجي حتى يتم تنزيل جميع أوراق الأنماط. لهذا السبب من الأفضل نقل أوراق الأنماط إلى رأس المستند ، بحيث يتم تنزيلها أولاً ولم يتم حظر التقديم. مع البرامج النصية ، يتم حظر التقديم التدريجي لجميع المحتوى أقل النص. إن نقل البرامج النصية منخفضة في الصفحة قدر الإمكان يعني أن هناك المزيد من المحتوى فوق البرنامج النصي الذي يتم تقديمه عاجلاً.
بالإضافة إلى ذلك ، عند إضافة CSS إلى الرأس ، يتم تحليله أولاً ، ويؤدي إلى تصميم HTML حتى يتم تنزيله. هذا يتجنب وميض المحتوى غير المتواصل الذي يحدث إذا قمت بوضع علامات النمط في أسفل صفحة كبيرة من HTML.
نصائح أخرى
لا يقتصر الأمر على عدم منع CSS الطريقة التي يفعل <head>, ، مثل تجاهله ، أو تطبيقه بشكل غير مكتمل. HTML5 يحظر في الواقع <style> من الظهور في الخارج <head> (باستثناء ميزة "SCOPED" ، والتي لا ينفذها Afaik حتى الآن).
يتم تحميل أوراق الأنماط CSS باستخدام <link> العنصر ، هذا العنصر صالح فقط عندما يكون في رأس المستند. أما بالنسبة لحظر CSS HTML ، فليس هذا هو الحال لأن CSS يتم تطبيقه بمجرد تحميل المتصفح تمامًا مثل الآخر <link> عناصر. JS Colls HTML لأن المتصفح يفترض أن JS يريد السيطرة والقيام بشيء ما قبل تحميل DOM بالكامل ، يتم تنفيذ JS بشكل أساسي ثم تركه بمفرده.
فكر في الأمر ، إذا تم تحميل CSS نفس JS ، فلن يتم تصميم أي عنصر لأنه سيشير إلى العناصر التي لم يتم تحميلها بعد ، وبالتالي يتم تطبيقها بعد ذلك ولا تمنع التحميل.
لا ، يتم تطبيق CSS على عنصر DOM مباشرة بعد قراءة المتصفح CSS.
في حالة JavaScript ، يمكنك الاحتفاظ بالبرنامج النصي عند القراءة ، حيث تقوم بتشغيله بعد جميع أحمال HTML ، مثل:
window.onload = function (){
//here we start
}
JS
نظرًا لأن JS يمكنه تغيير صفحة الويب الخاصة بك (تعديل متصفحات DOM) ، تنتظر تنزيل جميع JS الخارجي (بانهار) ، وتفسير وتنفيذ قبل المتابعة مع بقية HTML التي تأتي بعد ذلك <script src="..." >لذلك من الممارسات الجيدة وضع كل JS الخارجي في أسفل <body>. وبهذه الطريقة ، يتم تحليل HTML الخاص بك وتقديمه ويشعر المستخدم بأن هناك شيئًا ما يحدث ...
CSS
من ناحية أخرى ، لا يمكن لـ CSS تغيير DOM ، ولا يمكن إجراء أي تغييرات "ثقيلة" على الصفحة ، ولهذا السبب لا يحظر المستعرض التنزيل ، وتحليل بقية HTML ، وتقديم التدريجي كما هو الحال مع JS. يبدو أنه يمنع العرض ، لكن لا يزال من الأفضل وضعه في الأعلى وتجنب الطول فوك . لا يحظر التنزيل ، رغم ذلك
الآن ، يبدو أنه مع ظهور الأجهزة المحمولة تضع CSS الخاص بك على HEAD و JS في الأسفل لا يكفي ... سترغب في وضع ATF (فوق الطية) المضمّن وتبقى بقية CSS الضخمة الخاصة بك مع JS الخاص بك - في أسفل / مؤجل ومتزامن
تفقد هذا: http://addyosmani.com/blog/deting-critical-above-the-fold-css-with-paul-kinlan-video/
لماذا ستكون ممارسة جيدة للحفاظ على جافا سكريبت في الأسفل؟
أود أن أقول أنه من الأفضل وضع CSS وكذلك JavaScript في ملفات منفصلة وإدراجها في مستند HTML الخاص بك باستخدام <head> الجزء.
