پنل DevTools Timeline همیشه بهترین ایستگاه در مسیر بهینه سازی عملکرد بوده است. این نمای کلی متمرکز از فعالیت برنامه‌تان به شما کمک می‌کند زمانی را که برای بارگذاری، اسکریپت، رندر و نقاشی صرف می‌شود، تجزیه و تحلیل کنید. اخیراً، Timeline را با ابزار دقیق‌تری ارتقا داده‌ایم تا بتوانید نمای عمیق‌تری از عملکرد برنامه خود ببینید.
ما ویژگی های زیر را اضافه کرده ایم:
- پروفایلر یکپارچه جاوا اسکریپت . (شامل نمودار شعله!)
- نمایشگر قاب برای کمک به تجسم لایه های ترکیبی.
- نمایه‌گر رنگ برای بررسی دقیق فعالیت‌های نقاشی مرورگر.
توجه داشته باشید که استفاده از گزینه‌های تصویربرداری Paint که در این مقاله توضیح داده شده است مقداری کارایی بالا را به همراه دارد، بنابراین فقط زمانی که می‌خواهید آن‌ها را روشن کنید.
پروفایل یکپارچه جاوا اسکریپت
اگر تا به حال در پنل نمایه‌ها جستجو کرده باشید، احتمالاً با نمایه‌ساز CPU جاوا اسکریپت آشنا هستید. این ابزار محل سپری شدن زمان اجرا در توابع جاوا اسکریپت را اندازه گیری می کند. با مشاهده پروفایل های جاوا اسکریپت با نمودار شعله، می توانید پردازش جاوا اسکریپت خود را در طول زمان تجسم کنید.
اکنون، می توانید این تفکیک دانه ای از اجرای جاوا اسکریپت خود را در پانل Timeline دریافت کنید. با انتخاب گزینه JS Profiler capture، می توانید پشته های تماس جاوا اسکریپت خود را در تایم لاین به همراه سایر رویدادهای مرورگر مشاهده کنید. افزودن این ویژگی به Timeline به ساده‌سازی گردش کار اشکال‌زدایی شما کمک می‌کند. اما بیشتر از آن، به شما امکان می دهد جاوا اسکریپت خود را در متن مشاهده کنید و بخش هایی از کد خود را که بر زمان بارگذاری و رندر صفحه تأثیر می گذارد، شناسایی کنید.
ما علاوه بر نمایه ساز جاوا اسکریپت، نمای Flame Chart را نیز در پانل Timeline ادغام کردیم. اکنون می توانید فعالیت برنامه خود را به عنوان آبشار کلاسیک رویدادها یا به عنوان نمودار شعله مشاهده کنید. نماد نمودار شعله به شما امکان می دهد بین این دو نما جابه جا شوید.
نمایشگر قاب
هنر ترکیب لایه ها یکی دیگر از جنبه های مرورگر است که بیشتر از دید توسعه دهندگان پنهان مانده است. در صورت استفاده کم و با احتیاط، لایه ها می توانند به جلوگیری از رنگ آمیزی مجدد پرهزینه کمک کنند و عملکرد بسیار خوبی را به همراه داشته باشند. اما پیش‌بینی اینکه مرورگر چگونه محتوای شما را ترکیب می‌کند، اغلب واضح نیست. با استفاده از گزینه جدید Paint Capture Timeline، می توانید لایه های ترکیبی را در هر فریم ضبط تجسم کنید.
هنگامی که یک نوار قاب خاکستری را در بالای موضوع اصلی انتخاب می‌کنید، پانل لایه‌های آن یک مدل بصری از لایه‌هایی که برنامه شما را تشکیل می‌دهند ارائه می‌کند.
می‌توانید مدل لایه‌ها را بزرگنمایی، بچرخانید و بکشید تا محتویات آن را کشف کنید. نگه داشتن ماوس روی یک لایه موقعیت فعلی آن را در صفحه نشان می دهد. با کلیک راست بر روی یک لایه می توانید به گره مربوطه در پنل Elements بپرید. این ویژگی ها به شما نشان می دهد که چه چیزی به یک لایه ارتقا یافته است. اگر لایه‌ای را انتخاب کنید، می‌توانید دلیل تبلیغ آن را در ردیفی با عنوان دلایل ترکیبی نیز ببینید.
پروفیل رنگ
آخرین اما نه کم‌اهمیت، ما پروفیل‌کننده رنگ را اضافه کرده‌ایم تا به شما کمک کند ضایعات ناشی از رنگ‌های گران قیمت را شناسایی کنید. این ویژگی جدول زمانی را با جزئیات بیشتری در مورد کارهایی که Chrome در طول رویدادهای رنگ انجام می دهد غنی می کند.
برای شروع، اکنون شناسایی محتوای بصری مربوط به هر رویداد نقاشی آسان تر است. هنگامی که یک رویداد رنگ سبز را در Timeline انتخاب می کنید، صفحه جزئیات پیش نمایشی از پیکسل های واقعی رنگ شده را به شما نشان می دهد.
اگر واقعاً می‌خواهید شیرجه بزنید، به بخش Paint Profiler بروید. این نمایه ساز دستورات ترسیم دقیقی را که مرورگر برای رنگ انتخاب شده اجرا کرده را به شما نشان می دهد. برای کمک به اتصال این دستورات بومی با محتوای واقعی در برنامه خود، می‌توانید روی یک تماس draw* کلیک راست کرده و مستقیماً به گره مربوطه در پانل Elements بروید.
مینی تایم لاین در بالای صفحه به شما امکان می دهد فرآیند نقاشی را بازپخش کنید و متوجه شوید که انجام کدام عملیات برای مرورگر گران است. عملیات ترسیم به صورت زیر کد رنگی می شود: صورتی (اشکال)، آبی (بیت مپ)، سبز (متن) و بنفش (متفرقه). ارتفاع میله نشان‌دهنده مدت زمان تماس است، بنابراین بررسی میله‌های بلند می‌تواند به شما کمک کند بفهمید که یک رنگ خاص چه چیزی پرهزینه است.
پروفایل و سود!
وقتی صحبت از بهینه سازی عملکرد به میان می آید، دانش مرورگر می تواند فوق العاده قدرتمند باشد. این به‌روزرسانی‌های «خط زمانی» با نگاه کردن به شما، به روشن شدن رابطه بین کد شما و فرآیندهای رندر Chrome کمک می‌کنند. این گزینه‌های جدید را در Timeline امتحان کنید و ببینید که Chrome DevTools چه کاری می‌تواند انجام دهد تا گردش کار jank-hunting شما را بهبود بخشد!