ما هي طريقة تنظيم CSS الأسرع؟

Question

إذا كان لدي HTML التالي:

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<p id="p4">Paragraph 4</p>

كيف يمكنني تنظيم CSS لتحقيق أسرع وقت تحميل الصفحة؟

يمكنني تنظيمه بواسطة عنصر HTML ، مثل هذا:

#p1 { font-size:12px; color:red; }
#p2 { font-size:12px; color:blue; }
#p3 { font-size:11px; color:red; }
#p4 { font-size=11px; color:blue; }

أو بأسلوب CSS ، مثل هذا:

#p1, #p2 { font-size: 12px; }
#p3, #p4 { font-size: 11px; }
#p1, #p3 { color:red; }
#p2, #p4 { color:blue; }

أيهما ، إذا تم قراءته ومعالجته بشكل أسرع؟

تعديل: كان يجب أن أذكر ، أنا أعمل مع Greasemonkey الآن ، مما يعني شيئين محتملين:

1) لا يمكنني تحرير أي HTML ، فقط CSS

2) تتم قراءة جميع CSS بعد أن تنتهي الصفحة بشكل طبيعي.

Answer 1

حسنًا ، سيكون الثاني بالتأكيد اقرأ أسرع لأنه أصغر.

بقدر ما يذهب "المعالجة" ، من خلال أي متصفح؟ ما لم تتعامل ورقة الأنماط المعنية مع عشرات الآلاف من المعرفات ، أشك في أنك سترى أي فرق كبير بين الاثنين.

Answer 2

لا أرى كيف ستكون معالجة CSS عنق الزجاجة في وقت تحميل الصفحة. إذا كنت تريد تحميل الصفحة بشكل أسرع ، فقلل حجم HTML/CSS والصق CSS في أ style علامة في head علامة HTML. سيتجنب هذا طلب الحصول على المزيد ، والذي أعتقد أنه المصدر الفعلي لوقت التحميل البطيء.

Answer 3

لما لا:

.red {color: red}
.blue {color: blue}
.small {font-size: 11}
.big {font-size: 12}

وثم:

<p id="p1" class="big red">Paragraph 1</p>
<p id="p2" class="big blue">Paragraph 2</p>
<p id="p3" class="small red">Paragraph 3</p>
<p id="p4" class="small blue">Paragraph 4</p>

Answer 4

من المحتمل أن تكون ملف تعريف هذا في متصفحات مختلفة حيث من المحتمل أن تعطيك نتائج مختلفة.