کاربران متوجه می‌شوند که سایت‌ها و برنامه‌ها به‌خوبی اجرا نمی‌شوند، بنابراین بهینه‌سازی عملکرد پردازشی بسیار مهم است!
کاربران وب امروزی انتظار دارند صفحه‌هایی که بازدید می‌کنند تعاملی و روان باشد، و این همان جایی است که باید به‌طور فزاینده‌ای زمان و تلاش خود را روی آن متمرکز کنید. صفحه‌ها نباید فقط سریع بار شوند، بلکه باید در سراسر چرخه حیاتشان به ورودی کاربر نیز سریع پاسخ دهند. درواقع، این جنبه از تجربه کاربری دقیقاً همان چیزی است که سنجه تعامل تا ترسیم بعدی (INP) اندازه‌گیری می‌کند. INP خوب یعنی صفحه به‌طور مداوم و قابل‌اطمینان به نیازهای کاربر پاسخ داده است.
درحالی‌که بخش عمده‌ای از آنچه باعث می‌شود صفحه سریع به‌نظر برسد به مقدار جاوا اسکریپتی که در پاسخ به تعاملات کاربر اجرا می‌کنید مربوط می‌شود، آنچه کاربران انتظار دارند تغییرات بصری در میانای کاربر است. تغییرات دیداری در میانای کاربر نتیجه چندین نوع کار است که اغلب به‌طور جمعی به آن پرداز گفته می‌شود و این کار باید در سریع‌ترین زمان ممکن انجام شود تا تجربه کاربری سریع و قابل‌اطمینان به‌نظر برسد.
برای نوشتن صفحه‌هایی که به‌سرعت به تعاملات کاربر پاسخ می‌دهند، باید بدانید مرورگر چگونه HTML، JavaScript، و CSS را مدیریت می‌کند و مطمئن شوید که کدی که می‌نویسید (و همچنین هر کد شخص ثالث دیگری که اضافه می‌کنید) تا حد امکان به‌طور کارآمد اجرا می‌شود.
نکته‌ای درباره نرخ بازآوری دستگاه
امروزه اکثر دستگاه‌ها صفحه‌نمایش خود را ۶۰ بار در ثانیه بازآوری می‌کنند. هر بازآوری برونداد دیداری‌ای را که می‌بینید تولید می‌کند و معمولاً به‌عنوان قاب شناخته می‌شود. در ویدیو زیر، مفهوم قاب‌ها نشان داده شده است:
درحالی‌که صفحه‌نمایش دستگاه همیشه با نرخ ثابتی بازآوری می‌شود، برنامه‌هایی که در دستگاه اجرا می‌شوند ممکن است لزوماً همیشه نتوانند فریم‌های کافی برای مطابقت با آن نرخ بازآوری تولید کنند. برای مثال، اگر پویانمایی یا گذاری درحال اجرا باشد، مرورگر باید با نرخ بازآوری دستگاه مطابقت داشته باشد تا برای هر بار بازآوری صفحه‌نمایش، یک فریم تولید کند.
با توجه به اینکه یک نمایشگر معمولی ۶۰ بار در ثانیه بازآوری می‌شود، یک محاسبه ریاضی سریع نشان می‌دهد که مرورگر ۱۶٫۶۶ میلی‌ثانیه برای تولید هر فریم فرصت دارد. اما در واقعیت، مرورگر برای هر فریم سربار خودش را دارد، بنابراین همه کارهای شما باید در عرض ۱۰ میلی‌ثانیه تکمیل شود. وقتی نتوانید این بودجه را برآورده کنید، نرخ فریم کاهش می‌یابد و محتوای صفحه روی صفحه می‌لرزد. به این پدیده اغلب jank می‌گویند.
بااین‌حال، اهداف شما براساس نوع کاری که می‌خواهید انجام دهید تغییر می‌کند. رسیدن به آستانه ۱۰ میلی‌ثانیه برای پویانمایی‌ها بسیار مهم است، جایی که اشیاء روی صفحه در مجموعه‌ای از فریم‌ها بین دو نقطه درون‌یابی می‌شوند. وقتی صحبت از تغییرات گسسته در میانای کاربر می‌شود—یعنی، رفتن از یک حالت به حالت دیگر بدون هیچ حرکتی در این بین—توصیه می‌شود که چنین تغییراتی را در بازه زمانی‌ای انجام دهید که برای کاربر آنی به‌نظر برسد. در مواردی مانند این، ۱۰۰ میلی‌ثانیه رقمی است که اغلب ذکر می‌شود، اما آستانه «خوب» سنجه INP ۲۰۰ میلی‌ثانیه یا کمتر است تا بتواند طیف وسیع‌تری از دستگاه‌ها با قابلیت‌های مختلف را پوشش دهد.
هدف شما هرچه باشد—چه تولید فریم‌های متعددی که پویانمایی‌ها برای جلوگیری از لرزش به آن نیاز دارند، یا صرفاً ایجاد یک تغییر بصری مجزا در میانای کاربر در سریع‌ترین زمان ممکن—درک نحوه عملکرد خط لوله پیکسل مرورگر برای کار شما ضروری است.
خط لوله پیکسل
پنج حوزه اصلی وجود دارد که باید درباره آن‌ها بدانید و در کارتان به‌عنوان توسعه‌دهنده وب به آن‌ها توجه داشته باشید. این پنج حوزه مواردی هستند که بیشترین کنترل را بر آن‌ها دارید و هرکدام نشان‌دهنده یک نقطه کلیدی در خط لوله پیکسل به صفحه هستند:
- جاوا اسکریپت: جاوا اسکریپت معمولاً برای مدیریت کارهایی استفاده می‌شود که منجر به تغییرات بصری در میانای کاربر می‌شود. برای مثال، این می‌تواند تابع
animatejQuery، مرتب‌سازی مجموعه داده، یا افزودن عناصر DOM به صفحه باشد. بااین‌حال، جاوا اسکریپت برای ایجاد تغییرات بصری کاملاً ضروری نیست: پویانمایی‌های CSS، انتقال‌های CSS، و Web Animations API قادر به پویانمایی محتوای صفحه هستند. - محاسبات سبک: این فرایند تعیین می‌کند که کدام قوانین CSS
براساس گزینشگرهای منطبق بر کدام عناصر HTML اعمال می‌شوند. برای مثال،
.headlineنمونه‌ای از گزینشگر CSS است که برای هر عنصر HTML با مقدار مشخصهclassکه حاوی کلاسheadlineاست اعمال می‌شود. از آنجا، وقتی قوانین مشخص شد، اعمال می‌شوند و سبک‌های نهایی برای هر عنصر محاسبه می‌شود. - چیدمان: وقتی مرورگر متوجه می‌شود کدام قوانین برای یک عنصر اعمال می‌شود، می‌تواند
محاسبه هندسه صفحه را شروع کند، مثلاً اینکه عناصر چقدر فضا
اشغال می‌کنند و در کجای صفحه ظاهر می‌شوند. مدل چیدمان وب به این معنی است
که یک عنصر می‌تواند بر عناصر دیگر تأثیر بگذارد. برای مثال، عرض عنصر
<body>معمولاً بر ابعاد عناصر فرزند آن در سراسر درخت تأثیر می‌گذارد، بنابراین این فرایند می‌تواند برای مرورگر بسیار پیچیده باشد. - رنگ‌آمیزی: رنگ‌آمیزی فرایند پر کردن پیکسل‌ها است. این فرایند شامل ترسیم نوشتار، رنگ‌ها، تصاویر، حاشیه‌ها، سایه‌ها، و اساساً هر جنبه بصری عناصر پس‌از محاسبه چیدمان آن‌ها در صفحه است. طراحی معمولاً روی سطوح مختلفی انجام می‌شود که اغلب به آن‌ها لایه می‌گویند.
- ترکیب: ازآنجایی‌که بخش‌های صفحه احتمالاً روی چندین لایه کشیده شده‌اند، باید به ترتیب صحیح روی صفحه اعمال شوند تا صفحه به‌صورت موردانتظار ارائه شود. این امر به‌ویژه برای عناصری که با عنصر دیگری هم‌پوشانی دارند مهم است، زیرا اشتباه می‌تواند منجر به ظاهر شدن نادرست یک عنصر روی عنصر دیگر شود.
هریک از این بخش‌های خط لوله پیکسل فرصتی برای ایجاد پرش در پویانمایی‌ها یا تأخیر در رنگ‌آمیزی فریم‌ها حتی برای تغییرات بصری مجزا در میانای کاربر است. بنابراین مهم است که دقیقاً بدانید کد شما کدام بخش‌های خط لوله را راه‌اندازی می‌کند و بررسی کنید که آیا می‌توانید تغییرات خود را فقط به بخش‌هایی از خط لوله پیکسل که برای رندر کردن آن‌ها ضروری است محدود کنید یا نه.
ممکن است اصطلاح «شطرنجی کردن» را در ارتباط با «رنگ‌آمیزی» شنیده باشید. دلیلش این است که نقاشی درواقع دو تکلیف است:
- درحال ایجاد فهرست فراخوانی‌های ترسیم.
- درحال پر کردن پیکسل‌ها.
به مورد دوم «شطرنجی‌سازی» می‌گویند، بنابراین هرگاه سوابق رنگ‌آمیزی را در DevTools دیدید، باید آن را شامل شطرنجی‌سازی بدانید. در برخی‌از معماری‌ها، ایجاد فهرست فراخوانی‌های ترسیم و شطرنجی‌سازی در رشته‌های مختلف انجام می‌شود، اما این موضوع تحت کنترل شما به‌عنوان توسعه‌دهنده نیست.
لزوماً همیشه همه بخش‌های کانال ارتباطی را در هر قاب لمس نخواهید کرد. درواقع، وقتی تغییر بصری ایجاد می‌کنید، چه با جاوا اسکریپت، CSS، یا Web Animations API، سه روش وجود دارد که خط لوله معمولاً برای یک فریم معین اجرا می‌شود.
۱. JS / CSS > Style > Layout > Paint > Composite
اگر ویژگی «چیدمان» را تغییر دهید، مثلاً ویژگی‌ای که هندسه عنصر را تغییر می‌دهد، مثل عرض، ارتفاع، یا موقعیت آن (مثل ویژگی‌های CSS left یا top)، مرورگر باید همه عناصر دیگر را بررسی کند و صفحه را «بازآرایی» کند. هر ناحیه تحت‌تأثیر قرارگرفته باید دوباره رنگ‌آمیزی شود و عناصر رنگ‌آمیزی‌شده نهایی باید دوباره باهم ترکیب شوند.
۲. JS / CSS > Style > Paint > Composite
اگر ویژگی «فقط رنگ» را برای عنصری در CSS تغییر داده‌اید (برای مثال،
ویژگی‌هایی مثل background-image، color، یا box-shadow)، مرحله چیدمان
برای اعمال به‌روزرسانی بصری در صفحه لازم نیست. با حذف مرحله چیدمان (درصورت امکان)، از کار چیدمان بالقوه پرهزینه که درغیراین‌صورت می‌توانست تأخیر قابل‌توجهی در تولید فریم بعدی ایجاد کند، جلوگیری می‌کنید.
۳. JS / CSS > Style > Composite
اگر ویژگی‌ای را تغییر دهید که نه به چیدمان نیاز داشته باشد و نه به رنگ‌آمیزی، مرورگر می‌تواند مستقیماً به مرحله ترکیب‌بندی برود. این ارزان‌ترین و مطلوب‌ترین مسیر ازطریق خط لوله پیکسل برای نقاط فشار بالا در چرخه حیات صفحه، مانند پویانمایی‌ها یا پیمایش است. واقعیت جالب: Chromium پیمایش صفحه را بهینه‌سازی می‌کند تا درصورت امکان، پیمایش فقط در رشته ترکیب‌کننده انجام شود. یعنی حتی اگر صفحه‌ای پاسخ ندهد، همچنان می‌توانید در صفحه پیمایش کنید و بخش‌هایی از آن را که قبلاً در صفحه ترسیم شده است ببینید.
عملکرد وب هنر اجتناب از کار است، درحالی‌که کارایی هر کار ضروری را تا حد امکان افزایش می‌دهد. در بسیاری از موارد، مسئله کار کردن با مرورگر است، نه علیه آن. باید درنظر داشت که کارهایی که قبلاً در خط لوله نشان داده شده‌اند ازنظر هزینه محاسباتی متفاوت هستند؛ برخی‌از تکالیف ذاتاً گران‌تر از بقیه هستند!
بیایید نگاهی به بخش‌های مختلف خط لوله بیندازیم. مشکلات رایج و نحوه تشخیص و رفع آن‌ها را بررسی خواهیم کرد.
بهینه‌سازی‌های پردازش مرورگر
عملکرد برای کاربران مهم است و برای ایجاد تجربه‌های کاربری خوب، توسعه‌دهندگان وب باید وب‌سایت‌هایی بسازند که به‌سرعت به تعاملات کاربر واکنش نشان دهند و به‌طور روان پرداز زدن شوند. پل لوئیس، کارشناس عملکرد، اینجا است تا به شما کمک کند لرزش را ازبین ببرید و برنامه‌های وبی بسازید که عملکرد ۶۰ فریم در ثانیه را حفظ کنند. با ابزارهایی که برای نمایه کردن برنامه‌ها و شناسایی دلایل عملکرد رندرینگ غیربهینه نیاز دارید، این دوره را ترک خواهید کرد. همچنین خط لوله پردازش مرورگر را کاوش خواهید کرد و الگوهایی را کشف خواهید کرد که ساخت وب‌سایت‌های سریع را آسان‌تر می‌کنند، وب‌سایت‌هایی که کاربران از استفاده از آن‌ها لذت خواهند برد.
این دوره رایگان ازطریق Udacity ارائه می‌شود و هرزمان بخواهید می‌توانید آن را بگذرانید.