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