#perfmatters: تکنیک های ابزار برای نینجاهای عملکردی
برای تبدیل شدن به یک متخصص عملکرد، شناخت راه خود برای ابزارهای توسعه کلیدی است. کلت از طریق سه ستون عملکرد گام برداشت: شبکه، محاسبه و رندر، که توری از مشکلات کلیدی در هر منطقه و ابزارهای موجود برای یافتن و ریشه‌کن کردن آنها را ارائه می‌دهد.
- اکنون می‌توانید Chrome را در Android با ابزار DevTools که می‌شناسید و دوست دارید از دسک‌تاپ نمایه کنید.
- حلقه تکرار برای کار عملکرد عبارت است از: جمع آوری داده ها، دستیابی به بینش، اقدام.
- دارایی هایی را که در مسیر حیاتی رندر صفحات شما قرار دارند، اولویت بندی کنید.
- اجتناب از نقاشی؛ فوق العاده گران است
- از ریزش حافظه و اجرای کد در زمان‌های بحرانی در برنامه خود اجتناب کنید.
#perfmatters: بهینه سازی عملکرد شبکه
شبکه و تأخیر معمولاً 70 درصد از کل زمان بارگذاری صفحه یک سایت را تشکیل می دهد. این درصد زیادی است، اما همچنین به این معنی است که هر پیشرفتی که در آنجا ایجاد کنید، مزایای زیادی برای کاربران شما خواهد داشت. در این گفتگو، ایلیا به تغییرات اخیر در کروم که زمان بارگذاری را بهبود می‌بخشد، و همچنین چند تغییری که می‌توانید در محیط خود ایجاد کنید تا بار شبکه را به حداقل ممکن برسانید، وارد کرد.
- کروم M27 یک زمان‌بندی منابع جدید و بهبود یافته دارد.
- Chrome M28 سایت های SPDY را (حتی) سریعتر کرده است.
- حافظه پنهان ساده کروم بازنگری شده است.
- SPDY / HTTP/2.0 پیشرفت های بزرگی در سرعت انتقال ارائه می دهد. ماژول های SPDY بالغ برای nginx، Apache و Jetty در دسترس هستند (فقط سه مورد را نام ببریم).
- QUIC یک پروتکل جدید و آزمایشی است که بر روی UDP ساخته شده است. این روزهای اولیه است اما به هر حال کاربران برنده خواهند شد.
#perfmatters: طرح بندی و رندر 60 فریم بر ثانیه
سرعت 60 فریم در ثانیه در پروژه های شما به طور مستقیم با تعامل کاربر مرتبط است و برای موفقیت آن بسیار مهم است. در این سخنرانی نات و تام در مورد خط لوله رندر کروم، برخی از دلایل رایج افت فریم ها و نحوه جلوگیری از آنها صحبت کردند.
- طول یک فریم 16 میلی‌ثانیه است. این شامل جاوا اسکریپت، محاسبات سبک، نقاشی و ترکیب است.
- نقاشی بسیار گران است. طوفان رنگ جایی است که شما بیهوده کارهای گران قیمت را تکرار می کنید.
- از لایه ها برای ذخیره عناصر نقاشی شده استفاده می شود.
- کنترل کننده های ورودی (شنوندگان لمسی و چرخ ماوس) می توانند پاسخگویی را از بین ببرند. اگر می توانید از آنها اجتناب کنید جایی که نمی توانید آنها را به حداقل برسانید.
#perfmatters: برنامه های وب فوری موبایل
مسیر رندر بحرانی به هر چیزی (جاوا اسکریپت، HTML، CSS، تصاویر) اشاره دارد که مرورگر قبل از اینکه بتواند صفحه را نقاشی کند به آن نیاز دارد. اولویت‌بندی تحویل دارایی‌ها در مسیر رندر حیاتی، به‌ویژه برای کاربرانی که در دستگاه‌های دارای محدودیت شبکه مانند گوشی‌های هوشمند در شبکه‌های سلولی کار می‌کنند، ضروری است. برایان درباره نحوه انجام مراحل شناسایی و اولویت‌بندی دارایی‌ها برای وب‌سایت PageSpeed Insights توسط تیم Google صحبت کرد و زمان بارگذاری آن را از 20 ثانیه به کمی بیش از 1 ثانیه رساند!
- جاوا اسکریپت و CSS مسدود کننده رندر را حذف کنید.
- محتوای قابل مشاهده را در اولویت قرار دهید.
- بارگیری اسکریپت ها به صورت ناهمزمان
- نمای اولیه سمت سرور را به صورت HTML ارائه دهید و با جاوا اسکریپت تقویت کنید.
- CSS مسدودکننده رندر را به حداقل برسانید. فقط سبک های مورد نیاز برای نمایش نمای اولیه را ارائه دهید، سپس بقیه را تحویل دهید.
- URIهای داده بزرگ که در CSSهای مسدودکننده رندر قرار گرفته اند برای عملکرد رندر مضر هستند. آنها منابعی را مسدود می کنند که URL های تصویر غیر مسدود هستند.