يلاحظ المستخدمون إذا كانت المواقع الإلكترونية والتطبيقات لا تعمل بشكل جيد، لذا من المهم تحسين أداء العرض.
يتوقّع مستخدمو الويب اليوم أن تكون الصفحات التي يزورونها تفاعلية و سلسة، وهذا هو المكان الذي عليك فيه تركيز وقتك وجهدك بشكل متزايد. يجب ألا يتم تحميل الصفحات بسرعة فحسب، بل يجب أن تستجيب أيضًا بسرعة للبيانات التي يُدخلها المستخدم طوال دورة حياتها بالكامل. في الواقع، يقيس مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) هذا الجانب من تجربة المستخدم تحديدًا. يشير الأداء الجيد لقياس INP إلى أنّ الصفحة كانت تستجيب بشكلٍ منتظم وموثوق لاحتياجات العميل.
على الرغم من أنّ أحد العناصر الرئيسية التي تجعل الصفحة سريعة الاستجابة يرتبط بكمية JavaScript التي تنفّذها استجابةً لتفاعلات المستخدمين، فإنّ ما يتوقعه المستخدمون هو التغييرات المرئية على واجهة المستخدم. إنّ التغييرات المرئية في واجهة المستخدِم هي نتيجة لعدة أنواع من الأعمال، وغالبًا ما يُشار إليها بشكلٍ جماعي باسم العرض، ويجب أن يتمّ هذا العمل في أسرع وقت ممكن لكي تبدو تجربة المستخدِم سريعة وموثوقة.
لكتابة صفحات تستجيب بسرعة لتفاعلات المستخدمين، عليك فهم كيفية تعامل المتصفّح مع HTML وJavaScript وCSS، والتأكّد من أنّ الرمز البرمجي الذي تكتبه، بالإضافة إلى أي رمز برمجي تابع لجهة خارجية تُدرِجه، يعملان بأكبر فعالية ممكنة.
ملاحظة حول معدّلات تحديث الشاشة على الأجهزة
تعمل معظم الأجهزة حاليًا على إعادة تحميل شاشاتها 60 مرة في الثانية. تؤدي كل عملية إعادة تحميل إلى إنتاج المحتوى المرئي الذي تراه، ويُعرف هذا المحتوى عادةً باسم الإطار. في الفيديو التالي، يتم توضيح مفهوم اللقطات:
على الرغم من أنّ شاشة الجهاز يتم إعادة تحميلها دائمًا بمعدّل ثابت، قد لا تتمكّن التطبيقات التي يتم تشغيلها على الجهاز دائمًا من إنتاج لقطات كافية لمطابقة معدّل إعادة التحميل هذا. على سبيل المثال، إذا كان هناك رسوم متحركة أو انتقال جارٍ، يجب أن يتطابق المتصفّح مع معدّل تحديث الشاشة على الجهاز لعرض ملف واحد في كل مرة تتم فيها إعادة تحميل الشاشة.
بما أنّ الشاشة العادية يتم تجديدها 60 مرة في الثانية، فإنّ بعض العمليات الحسابية السريعة ستكشف أنّ المتصفّح لديه 16.66 ملي ثانية لعرض كل لقطة. في الواقع، يستهلك المتصفّح وقتًا إضافيًا لكل لقطة، لذا يجب إكمال كل عملك في غضون 10 مللي ثانية. وفي حال عدم استيفاء هذه الميزانية، ينخفض معدّل عرض اللقطات، ويظهر محتوى الصفحة بشكل متقطّع على الشاشة. ويُطلق على هذه الظاهرة غالبًا اسم البطء.
ومع ذلك، تتغيّر استهدافاتك استنادًا إلى نوع العمل الذي تحاول تنفيذه. إنّ استيفاء الحدّ الأدنى البالغ 10 مللي ثانية أمر مهمّ للرسوم المتحرّكة، حيث يتمّ تجميع العناصر على الشاشة في سلسلة من اللقطات بين نقطتَي. في ما يتعلّق بالتغييرات المنفصلة في واجهة المستخدم، أي عند الانتقال من حالة إلى أخرى بدون أي حركة بينهما، ننصح بإجراء هذه التغييرات في إطار زمني يبدو فوريًا للمستخدِم. في مثل هذه الحالات، يُشار غالبًا إلى 100 ملي ثانية، ولكن الحدّ الأدنى لقيمة مقياس INP "الجيد" هو 200 ملي ثانية أو أقل من أجل استيعاب مجموعة أكبر من الأجهزة ذات الإمكانات المختلفة.
بغض النظر عن أهدافك، سواء كانت إنتاج اللقطات العديدة التي تتطلّبها الصور المتحركة لتجنُّب الارتباك، أو مجرد إنتاج تغيير مرئي منفصل في واجهة المستخدم في أسرع وقت ممكن، من الضروري فهم طريقة عمل مسار معالجة بكسل المتصفّح.
مسار معالجة الصور
هناك خمسة مجالات رئيسية يجب أن تعرفها وتأخذها في الاعتبار في عملك كمطوّر ويب. هذه الجوانب الخمسة هي التي يمكنك التحكّم فيها بشكلٍ كبير، ويمثّل كلّ منها نقطة رئيسية في مسار نقل البيانات من وحدات البكسل إلى الشاشة:
- JavaScript: تُستخدَم JavaScript عادةً لمعالجة المهام التي ستؤدي إلى
إجراء تغييرات مرئية على واجهة المستخدم. على سبيل المثال، يمكن أن تكون هذه الدالة
animateفي jQuery أو ترتيب مجموعة بيانات أو إضافة عناصر DOM إلى الصفحة. ومع ذلك، لا يُعدّ JavaScript ضروريًا تمامًا لبدء التغييرات المرئية، إذ يمكن أن تؤدي مؤثرات CSS وعمليات النقل في CSS وWeb Animations API إلى منح محتوى الصفحة مؤثرات متحركة. - عمليات حساب الأنماط: هي عملية معرفة قواعد CSS التي
تنطبق على عناصر HTML استنادًا إلى أدوات الاختيار المطابقة. على سبيل المثال،
.headlineهو مثال على أداة اختيار لغة CSS تنطبق على أي عنصر HTML بقيمة سمةclassتحتوي على فئةheadline. بعد ذلك، يتم تطبيق القواعد، واحتساب الأنماط النهائية لكل عنصر. - التنسيق: بعد أن يعرف المتصفّح القواعد التي تنطبق على عنصر معيّن، يمكنه
البدء في احتساب شكل الصفحة، مثل المساحة التي تشغلها العناصر
وموضع ظهورها على الشاشة. يعني نموذج تنسيق الويب
أنّ العنصر الواحد يمكن أن يؤثر في العناصر الأخرى. على سبيل المثال، يؤثر عرض عنصر
<body>عادةً في أبعاد عناصره الفرعية من أعلى إلى أسفل الشجرة، لذا يمكن أن تكون العملية معقّدة جدًا للمتصفّح. - الطلاء: الطلاء هو عملية ملء البكسل. ويشمل ذلك رسم النصوص والألوان والصور والحدود والتظليل وكل جانب مرئي للعناصر بعد احتساب تخطيطها على الصفحة. يتم عادةً الرسم على مساحات عرض متعددة، غالبًا ما تُعرف باسم الطبقات.
- مركب: بما أنّه من المحتمل أنّه تم رسم أجزاء من الصفحة على طبقات متعدّدة، يجب تطبيقها على الشاشة بالترتيب الصحيح كي تتمكّن من عرض الصفحة على النحو المتوقّع. ويُعدّ ذلك مهمًا بشكل خاص للعناصر التي تتراكب مع بعضها، لأنّ أي خطأ قد يؤدي إلى ظهور عنصر فوق عنصر آخر بشكل غير صحيح.
يمثّل كلّ جزء من أجزاء مسار نقل بيانات البكسل فرصةً لإدخال تقطُّع في الرسوم المتحركة أو تأخير رسم اللقطات حتى في حال حدوث تغييرات مرئية منفصلة على واجهة المستخدم. لذلك، من المهم معرفة أجزاء مسار الإحالة الناجحة بالضبط التي يشغّلها الرمز البرمجي، والتحقّق ممّا إذا كان بإمكانك حصر التغييرات على أجزاء مسار الإحالة الناجحة للصور فقط التي تكون ضرورية لعرضها.
ربما تكون قد سمعت بمصطلح "تحويل إلى شبكة بكسل" مع "الطلاء". ويعود سبب ذلك إلى أنّ الطلاء يتضمن مَهمتَين:
- إنشاء قائمة بطلبات الرسم
- يتم ملء وحدات البكسل.
ويُطلق على هذه العملية اسم "التحويل إلى شبكة بكسل"، لذا عندما تظهر لك سجلّات الطلاء في DevTools، يجب أن تأخذ في الاعتبار أنّها تتضمّن التحويل إلى شبكة بكسل. في بعض التصاميم، يتم إنشاء قائمة طلبات الرسم والتحويل إلى شبكة بكسل على خيوط معالجة مختلفة، ولكن لا يمكنك التحكّم في ذلك بصفتك مطوّرًا.
ولن تحتاج دائمًا إلى تعديل كل جزء من عملية المعالجة في كل إطار. في الواقع، هناك ثلاث طرق يتم من خلالها تنفيذ مسار المعالجة بشكلٍ طبيعي لإطار معيّن عند إجراء تغيير مرئي، إما باستخدام JavaScript أو CSS أو Web Animations API.
1. JS / CSS > Style > Layout > Paint > Composite
إذا غيّرت سمة "التنسيق"، مثل سمة تغيّر هندسة
العنصر مثل العرض أو الارتفاع أو موضعه (مثل سمات CSS
left أو top)، يجب أن يتحقّق المتصفّح من جميع العناصر الأخرى و"إعادة تدفق"
الصفحة. يجب إعادة طلاء أي مناطق متأثرة، ويجب إعادة دمج العناصر المطلية
النهائية معًا.
2. JS / CSS > Style > Paint > Composite
إذا غيّرت خاصية "الرسم فقط" لعنصر في CSS، مثلاً،
السمات مثل background-image أو color أو box-shadow، لن تكون خطوة التنسيق
ضرورية لتطبيق تعديل مرئي على الصفحة. من خلال حذف خطوة التنسيق
، يمكنك تجنُّب العمل المكلف الذي قد يؤدي إلى التنسيق، والذي قد يؤدي بدوره إلى تأخُّر كبير في إنتاج اللقطة التالية.
3- JS / CSS > Style > Composite
إذا غيّرت سمة لا تتطلّب تخطيطًا أو رسمًا، يمكن للمتصفّح الانتقال مباشرةً إلى خطوة الدمج. هذا هو المسار الأقل تكلفة والأكثر مرغوبًا من خلال مسار نقل بيانات وحدة البكسل لنقاط الضغط العالية في رحلة الصفحة، مثل الصور المتحركة أو الانتقال للأعلى أو للأسفل. معلومة ممتعة: يعمل Chromium على تحسين عملية التمرير في الصفحة بحيث تتم فقط في سلسلة المكوّن المرئي كلما أمكن ذلك، ما يعني أنّه حتى إذا كانت الصفحة لا تستجيب، سيظل بإمكانك التمرير فيها والاطّلاع على أجزاء منها تم رسمها سابقًا على الشاشة.
يُعدّ أداء الويب فنّ تجنُّب العمل، مع زيادة كفاءة أي عمل ضروري قدر الإمكان. في كثير من الحالات، يكون الأمر متعلقًا بالعمل مع المتصفح وليس ضده. تجدر الإشارة إلى أنّ العمل الذي تم عرضه سابقًا في "قائمة المعالجة" يختلف من حيث التكلفة الحسابية، فبعض المهام تتطلب تكلفة أعلى من غيرها.
لنلقِ نظرة على الأجزاء المختلفة من مسار الإحالة الناجحة. سنلقي نظرة على المشاكل الشائعة، بالإضافة إلى كيفية تشخيصها وحلّها.
تحسينات عرض المتصفّح
يُعدّ الأداء مهمًا للمستخدمين، ولإنشاء تجارب مستخدمين جيدة، يحتاج مطوّرو الويب إلى إنشاء مواقع إلكترونية تستجيب بسرعة للتفاعلات مع المستخدمين وتعرض المحتوى بشكلٍ سلس. سيساعدك خبير الأداء بول لويس في التخلص من الارتباك و إنشاء تطبيقات ويب تحافظ على أداء 60 لقطة في الثانية. ستخرج من هذه الدورة التدريبية مزوّدًا بالأدوات التي تحتاجها لإنشاء ملفّات تعريف للتطبيقات وتحديد أسباب أداء التقديم غير المُرضِي. ستستكشف أيضًا مسار معالجة العروض المرئيّة في المتصفّح وتكشف عن الأنماط التي تسهّل إنشاء مواقع إلكترونية سريعة يجد المستخدمون متعة في استخدامها.
هذه دورة تدريبية مجانية تقدّمها منصة Udacity، ويمكنك التسجيل فيها في أي وقت.