حالت نقاشی مداوم برای پروفایل رنگ اکنون در Chrome Canary در دسترس است. این مقاله نحوه شناسایی مشکل در زمان نقاشی صفحه را توضیح می دهد و چگونه می توانید از این ابزار جدید برای شناسایی گلوگاه ها در عملکرد نقاشی استفاده کنید.
بررسی زمان نقاشی در صفحه شما
بنابراین متوجه شدید که صفحه شما به آرامی حرکت نمی کند. به این ترتیب شما شروع به مقابله با مشکل خواهید کرد. برای مثال، از صفحه نمایشی Things We Left On The Moon اثر Dan Cederholm به عنوان مثال استفاده خواهیم کرد.
Web Inspector را باز می کنید، ضبط Timeline را شروع می کنید و صفحه خود را به بالا و پایین حرکت می دهید. سپس به خطوط زمانی عمودی نگاه می کنید، که به شما نشان می دهد در هر فریم چه اتفاقی افتاده است.
اگر می بینید که بیشتر زمان صرف نقاشی می شود (نوارهای سبز بزرگ بالای 60 فریم در ثانیه)، باید نگاه دقیق تری به چرایی این اتفاق بیندازید. برای بررسی رنگ های خود، از تنظیمات Show paint rectangles در Web Inspector (نماد چرخ دنده در گوشه سمت راست پایین Web Inspector) استفاده کنید. این به شما مناطقی را که کروم نقاشی می‌کند نشان می‌دهد.
دلایل مختلفی برای رنگ آمیزی مجدد قسمت های صفحه توسط کروم وجود دارد:
- گره‌های DOM در جاوا اسکریپت تغییر می‌کنند، که باعث می‌شود کروم طرح‌بندی صفحه را دوباره محاسبه کند.
- انیمیشن هایی در حال پخش هستند که در یک چرخه مبتنی بر فریم به روز می شوند.
- تعامل کاربر، مانند شناور کردن، باعث تغییر سبک در برخی عناصر می شود.
- هر عملیات دیگری که باعث تغییر طرح بندی صفحه شود.
به عنوان یک توسعه دهنده، باید از رنگ آمیزی مجدد در صفحه خود آگاه باشید. نگاه کردن به مستطیل های رنگی یک راه عالی برای انجام این کار است. در تصویر مثال بالا می توانید ببینید که کل صفحه در یک مستطیل رنگ بزرگ پوشانده شده است. این به این معنی است که در حین پیمایش، کل صفحه دوباره رنگ می شود که خوب نیست. در این مورد خاص این امر به دلیل سبک CSS background-attachment:fixed که باعث می‌شود تصویر پس‌زمینه صفحه در همان موقعیت باقی بماند در حالی که محتوای صفحه در بالای آن حرکت می‌کند.
اگر تشخیص دادید که رنگ‌ها منطقه بزرگی را پوشش می‌دهند و/یا زمان زیادی می‌برند، دو گزینه دارید:
- می توانید سعی کنید صفحه آرایی را تغییر دهید تا میزان نقاشی کاهش یابد. در صورت امکان Chrome صفحه قابل مشاهده را فقط یک بار رنگ می کند و قسمت هایی را اضافه می کند که با اسکرول کردن به پایین قابل مشاهده نیستند. با این حال، مواردی وجود دارد که کروم نیاز به رنگ آمیزی مجدد مناطق خاصی دارد. به عنوان مثال
position:fixed، که اغلب برای عناصر ناوبری که در همان موقعیت باقی می مانند استفاده می شود، می تواند باعث این رنگ آمیزی مجدد شود. - اگر می‌خواهید صفحه‌آرایی خود را حفظ کنید، می‌توانید هزینه نقاشی مناطقی که دوباره رنگ می‌شوند را کاهش دهید. هر سبک CSS هزینه نقاشی یکسانی ندارد، برخی تاثیر کمی دارند، برخی دیگر بسیار زیاد. تعیین هزینه های نقاشی سبک های خاص می تواند کار زیادی باشد. می‌توانید این کار را با تغییر سبک‌ها در پانل Elements و مشاهده تفاوت در ضبط Timeline انجام دهید، که به معنای جابه‌جایی بین پانل‌ها و انجام تعداد زیادی ضبط است. اینجاست که حالت نقاشی مداوم وارد عمل می شود.
حالت نقاشی مداوم
حالت نقاشی پیوسته ابزاری است که به شما کمک می کند تشخیص دهید کدام عناصر در صفحه گران هستند. این صفحه را در حالت همیشه در حال رنگ آمیزی قرار می دهد و نشان می دهد که چقدر کار نقاشی در حال انجام است. سپس، می‌توانید با تماشای شمارنده، عناصر و سبک‌ها را جهش دهید تا بفهمید چه چیزی کند است.
برپایی
برای استفاده از حالت نقاشی مداوم، باید از Chrome Canary استفاده کنید.
در سیستم‌های لینوکس (و برخی از Mac) باید مطمئن شوید که Chrome در حالت ترکیبی اجرا می‌شود. این را می توان با استفاده از ترکیب GPU در تمام صفحات تنظیم شده در about:flags به طور دائم فعال کرد.
چگونه برای شروع
حالت نقاشی مداوم را می‌توان از طریق کادر انتخاب فعال کرد ، رنگ‌آمیزی مجدد مداوم صفحه را در تنظیمات Web Inspector (نماد چرخ دنده در گوشه سمت راست پایین بازرس وب) فعال کنید.
نمایشگر کوچک در گوشه سمت راست بالا، زمان رنگ اندازه گیری شده را بر حسب میلی ثانیه به شما نشان می دهد. به طور خاص نشان می دهد:
- آخرین زمان رنگ اندازه گیری شده در سمت چپ.
- حداقل و حداکثر نمودار فعلی در سمت راست.
- یک نمودار میله ای که تاریخچه 80 فریم آخر را در پایین نمایش می دهد (خط در نمودار 16 میلی ثانیه را به عنوان نقطه مرجع نشان می دهد).
اندازه‌گیری‌های زمان رنگ بستگی به وضوح صفحه، اندازه پنجره و سخت‌افزاری دارد که Chrome روی آن اجرا می‌شود. توجه داشته باشید که این موارد احتمالاً برای کاربران شما متفاوت است.
جریان کار
به این صورت است که می توانید از حالت نقاشی پیوسته برای ردیابی عناصر و سبک هایی که هزینه نقاشی زیادی را اضافه می کنند استفاده کنید:
- تنظیمات Web Inspector را باز کنید و فعال کردن رنگ‌آمیزی مجدد صفحه را علامت بزنید.
- به پنل Elements بروید و درخت DOM را با کلیدهای جهت دار یا با انتخاب عناصر روی صفحه طی کنید.
- از میانبر صفحه کلید H ، کمکی که به تازگی معرفی شده است، برای تغییر حالت دید در یک عنصر استفاده کنید.
- به نمودار زمان رنگ آمیزی نگاه کنید و سعی کنید عنصری را پیدا کنید که زمان زیادی برای نقاشی اضافه می کند.
- سبک‌های CSS آن عنصر را مرور کنید، هنگام نگاه کردن به نمودار، آنها را روشن و خاموش کنید تا سبکی را که باعث کاهش سرعت می‌شود، بیابید.
- این سبک را تغییر دهید و ضبط دیگری در تایم لاین انجام دهید تا بررسی کنید که آیا این باعث عملکرد بهتر صفحه شما شده است یا خیر.
انیمیشن زیر تغییر سبک ها و تاثیر آن بر زمان رنگ آمیزی را نشان می دهد:
این مثال نشان می دهد که چگونه خاموش کردن یکی از سبک های CSS box-shadow یا border-radius ، زمان نقاشی را تا حد زیادی کاهش می دهد. استفاده از هر دو box-shadow و border-radius بر روی یک عنصر منجر به عملیات نقاشی بسیار گران می شود، زیرا کروم نمی تواند برای این کار بهینه سازی کند. بنابراین، اگر عنصری دارید که رنگ آمیزی زیادی می گیرد، مانند مثال، باید از این ترکیب اجتناب کنید.
یادداشت
حالت نقاشی مداوم کل صفحه قابل مشاهده را دوباره رنگ می کند. معمولاً هنگام مرور یک صفحه وب اینطور نیست. اسکرول معمولا فقط قسمت هایی را رنگ می کند که قبلاً قابل مشاهده نبوده اند. و برای تغییرات دیگر در صفحه، فقط کوچکترین منطقه ممکن دوباره رنگ می شود. بنابراین با یک ضبط دیگر در تایم لاین بررسی کنید که آیا بهبود سبک شما واقعاً بر زمان رنگ‌آمیزی صفحه شما تأثیر داشته است.
هنگام استفاده از continuous painting mode ممکن است متوجه شوید که به عنوان مثال سبک های CSS border-radius و box-shadow زمان زیادی را برای نقاشی اضافه می کنند. استفاده از این ویژگی ها به طور کلی ناامید نیست، آنها عالی هستند و ما خوشحالیم که بالاخره اینجا هستند. اما مهم این است که بدانید چه زمانی و کجا از آنها استفاده کنید. از استفاده از آنها در مناطقی که رنگ آمیزی زیاد دارند خودداری کنید و به طور کلی از استفاده بیش از حد از آنها خودداری کنید.
نسخه نمایشی زنده
برای نمایش دمویی که در آن پل آیریش از نقاشی مداوم برای شناسایی یک عملیات رنگ منحصر به فرد گران قیمت استفاده می کند، در زیر کلیک کنید.