به فرآیند پر شدن پیکسلها که نهایتاً پس از ترکیب، روی صفحهی نمایش کاربر دیده میشوند Paint یا ترسیم گفته میشود.
- همیشه هر کدام از ویژگیهای CSS که تغییر کنند ترسیم انجام میشود، به استثنای دو ویژگی transform و opacity.
- ترسیم پرهزینهترین مرحله در pixel pipeline است و باید تا حد امکان از اتّفاق افتادن آن جلوگیری کنید.
- از طریق ارتقاء لایهها و تنظیم و هماهنگی انیمیشنها نواحی ترسیم را کاهش دهید.
- از قابلیّت paint profiler در DevTools مرورگر کروم استفاده کنید تا پیچیدگی و هزینهی ترسیمهایی که اتّفاق میافتد را ارزیابی کنید، و تا جایی که میتوانید آنها را کاهش دهید.
اتّفاق افتادن مرحلهی صفحهآرایی و ترسیم
هر وقت مرحلهی صفحهآرایی اتّفاق بیفتد حتماً پشت سر آن مرحلهی ترسیم هم اتّفاق میافتد. زیرا تغییر ویژگیهای هندسی یک عنصر، مستلزم تغییر پیکسلهای آن نیز هست.

البته تغییر ویژگیهایی که روی صفحهآرایی تأثیری ندارند هم باعث انجام مرحلهی ترسیم میشود، ویژگیهایی مثل رنگ متن، رنگ پسزمینه، سایه و…. در این حالت نیازی به اجرای مرحلهی صفحهآرایی نیست و pixel pipeline به این صورت در میآید:

از DevTools کروم برای تشخیص سریع تنگناهای ترسیم استفاده کنید.
برای تشخیص مناطقی که همین الآن در حال ترسیم هستند میتوانید از DevTools کروم استفاده کنید. ابتدا DevTools را باز کنید (با فشردن کلید F12)، سپس کلید میانبر Ctrl + Shift + P را فشار دهید و کلمهی paint را تایپ کنید و از لیست باز شده روی Show paint flashing rectangles کلیک کنید.
حالا هر موقع قسمتی از صفحه ترسیم شود، کروم آن قسمت را با سریعاً با رنگی سبز مشخّص میکند. اگر دیدید کلّ صفحه یا ناحیههایی از صفحه که فکرش را نمیکردید نیازی به ترسیم داشتهباشند سبزرنگ شدند، در آن موقع باید بررسی کنید و جلوی این کار را بگیرید.

روش دوم برای فعّالسازی این قابلیّت این است که بعد از باز کردن DevTools کلید Esc را فشار دهید، و سپس به سربرگ rendering رفته و گزینهی paint flashing را تیک بزنید:

در قسمت Performance نیز قابلیّتی وجود دارد که هنگام ضبط، اطّلاعات بیشتری در مورد ترسیم میدهد. برای فعّالسازی آن ابتدا روی آیکون چرخدنده در قسمت بالا و سمت راست کلیک کنید و بعد گزینهی Enable advanced paint instrumentation را تیک بزنید، و بعد ضبط را شروع کنید:

این گزینه را فقط زمانی تیک بزنید که میخواهید مشکلات مربوط به ترسیم را زیر نظر بگیرید، زیرا فعّالبودن آن دارای سربار پردازشی است و صفحه را کند میکند. این قابلیّت برای مواقعی که میخواهید خیلی بهتر و دقیقتر بفهمید چه چیزهایی دارد ترسیم میشود بسیار مناسب است.
حالا میتوانید ضبط را شروع کنید، و حالا ترسیمها با جزئیات خیلی بیشتری ضبط خواهند شد. بعد از تمام شدن ضبط، روی یک قطعهی مربوط به ترسیم کلیک کنید و روی سربرگ paint profiler کلیک کنید تا جزئیّات مربوط به آن را مشاهده کنید.
در اینجا میتوانید آن چیزی که ترسیم شده و ناحیهی ترسیم را ببینید، و مدّت زمانی که طول کشیده، و تک تک paint callهایی که لازم بوده را متوجّه شوید.
عناصری را که حرکت میکنند یا شفافیتشان تغییر میکند ارتقا دهید.
همیشه این طور نیست که مرورگر در مرحلهی ترسیم فقط یک تصویر رسم کند. بلکه معمولاً چند تصویر رسم میشود و بعداً در صورت لزوم در مرحلهی Composite این تصاویر با هم ترکیب میشوند.

مزیّت این روش در آن است که عنصرهایی که معمولاً دوباره ترسیم میشوند یا از طریق transform در صفحه حرکت میکنند، میتوانند بدون اینکه روی بقیّهی عنصرها تأثیری بگذارند رسم شوند. در خیلی از نرم افزارهای گرافیکی مثل Photoshop، GIMP یا Sketch نیز دقیقاً چنین قابلیّتی وجود دارد، که لایههای مستقلّی میسازید و تصویر نهایی شما از ترکیب همهی آن لایهها روی یکدیگر به وجود میآید.
بهترین روشِ ایجاد لایهی جدید استفاده از ویژگی will-change
در css است. مرورگرهای Chrome، Opera و Firefox از این ویژگی پشتیبانی میکنند. حالا اگر مقدار transform
را به این ویژگی بدهیم لایهای جدید به وجود خواهد آمد.
.moving-element {
will-change: transform;
}
برای مرورگرهایی که از ویژگی will-change
پشتیبانی نمیکنند ولی قابلیّت لایهبندی را دارا هستند، مثل مرورگر Safari و همچنین Safari Mobile، باید یک transform
سهبعدی الکی بنویسید تا عنصر مجبور شود در لایهی مجزّای جدیدی قرار بگیرد.
.moving-element {
transform: translateZ(0);
}
حواستان باشد تعداد لایههایی که میسازید بیش از اندازه زیاد نشود زیرا هر لایه، هم باید مدیریت شود و هم نیاز به حافظهی اضافی دارد. جزئیات بیشتر در این باره را در «بهینهسازی مرحلهی Composite» مطالعه کنید.
هر وقت عنصری را ارتقا دادید تا در لایهای جدید قرار بگیرد از طریق DevTools بررسی کنید و مطمئن شوید این کار شما در بهینهتر شدن و عملکرد برنامه تأثیرگذار بوده است. عنصرها را بدون این بررسی ارتقا ندهید.
نواحی ترسیم را کاهش دهید
گاهی اوقات با اینکه عنصرها را ارتقا دادهایم لازم است ترسیم انجام شود. چالش بزرگی در این زمینه وجود دارد و آن این است که مرورگرها دو ناحیهی مجزّایی را که نیاز به ترسیم دارد به هم میچسبانند و آنها را تجمیع میکند و به صورت یکجا رسم میکنند، که در نتیجهی آن گاهی اوقات ممکن است کلّ صفحه دوباره ترسیم شود. مثلاً اگر در بالای صفحه، یک سربرگ فیکس داشته باشید و یک چیزی هم در پایین صفحه نیاز به ترسیم داشته باشد کلّ صفحه دوباره ترسیم میشود.
نکته: در صفحهنمایشهای دارای کیفیت بالا (High DPI) عنصرهایی که position
آنها fixed
است به صورت خودکار در لایهای جدا قرار میگیرند. ولی این کار در صفحهنمایشهای با کیفیت پایین انجام نمیشود، و باید به صورت دستی ارتقا را انجام دهید (به دلیل اینکه در این صورت لازم است حالت رندر متن از subpixel به grayscale تغییر کند).
با تنظیم و هماهنگسازی انیمیشنها و ترنزیشنها به گونهای که با یکدیگر همپوشانی زیادی نداشته باشند، یا با پیدا کردن راهی که بتوان از انیمیشنی بودن قسمتهایی خاص از صفحه جلوگیری کرد، میتوان نواحی ترسیم را کاهش داد.
پیچیدگی ترسیم را کم کنید

در بحث ترسیم بعضی از ویژگیهای css پرهزینهتر از بعضیهای دیگر هستند. برای مثال ترسیمِ هر چیزی که در آن تارشدن داشته باشد (مثل سایه) بیشتر از چیزی مثل یک مستطیل قرمز طول میکشد. با این حال با نگاه کردن به خود کدهای css شاید نتوان خیلی راحت متوجّه شد که background: red;
و box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5);
تفاوت خیلی زیادی از نظر عملکرد داشته باشند، ولی دارند.
ابزار paint profiler که در بالا توضیح دادهایم کمکتان میکند تا تشخیص دهید اگر لازم بود به فکر راههای دیگری برای انجام کار مورد نظر خود باشید. در این صورت از خودتان بپرسید آیا امکان دارد با استفاده از استایلهای جایگزین یا کمهزینهتری همان نتیجهی نهایی مورد نظر را به دست آورید.
تا جایی که میتوانید، در حین اجرای انیمیشنها به هیچوجه کاری نکنید که منجر به ترسیم شود، زیرا در حالت عادی فقط ۱۰میلیثانیه زمان داریم و این زمان برای ترسیم کافی نیست، مخصوصاً در موبایلها.