يلاحظ المستخدمون ما إذا كانت المواقع الإلكترونية والتطبيقات لا تعمل بشكل جيد، لذا من المهم تحسين أداء العرض.
يتوقّع مستخدمو الويب اليوم أن تكون الصفحات التي يزورونها تفاعلية وسلسة، وهذا هو الجانب الذي تحتاج إلى تركيز وقتك وجهدك عليه بشكل متزايد. لا يكفي أن يتم تحميل الصفحات بسرعة، بل يجب أيضًا أن تستجيب بسرعة لإدخالات المستخدمين طوال مراحل نشاطها. في الواقع، هذا الجانب من تجربة المستخدم هو بالضبط ما يقيسه مقياس مدى استجابة الصفحة لتفاعلات المستخدم (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>عادةً في أبعاد العناصر الفرعية في جميع أنحاء الشجرة، لذا يمكن أن تكون العملية معقّدة بالنسبة إلى المتصفّح. - الرسم: الرسم هو عملية ملء وحدات البكسل. وتتضمن هذه العملية رسم النصوص والألوان والصور والحدود والظلال، وكل جانب مرئي من العناصر بعد احتساب تخطيطها على الصفحة. يتم الرسم عادةً على أسطح متعددة، غالبًا ما تُسمى طبقات.
- التركيب: بما أنّ أجزاء الصفحة قد تم رسمها على طبقات متعددة، يجب تطبيقها على الشاشة بالترتيب الصحيح لكي يتم عرض الصفحة على النحو المتوقع. هذا مهم بشكل خاص للعناصر التي تتداخل مع بعضها البعض، لأن الخطأ قد يؤدي إلى ظهور عنصر فوق الآخر بشكل غير صحيح.
يمثّل كل جزء من أجزاء مسار المعالجة هذا فرصة لإدخال تأخير في الصور المتحركة أو تأخير رسم الإطارات حتى في التغييرات المرئية المنفصلة في واجهة المستخدم. لذلك، من المهم فهم أجزاء المسار التي يشغّلها الرمز البرمجي بالضبط، والتحقّق مما إذا كان بإمكانك حصر التغييرات على أجزاء مسار البكسل اللازمة لعرضها فقط.
ربما سمعت مصطلح "تنقيط" يُستخدم مع "الرسم". هذا لأنّ الطلاء يتألف في الواقع من مهمتَين:
- جارٍ إنشاء قائمة بطلبات الرسم.
- جارٍ ملء وحدات البكسل.
يُطلق على الأخير اسم "التنقيط"، لذا كلما رأيت سجلات الرسم في أدوات مطوري البرامج، يجب أن تفكر في أنها تتضمن التنقيط. في بعض البُنى، يتم إنشاء قائمة طلبات الرسم والتنقيط في سلاسل محادثات مختلفة، ولكن هذا ليس تحت سيطرتك كمطوّر.
لن تحتاج بالضرورة إلى استخدام كل جزء من المسار في كل إطار. في الواقع، هناك ثلاث طرق يتم من خلالها تنفيذ المسار عادةً لإطار معيّن عند إجراء تغيير مرئي، إما باستخدام JavaScript أو CSS أو Web Animations API.
1. JS / CSS > النمط > التنسيق > الرسم > التركيب
إذا غيّرت سمة "التصميم"، مثل سمة تغيّر الشكل الهندسي لعنصر ما، مثل العرض أو الارتفاع أو الموضع (مثل سمات CSS left أو top)، يحتاج المتصفّح إلى التحقّق من جميع العناصر الأخرى و"إعادة تدفق" الصفحة. يجب إعادة طلاء أي مناطق متأثرة، ودمج العناصر النهائية المطلية معًا مرة أخرى.
2. JS / CSS > النمط > الرسم > التركيب
إذا غيّرت سمة "الرسم فقط" لعنصر في CSS، مثل
السمات background-image أو color أو box-shadow، لن تكون خطوة التنسيق
ضرورية لتطبيق تعديل مرئي على الصفحة. من خلال حذف خطوة التنسيق، حيثما أمكن، يمكنك تجنُّب أعمال التنسيق التي قد تكون مكلفة والتي قد تساهم في حدوث وقت استجابة كبير في إنتاج الإطار التالي.
3- JS / CSS > النمط > المركّب
إذا غيّرت سمة لا تتطلّب أيًا من التنسيق أو الرسم، يمكن للمتصفّح الانتقال مباشرةً إلى خطوة التركيب. هذا هو المسار الأرخص والأكثر رغبة من خلال مسار البكسل لنقاط الضغط العالي في دورة حياة الصفحة، مثل الرسوم المتحركة أو التمرير. معلومة طريفة: يحسّن Chromium عملية الانتقال في الصفحة بحيث تتم فقط في سلسلة عمليات المُركِّب حيثما أمكن، ما يعني أنه حتى إذا كانت الصفحة لا تستجيب، سيظل بإمكانك الانتقال في الصفحة والاطّلاع على أجزاء منها تم عرضها سابقًا على الشاشة.
أداء الويب هو فن تجنُّب العمل، مع زيادة كفاءة أي عمل ضروري قدر الإمكان. في كثير من الحالات، يتعلق الأمر بالعمل مع المتصفح، وليس ضده. تجدر الإشارة إلى أنّ العمل المعروض سابقًا في المسار يختلف من حيث التكلفة الحسابية، فبعض المهام تكون بطبيعتها أكثر تكلفة من غيرها.
لنتعرّف على الأجزاء المختلفة من المسار. سنلقي نظرة على المشاكل الشائعة، وكيفية تشخيصها وحلّها.
تحسينات عرض المتصفّح
الأداء مهم للمستخدمين، ولإنشاء تجارب مستخدم جيدة، يحتاج مطوِّرو تطبيقات ويب إلى إنشاء مواقع إلكترونية تتفاعل بسرعة مع تفاعلات المستخدمين ويتم عرضها بسلاسة. خبير الأداء بول لويس هنا لمساعدتك في تدمير jank و إنشاء تطبيقات ويب تحافظ على أداء 60 إطارًا في الثانية. ستتعرّف في هذه الدورة على الأدوات اللازمة لتحليل أداء التطبيقات وتحديد أسباب الأداء غير المثالي في عرض المحتوى. ستتعرّف أيضًا على مسار عرض المتصفّح وتكتشف الأنماط التي تسهّل إنشاء مواقع إلكترونية سريعة يجدها المستخدمون ممتعة في الاستخدام.
هذه دورة تدريبية مجانية مقدَّمة من خلال Udacity، ويمكنك الانضمام إليها في أي وقت.