مقدمه
اگر از آن دسته افرادی هستید که چیزهایی مثل نحوه عملکرد مرورگرها را دنبال می‌کنند، پس حتماً می‌دانید که اخیراً مقاله‌های شگفت‌انگیزی درباره جزئیات عملیات ترکیبی/پردازنده شتاب‌دهنده GPU در Chrome منتشر شده است. ابتدا پرداز در Chrome: مدل لایه مقدمه خوبی برای نحوه استفاده Chrome از مفهوم لایه‌ها برای ترسیم صفحه است؛ و برای بررسی عمیق‌تر ترکیب‌بندی پردازشی در Chrome بحث می‌کند که چگونه Chrome از این لایه‌ها در کنار پردازنده گرافیکی برای پرداز صفحه شما استفاده می‌کند.
سؤال فلسفی
پس‌از صرف زمان زیادی برای نوشتن شطرنجی‌سازهای نرم‌افزاری برای اهداف سه‌بعدی، برایم آشکار شد که برخی‌از ویژگی‌های CSS باید عملکرد متفاوتی هنگام ترسیم صفحه شما داشته باشند. برای مثال، شطرنجی کردن تصویر کوچک روی صفحه‌نمایش عملیات الگوریتمی کاملاً متفاوتی نسبت به کشیدن سایه روی شکل دلخواه است. بنابراین این سؤال مطرح شد: ویژگی‌های مختلف CSS چگونه بر وزن رندر صفحه شما تأثیر می‌گذارند؟
هدف من این بود که مجموعه بزرگی از ویژگی‌ها/مقادیر CSS را براساس زمان رنگ‌آمیزی آن‌ها دسته‌بندی کنم تا بتوانیم درک کنیم که کدام نوع ویژگی‌های CSS عملکرد بهتری نسبت به سایرین دارند. برای انجام این کار، من بااستفاده از چسب نواری و آدامس بادکنکی، اتوماسیونی نوشتم تا سعی کنم قابلیت مشاهده عددی را به زمان‌های رنگ‌آمیزی CSS اضافه کنم، که به این صورت کار می‌کرد:
- مجموعه‌ای از صفحه‌های HTML مجزا تولید کنید؛ هرکدام با یک عنصر DOM و چند جایگشت از ویژگی‌های CSS متصل به آن.
- دستورگان خودکارسازی را اجرا کنید که برای هر صفحه:
- راه‌اندازی Chrome
- بار کردن صفحه
- تولید تصویر Skia برای صفحه
- هر «تصویر Skia» گرفته‌شده را ازطریق معیار Skia اجرا کنید تا زمان‌بندی‌ها را به‌دست آورید
- همه زمان‌بندی‌ها را بیرون بریزید و از اعداد شگفت‌زده شوید. (این بخش مهم است…)
با این راه‌اندازی، مجموعه‌ای از صفحه‌های HTML تولید می‌کنیم که هر صفحه حاوی جایگشت منحصربه‌فردی از ویژگی‌ها و مقادیر CSS است؛ برای مثال، در اینجا دو فایل html وجود دارد:
<style>
#example1 {
background: url(foo.png) top left / 50% 60%;
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
و یک مثال دیگر که پیچیده‌تر است
<style>
#example1 {
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(circle closest-corner, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1">WOAH</div>
در زیر، به‌عنوان گونه‌ای از مثال آخر، که در آن فقط مقدار radial-gradient را تغییر می‌دهیم:
<style>
#example1
{
background-color:#eee;
box-shadow: 1px 2px 3px 4px black;
border-radius: 50%;
background: radial-gradient(farthest-side, white, black);
padding: 20px;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}
</style>
<div id="example1" style="padding: 20px; margin-top: 10px;margin-right: 20px; text-align: center;">WOAH</div>
سپس هر صفحه در نمونه جدیدی از Chrome بار می‌شود (تا اطمینان حاصل شود که زمان‌بندی‌ها به‌دلیل وضعیت‌های قدیمی در بار کردن مجدد صفحه به‌نوعی تحت‌تأثیر قرار نگرفته‌اند)، و یک Skia Picture (*.SKP) گرفته می‌شود تا ارزیابی شود که از چه فرمان‌های Skia برای رنگ‌آمیزی صفحه استفاده شده است. وقتی فایل‌های SKP برای هر فایل HTML تولید شد، دسته دیگری را اجرا می‌کنیم تا فایل‌های *.SKP را ازطریق برنامه Skia Benchmark (ساخته‌شده از کد منبع Skia) ارسال کنیم که میانگین زمان صرف‌شده برای ارائه آن صفحه را تخلیه می‌کند.
درحال ارزیابی داده‌ها
از این طریق، اکنون توانایی تقریبی برای ترسیم میزان زمان لازم برای رنگ‌آمیزی مجموعه‌ای از ویژگی‌های CSS داریم. یا بهتر است بگوییم، می‌توانیم رتبه‌بندی پشته‌ای ویژگی‌های CSS را براساس عملکرد رنگ‌آمیزی آن‌ها شروع کنیم. در اینجا نمودار بزرگی را می‌بینید که با Chrome 27 beta گرفته شده است و مجموعه کامل داده‌های زمان‌بندی این فرایند را نشان می‌دهد. توجه داشته باشید که همه داده‌ها ممکن است تغییر کنند زیرا Chrome با گذشت زمان سریع‌تر و سریع‌تر می‌شود.
هر نوار عمودی نشان‌دهنده زمان رنگ‌آمیزی صفحه‌ای با یک ترکیب از ویژگی‌های CSS است (با بزرگ‌نمایی ۱۰۰ برابری؛ مقدار مقیاس واقعی این نمودار ۰ تا ۱٫۵۶ میلی‌ثانیه است). خطوط زیبای زیادی وجود دارد، اما در این شکل تا حدودی بی‌فایده است؛ برای یافتن روندهای مفید باید مقداری داده‌کاوی انجام دهیم.
ابتدا شواهدی پیدا می‌کنیم که نشان می‌دهد برخی‌از ویژگی‌های CSS به‌طور واضحی هزینه بیشتری برای رندر کردن نسبت‌به سایرین دارند. برای مثال، ترسیم سایه روی عنصر DOM شامل عملیات چندمرحله‌ای با اسپلاین و انواع دیگر چیزهای ناخوشایند است، برخلاف شفافیت که باید رندر کردن آن آسان‌تر باشد.
دوم، و جالب‌تر اینکه، ترکیب‌های ویژگی‌های CSS می‌توانند زمان رنگ‌آمیزی بیشتری نسبت به مجموع بخش‌هایشان داشته باشند. از دیدگاه یک ناظر، این کمی عجیب است، ما انتظار داریم که A+B = C باشد، نه 2.2C. برای مثال، افزودن box-shadow و border-radius-stroke :
نکته واقعاً جالب درباره این موضوع این است که این فقط خود ویژگی box-shadow نیست، بلکه آن جایگشت مقدار خاص است. برای مثال، در زیر گروه‌بندی box-shadow : 50% و border-radius با تغییرات مقدار نشان داده شده است.
با نگاه کردن به داده‌ها، این روند برای مدتی ادامه دارد. ترکیب‌های عجیب و غریب زیادی وجود دارد و مجموعه آزمون من به‌سختی همه آن‌ها را پوشش می‌دهد؛ هنوز تعداد زیادی آزمایش و ترکیب وجود دارد که می‌تواند نتایج جالبی به‌همراه داشته باشد
درحال یافتن وزن پرداز زدن صفحه شما
توسعه‌دهندگان با داشتن توانایی ردیابی زمان پرداز زدن برای هر عنصر در صفحه شما، می‌توانند ارزیابی وزن پرداز زدن صفحه خود و نحوه تأثیر آن بر پاسخ‌گویی سایت شما را شروع کنند؛ در اینجا چند نکته برای شروع آورده شده است
- از حالت Continuous Paint Chrome در Chrome Dev Tools استفاده کنید تا متوجه شوید کدام ویژگی‌های CSS برای شما هزینه دارند.
- بررسی‌های CSS را در فرایند بازبینی کد موجود خود بگنجانید تا مشکلات عملکرد را شناسایی کنید در CSS خود به‌دنبال جاهایی بگردید که از چیزهایی استفاده می‌کنید که می‌دانید گران‌تر هستند، مانند گرادیان‌ها و سایه‌ها. از خودتان بپرسید، آیا واقعاً به این‌ها در اینجا نیاز دارم؟
- اگر شک دارید، همیشه عملکرد بهتر را انتخاب کنید. ممکن است کاربران شما به‌خاطر نیاورند که عرض حاشیه داخلی ستون‌های شما چقدر است، اما احساسی را که هنگام بازدید از سایت شما داشته‌اند به‌خاطر خواهند آورد.
تفکرات نهایی
یکی از جالب‌ترین چیزها درباره این آزمایش این است که زمان‌بندی‌ها با هر نسخه Chrome همچنان تغییر خواهد کرد (امیدواریم سریع‌تر شود ;) نرم‌افزار مرورگر سطح درحال تغییر همیشگی است. چیزی که امروز کند است، فردا می‌تواند سریع باشد. می‌توانید از این مقاله استفاده کنید تا از قرار دادن box-shadow: 1px 2px 3px 4px در عنصری که قبلاً border-radius:5 دارد اجتناب کنید. بااین‌حال، نکته مهم‌تر این است که ویژگی‌های CSS مستقیماً بر زمان رنگ‌آمیزی صفحه شما تأثیر می‌گذارند.