HTML وCSS / أنظمة عرض قابلة للصيانة / الدرس 15
كلفة العرض والاستقرار البصري
قس التحميل والعرض بمهمة ممثلة ثم حسن الكلفة الغالبة مع حفظ المحتوى والسلوك الميسرين.
في هذه الصفحة
أهداف الدرس
- تحديد المرحلة والمقياس
- سطح حركة مقصود
- قياس التغيير مع حفظ المهمة
تحديد المرحلة والمقياس
تشمل الصفحة الجلب والتحليل وبناء العرض والتخطيط والرسم والتركيب، لكن يحسن المتصفح المراحل فلا تنفذ كلها لكل تغيير. ميز تأخر التحميل والاستجابة والحركة والسلاسة والذاكرة. لا تعكس صورة محلية سريعة هاتفا محدودا وشبكة بطيئة. سجل مهمة وبيئة وقس بالأدوات بدلا من افتراض أن كل محدد أو حجم CSS هو العنق.
تقليل العمل وحجز المساحة
قد تهم الصور والسلاسل الحاجبة وكبر DOM والأبعاد غير المستقرة أكثر من تحسين صغير. احجز النسب ولا تدخل محتوى مفاجئا فوق القارئ. قدم اللازم من الأنماط لكن لا تحذف بديلا أو حالة ميسرة لأن عينة تغطية لم تستخدمها. تغير الخطوط القياسات فتحتاج بدائل واختبار بطء وفشل. يفيد التحميل الكسول للمؤجل وقد يضر موردا ظاهرا مهما؛ طابق التحسين بدوره.
سطح حركة مقصود
يستخدم المثال transform لحركة تحويم اختيارية ويحترم تقليل الحركة. غالبا يسهل تركيب التحويل والعتامة مقارنة بتغيير الأبعاد، لكنهما لا يضمنان طبقة مستقلة أو حركة مجانية. تكلف الطبقات الكبيرة ذاكرة ورسم. أبق التفاعل صالحا دون حركة ولا تحرك هدفا يصعب تنشيطه. يضيف المثال إزاحة زخرفية صغيرة ويحفظ التركيز والوجهة مستقلين.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reduced motion</title>
<style>
.card { display: inline-block; padding: 1rem; border: 1px solid; transition: transform 150ms ease; } .card:hover { transform: translateY(-2px); } .card:focus-visible { outline: 3px solid #174e9a; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }
</style>
</head>
<body>
<main><h1>Optional motion</h1><a class="card" href="#notes">Read performance notes</a><section id="notes"><h2>Notes</h2><p>Motion is decorative.</p></section></main>
</body>
</html>
A link with optional motion and independent focus styling.الحركة اختيارية وتلغى مع التفضيل ولا يعتمد عليها التركيز أو التنقل. النتيجة المتوقعة: رابط بحركة اختيارية وتركيز مستقل.
الاحتواء بحد صريح
قد يحد الاحتواء أثر التغييرات، لكن قيمه تغير التحجيم والتموضع فلا تصلح تصفيرا عاما. يوضح المثال احتواء الرسم داخل معاينة زخرفية محدودة يقبل فيها القص، لا قوائم أو محتوى ضروريا. قد تفيد content-visibility وأحجامها البديلة مناطق مؤجلة كبيرة، لكنها تحتاج اختبار التنقل والبحث والتركيز والحجم المحجوز. اعتمد الاحتواء المتقدم بفائدة مقيسة وعقد واضح.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paint boundary</title>
<style>
.preview { contain: paint; inline-size: 10rem; block-size: 5rem; border: 1px solid; } .preview span { display: block; inline-size: 14rem; block-size: 3rem; background: #174e9a; transform: rotate(10deg); }
</style>
</head>
<body>
<main><h1>Bounded preview</h1><div class="preview" aria-hidden="true"><span></span></div><p>The decorative preview may clip its contents.</p></main>
</body>
</html>
The blue decorative shape is clipped to the preview boundary.يبقى تجاوز الزخرفة ضمن الحد وتشرح الفقرة التجربة دون قص عنصر تفاعلي. النتيجة المتوقعة: يقص الشكل الزخرفي الأزرق ضمن حد المعاينة.
قياس التغيير مع حفظ المهمة
سجل الأساس وغير عاملا مبررا وأعد المحتوى والعرض والقيود والتفاعل. افحص المهام الطويلة وتكرار التخطيط والرسم ثم تحقق من تحسن المقياس. لا تضف will-change في كل مكان؛ قد تزيد الموارد وتحتاج نطاقا مبررا. اختبر تقليل الحركة والمفاتيح والبطء بعد التغيير. إخفاء الخطأ أو المحتوى لتسريع المسار يغير المنتج ولا يحسن المهمة نفسها.
الأخطاء الشائعة وإصلاحها
يحذف تحسين حالة خطأ
- لماذا يحدث؟
- اعتُبرت عينة تغطية دليلا على عدم الاستخدام.
- كيف تصلحه؟
- احفظ الحالات واختبرها.
- كيف تتجنب تكراره؟
- استخدم تغطية السلوك لا النجاح وحده.
تنمو الذاكرة بعد will-change عامة
- لماذا يحدث؟
- شجعت موارد غير لازمة.
- كيف تصلحه؟
- أزل التلميحات وقس الاستخدام المحدد.
- كيف تتجنب تكراره؟
- اشترط دليلا للتلميحات الدائمة.
تقص قائمة بعد الاحتواء
- لماذا يحدث؟
- غير الحد سلوك الرسم.
- كيف تصلحه؟
- انقل التجاوز الضروري أو راجع الاحتواء.
- كيف تتجنب تكراره؟
- اختبر العناصر والتراكبات.
اختبر فهمك
1. تتحرك الصفحة عند تحميل صورة لافتة. اقترح إصلاحا مقيسا.
اعرض الحل المشروح
حدد الأبعاد الصحيحة أو النسبة وأعد اختبار التحميل البطيء وقارن الحركة. تحقق من توافق المساحة مع المورد وحفظ التجاوب والقص والبديل.
2. لماذا لا تثبت حركة transform سرعة الواجهة؟
اعرض الحل المشروح
قد تكلف الرسوم والتأثيرات والسكربت وفك الصور والتحميل وقتا، وتستهلك الطبقات ذاكرة. قس المهمة والمقياس واحتفظ بالتغيير إذا حسنها دون كسر الإتاحة أو السلوك.
أهم ما تعلمته
- قس المرحلة ومقياس المستخدم الفعليين.
- للاحتواء والتلميحات كلفة سلوكية.
- يجب أن يحفظ الأداء المهمة الأصلية.