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