فرآیند رندر مرورگر چیزی است که کد شما را به یک صفحه وب تبدیل می کند که کاربران شما می توانند با آن تعامل داشته باشند. به طور پیش‌فرض، رشته اصلی فرآیند رندر معمولا اکثر کدها را مدیریت می‌کند: HTML را تجزیه می‌کند و DOM را می‌سازد، CSS را تجزیه می‌کند و سبک‌های مشخص شده را اعمال می‌کند، و جاوا اسکریپت را تجزیه، ارزیابی و اجرا می‌کند.
موضوع اصلی همچنین رویدادهای کاربر را پردازش می کند. بنابراین، هر زمانی که موضوع اصلی مشغول انجام کار دیگری باشد، ممکن است صفحه وب شما به تعاملات کاربر پاسخ ندهد و منجر به تجربه بدی شود.
چگونه ممیزی موضوع اصلی Lighthouse شکست می خورد
Lighthouse صفحاتی را که موضوع اصلی را بیش از 4 ثانیه در حین بارگذاری مشغول نگه می‌دارند، پرچم‌گذاری می‌کند:
برای کمک به شما در شناسایی منابع بارگذاری رشته اصلی، Lighthouse به تفکیک زمانی که مرورگر صفحه شما را بارگذاری کرده است، زمان CPU را نشان می دهد.
چگونه کار نخ اصلی را به حداقل برسانیم
بخش‌های زیر بر اساس دسته‌هایی که Lighthouse گزارش می‌کند سازمان‌دهی شده‌اند. برای مروری بر نحوه نمایش صفحات وب توسط Chromium به آناتومی یک قاب مراجعه کنید.
برای یادگیری نحوه استفاده از Chrome DevTools برای بررسی دقیق آنچه که رشته اصلی شما در هنگام بارگیری صفحه انجام می دهد ، به انجام کمتر کار با رشته اصلی رجوع کنید.
ارزیابی اسکریپت
سبک و چیدمان
تفسیر
- به ویژگی های compositor only پایبند باشید و تعداد لایه ها را مدیریت کنید
- پیچیدگی رنگ را ساده کنید و مناطق رنگ را کاهش دهید