اجرای رندر

کاربران متوجه می شوند که سایت ها و برنامه ها به خوبی اجرا نمی شوند، بنابراین بهینه سازی عملکرد رندر بسیار مهم است!

Paul Lewis

کاربران وب امروزی انتظار دارند که صفحاتی که بازدید می کنند تعاملی و روان باشد، و اینجاست که باید به طور فزاینده ای زمان و تلاش خود را متمرکز کنید. صفحات نه تنها باید به سرعت بارگیری شوند، بلکه باید به سرعت به ورودی کاربر در کل چرخه عمر خود پاسخ دهند. در واقع، این جنبه از تجربه کاربر دقیقاً همان چیزی است که متریک Interaction to Next Paint (INP) اندازه گیری می کند. یک INP خوب به این معنی است که یک صفحه به طور مداوم و قابل اعتماد به نیازهای کاربر پاسخ می دهد.

در حالی که یکی از مؤلفه‌های اصلی چیزی که باعث می‌شود صفحه‌ای جذاب به نظر برسد، شامل مقدار جاوا اسکریپتی است که در پاسخ به تعاملات کاربر اجرا می‌کنید، آنچه کاربران پیش‌بینی می‌کنند تغییرات بصری در رابط کاربری است. تغییرات بصری در یک رابط کاربری نتیجه چندین نوع کار است که اغلب به طور جمعی به عنوان رندر نامیده می شود، و این کار باید در سریع ترین زمان ممکن اتفاق بیفتد تا تجربه کاربر سریع و قابل اعتماد باشد.

برای نوشتن صفحاتی که به سرعت به تعاملات کاربر پاسخ می دهند، باید بدانید که چگونه HTML، جاوا اسکریپت و CSS توسط مرورگر مدیریت می شود و مطمئن شوید که کدی که می نویسید - و همچنین هر کد شخص ثالث دیگری که اضافه می کنید - به همان اندازه کارآمد اجرا می شود. تا جایی که ممکن است.

یادداشتی در مورد نرخ به‌روزرسانی دستگاه

نرخ تازه سازی یک نمایشگر در هنگام ساخت وب سایت هایی که به ورودی های کاربر پاسخگو هستند، توجه مهمی است.

امروزه اکثر دستگاه ها صفحه نمایش خود را 60 بار در ثانیه تازه می کنند. هر تازه سازی خروجی بصری را تولید می کند که می بینید و معمولاً به عنوان فریم شناخته می شود. در ویدئوی زیر مفهوم قاب نشان داده شده است:

قاب هایی که در پنل عملکرد Chrome DevTools نشان داده شده است. همانطور که مکان نما بر روی نوار فیلم نزدیک به بالا حرکت می کند، نمایش بزرگ شده ای از هر فریم در یک راهنمای ابزار نشان داده می شود، زیرا منوی پیمایش تلفن همراه به حالت "باز" ​​خود متحرک می شود.

در حالی که صفحه‌نمایش دستگاه همیشه با سرعت ثابتی تازه‌سازی می‌شود، برنامه‌هایی که روی یک دستگاه اجرا می‌شوند لزوماً نمی‌توانند فریم‌های کافی برای مطابقت با نرخ تازه‌سازی تولید کنند. برای مثال، اگر انیمیشن یا انتقالی در حال اجرا باشد، مرورگر باید با نرخ رفرش دستگاه مطابقت داشته باشد تا برای هر بار بازخوانی صفحه، یک فریم تولید کند.

با توجه به اینکه یک صفحه نمایش معمولی 60 بار در ثانیه تازه می شود، برخی ریاضیات سریع نشان می دهد که مرورگر 16.66 میلی ثانیه برای تولید هر فریم زمان دارد. با این حال، در واقعیت، مرورگر سربار مخصوص به خود را برای هر فریم دارد، بنابراین تمام کار شما باید در 10 میلی ثانیه تکمیل شود. وقتی نمی‌توانید این بودجه را برآورده کنید، نرخ فریم کاهش می‌یابد و محتوای صفحه روی صفحه تکان می‌خورد. این پدیده اغلب jank نامیده می شود.

با این حال، اهداف شما بر اساس نوع کاری که می خواهید انجام دهید تغییر می کند. رسیدن به آستانه 10 میلی ثانیه برای انیمیشن ها بسیار مهم است، جایی که اشیاء روی صفحه در یک سری فریم بین دو نقطه درون یابی می شوند. هنگامی که صحبت از تغییرات گسسته در رابط کاربری می شود - یعنی حرکت از یک حالت به حالت دیگر بدون هیچ حرکتی - توصیه می شود که چنین تغییراتی را در یک بازه زمانی به دست آورید که کاربر فوراً احساس کند . در مواردی مانند این، 100 میلی ثانیه رقمی است که اغلب ذکر می شود، اما آستانه "خوب" متریک INP 200 میلی ثانیه یا کمتر است تا بتواند مجموعه وسیع تری از دستگاه ها با قابلیت های متفاوت را در خود جای دهد.

اهداف شما هر چه که هستند - چه تولید فریم های زیادی که انیمیشن ها برای جلوگیری از انحراف نیاز دارند، یا صرفاً ایجاد یک تغییر بصری مجزا در رابط کاربری در سریع ترین زمان ممکن - درک نحوه عملکرد خط لوله پیکسلی مرورگر برای کار شما ضروری است.

خط لوله پیکسل

پنج حوزه اصلی وجود دارد که باید در کار خود به عنوان یک توسعه دهنده وب در مورد آنها بدانید و به آنها توجه داشته باشید. این پنج ناحیه آنهایی هستند که شما بیشترین کنترل را روی آنها دارید و هر کدام نشان دهنده یک نقطه کلیدی در خط لوله پیکسل به صفحه است:

خط لوله کامل پیکسل، نشان داده شده است.

• جاوا اسکریپت: جاوا اسکریپت معمولاً برای رسیدگی به کارهایی که منجر به تغییرات بصری در رابط کاربری می شود استفاده می شود. به عنوان مثال، این می تواند تابع animate جی کوئری، مرتب کردن یک مجموعه داده یا افزودن عناصر DOM به صفحه باشد. با این حال، جاوا اسکریپت برای ایجاد تغییرات بصری کاملاً ضروری نیست: انیمیشن‌های CSS ، انتقال‌های CSS و Web Animations API می‌توانند محتویات صفحه را متحرک کنند.
• محاسبات سبک: این فرآیندی است که مشخص می کند کدام قوانین CSS بر اساس انتخابگرهای منطبق بر کدام عناصر HTML اعمال می شود. برای مثال، .headline نمونه‌ای از انتخابگر CSS است که برای هر عنصر HTML با مقدار ویژگی class که شامل یک کلاس از headline است، اعمال می‌شود. از آنجا، زمانی که قوانین شناخته شدند، اعمال می شوند و سبک های نهایی برای هر عنصر محاسبه می شود.
• چیدمان: هنگامی که مرورگر بداند کدام قوانین برای یک عنصر اعمال می شود، می تواند شروع به محاسبه هندسه صفحه کند، مانند اینکه عناصر چقدر فضای اشغال می کنند و کجا روی صفحه ظاهر می شوند. مدل طرح‌بندی وب به این معنی است که یک عنصر می‌تواند بر عناصر دیگر تأثیر بگذارد. به عنوان مثال، عرض عنصر <body> معمولاً بر ابعاد عناصر فرزند خود تا انتهای درخت تأثیر می گذارد، بنابراین این فرآیند می تواند برای مرورگر کاملاً درگیر باشد.
• رنگ: نقاشی فرآیند پر کردن پیکسل ها است. این شامل کشیدن متن، رنگ‌ها، تصاویر، حاشیه‌ها، سایه‌ها و اساساً هر جنبه بصری عناصر پس از محاسبه چیدمان آنها در صفحه است. طراحی معمولاً روی سطوح متعددی انجام می‌شود که اغلب لایه‌ها نامیده می‌شوند.
• ترکیب: از آنجایی که بخش‌های صفحه به طور بالقوه روی چندین لایه کشیده شده‌اند، باید به ترتیب صحیح روی صفحه اعمال شوند تا صفحه مطابق انتظار ارائه شود. این امر به ویژه برای عناصری که روی دیگری همپوشانی دارند بسیار مهم است، زیرا یک اشتباه می‌تواند منجر به ظاهر شدن نادرست یک عنصر در بالای عنصر دیگر شود.

هر یک از این بخش‌های خط لوله پیکسل، فرصتی برای معرفی jank در انیمیشن‌ها یا به تاخیر انداختن نقاشی فریم‌ها حتی برای تغییرات بصری گسسته در رابط کاربری است. بنابراین مهم است که بدانید کد شما دقیقاً کدام بخش از خط لوله را راه‌اندازی می‌کند و بررسی کنید که آیا می‌توانید تغییرات خود را فقط به بخش‌هایی از خط لوله پیکسل محدود کنید که برای ارائه آنها ضروری است یا خیر.

ممکن است اصطلاح "rasterize" را در ارتباط با "رنگ" شنیده باشید. این به این دلیل است که نقاشی در واقع دو کار است:

1. ایجاد لیستی از تماس های قرعه کشی
2. پر کردن پیکسل ها

دومی "rasterization" نامیده می شود، بنابراین هر زمان که رکوردهای رنگ را در DevTools می بینید، باید آن را به عنوان شطرنجی سازی در نظر بگیرید. در برخی معماری‌ها، ایجاد فهرست فراخوان‌های ترسیمی و شطرنجی‌سازی روی رشته‌های مختلف انجام می‌شود، اما این تحت کنترل شما به عنوان یک توسعه‌دهنده نیست.

شما همیشه لزوماً هر قسمت از خط لوله را در هر قاب لمس نمی کنید. در واقع، سه راه وجود دارد که خط لوله معمولاً برای یک فریم مشخص زمانی که یک تغییر بصری ایجاد می‌کنید، با جاوا اسکریپت، CSS یا Web Animations API وجود دارد.

1. JS / CSS > Style > Layout > Paint > Composite

اگر یک ویژگی "layout" را تغییر دهید، مانند یکی که هندسه عنصر مانند عرض، ارتفاع، یا موقعیت آن را تغییر می‌دهد (مانند ویژگی‌های CSS left یا top )، مرورگر باید همه عناصر دیگر را بررسی کرده و صفحه را دوباره جریان دهد. . هر ناحیه آسیب دیده باید دوباره رنگ آمیزی شود و عناصر رنگ شده نهایی باید دوباره با هم ترکیب شوند.

2. JS / CSS > Style > Paint > Composite

اگر یک ویژگی "فقط رنگ" را برای یک عنصر در CSS تغییر دادید - به عنوان مثال، ویژگی‌هایی مانند background-image ، color ، یا box-shadow - مرحله طرح‌بندی برای انجام به‌روزرسانی بصری صفحه ضروری نیست. با حذف مرحله چیدمان - در صورت امکان - از کارهای بالقوه پرهزینه چیدمان جلوگیری می کنید که در غیر این صورت می توانست به تأخیر قابل توجهی در تولید فریم بعدی کمک کند.

3. JS / CSS > Style > Composite

اگر خاصیتی را تغییر دهید که به طرح یا رنگ نیاز ندارد ، مرورگر می‌تواند مستقیماً به مرحله ترکیب بپرد. این ارزان‌ترین و مطلوب‌ترین مسیر از طریق خط لوله پیکسل برای نقاط فشار بالا در چرخه عمر صفحه است، مانند انیمیشن‌ها یا پیمایش. واقعیت جالب: Chromium اسکرول صفحه را بهینه می‌کند تا جایی که ممکن است فقط در رشته ترکیب‌کننده رخ دهد، به این معنی که حتی اگر صفحه‌ای پاسخ نمی‌دهد، همچنان می‌توانید صفحه را اسکرول کنید و قسمت‌هایی از آن را ببینید که قبلاً به آن کشیده شده‌اند. صفحه نمایش

توجه: اگر می‌خواهید آهنگ سریع برای انیمیشن‌های با کارایی بالا داشته باشید، Stick to Compositor-Only خواص و مدیریت تعداد لایه‌ها را بخوانید.

اجرای وب هنر اجتناب از کار است و در عین حال کارایی هر کار ضروری را تا حد امکان افزایش می دهد. در بسیاری از موارد، کار با مرورگر است، نه در برابر آن. شایان ذکر است که کارهایی که قبلاً در خط لوله نشان داده شده بود از نظر هزینه محاسباتی متفاوت است. بعضی از کارها ذاتاً گرانتر از بقیه هستند!

بیایید به قسمت های مختلف خط لوله شیرجه بزنیم. ما نگاهی به مشکلات رایج و همچنین نحوه تشخیص و رفع آنها خواهیم داشت.

بهینه سازی های رندر مرورگر

عملکرد برای کاربران مهم است و برای ایجاد تجربه های کاربری خوب، توسعه دهندگان وب باید وب سایت هایی بسازند که به تعاملات کاربر به سرعت واکنش نشان دهند و به آرامی رندر شوند. کارشناس عملکرد پل لوئیس اینجاست تا به شما کمک کند jank را از بین ببرید و برنامه های وب ایجاد کنید که عملکرد 60 فریم در ثانیه را حفظ کنند. شما این دوره را با ابزارهایی که برای نمایه کردن اپلیکیشن ها نیاز دارید ترک می کنید و دلایل عملکرد رندر نامناسب را شناسایی می کنید. همچنین خط لوله رندر مرورگر را کاوش خواهید کرد و الگوهایی را کشف خواهید کرد که ساخت وب سایت های سریع را آسان تر می کند که استفاده از آنها برای کاربران لذت بخش است.

این یک دوره رایگان است که از طریق Udacity ارائه می شود و می توانید هر زمان که بخواهید در آن شرکت کنید .