چطور Minimize main-thread work را به حداقل برسانم؟

چطور Minimize main-thread work را به حداقل برسانم؟

چطور Minimize main-thread work را به حداقل برسانم؟

چطور Minimize main-thread work را به حداقل برسانم؟

هر مرورگری دارای یک فرآیند رندر است که به طور موثر کد را به صفحه ای تبدیل

می کند که می تواند مورد استفاده و تعامل قرار گیرد.

این در رشته اصلی است که بیشترین پردازش را دارد.

موضوع اصلی HTML و CSS است که آنها را تجزیه می کند تا سبکهای مشخصی را برای محتوا اعمال کند.

همچنین JavaScript را تجزیه کرده و ارزیابی و اجرا می کند.

بنابراین ، اگر موضوع اصلی هنگام ورود یا تعامل با کاربر باشد ، صفحه وب شما به این تعامل پاسخ نمی دهد.

در اینجا 5 راه برای به حداقل رساند minimize main thread work بیان شده است:

minimize main thread work

1. آیا واقعاً به جاوا اسکریپت third-party نیاز دارید؟

اغلب مقصر اصلی ، third-party JavaScript است.

هرچه تعداد JS در صفحه شما بیشتر باشد ، زمان بیشتری برای مرورگر برای تجزیه

کامپایل و اجرای آن نیاز دارد.

شما می توانید با استفاده از page speed insights  ارزیابی کنید تا مدت زمان

بارگیری صفحه شما اندازه گیری شود.

URL ها یا دامنه های مسئول اسکریپت های third-party را که فکر می کنید یک مسئله است را مسدود کنید.

صفحه را بارگیری کنید و مدت زمان بارگیری بدون اسکریپت های third-party مسدود شده را دوباره اندازه بگیرید.

یک روش موثر ، بارگذاری تنبل محتوای  third-party پس از بارگیری محتوای صفحه اصلی است.

به عنوان یک بخش سنگین از فرآیند ، بارگذاری تنبل می توانند به کاهش  موضوع کمک کند.

چطور Minimize main-thread work را به حداقل برسانم؟

2. به سیستم وب اجازه دهید تا کارهای سنگین را انجام دهد

به دلیل قابلیت های مختلف هر دستگاه ، پیش بینی مدت زمان اجرای کد بر روی

موضوع اصلی تقریباً غیرممکن است.

یک راه حل برای این مشکل این است که کد را با استفاده از سیستم وب که در کنار

موضوع اصلی کار می کند و از رشته اصلی (OMT) است را اجرا کنید.

سیستم وب از برنامه موازی پشتیبانی می کنند و به شما امکان می دهند یک

تابع به یک thread بدهید ، که به طور موازی با بقیه برنامه شما اجرا می شود.

3. پیچیدگی سبک و چیدمان خود را کاهش دهید

افزودن عناصر ، تغییر کلاسها ، انیمیشن ها ، همه مرورگر را مجبور به محاسبه مجدد سبک عناصر

چیدمان و جریان می کند ، و مرورگر را مجبور می کند بررسی کند که آیا تغییرات لازم برای

محاسبه طرح وجود دارد یا خیر و به همین منظور درخت رندر به روز می شود.

تقریباً 50٪ از این زمان برای محاسبه سبک محاسبه شده برای یک عنصر استفاده می شود

کاهش تغییرات بین سبک ها و عناصر در صفحات ، دامنه و پیچیدگی محاسبات سبک را کاهش می دهد.

4- از الگوی PRPL استفاده کنید

PRPL مخفف کلمه ای است که الگویی را توصیف می کند که برای بارگیری و تعامل با سرعت

بیشتر صفحات وب استفاده می شود.

مخفف عبارت:

  • منابع مهم را برای مسیر URL اولیه مشخص کنید.

  • مسیر اولیه را ارائه دهید.

  • مسیرهای باقی مانده را پنهان کنید.

  • Lazy-load و مسیرهای باقی مانده را در صورت تقاضا ایجاد کنید.

Preload یک درخواست واکشی اعلانی است که به مرورگر می گوید در اسرع وقت یک منبع را درخواست کند.

مشخص کردن نوعی اندیکاتور برای اطلاع از کد زمانی که منبعی در ویپورت قرار دارد.

شما می توانید یک url تصویر “lazy” و url واقعی تصویر را به سادگی با قرار دادن یک کلاس “lazy” برروی تصویر خود قرار دهید.

برای تصاویر پس زمینه برای div ها ، از کلاس های “.lazy-background” و “.lazy-background.visible” استفاده کنید.

5. CSS را کم و به تعویق بیندازید

قبل از اینکه مرورگر یک صفحه را نمایش دهد ، باید پرونده های CSS بارگیری و تجزیه کند.

اگر پرونده های CSS بزرگ باشند ، موضوع برای مدت طولانی مسدود می شود و سرعت بارگیری

صفحه و زمان پاسخگویی به تعاملات کاربر را کاهش می دهد.

CSS را کم کنید

پرونده های CSS می توانند مطالب ، نظرات ، فضای خالی یا برگه های غیرضروری نفوذ کند.

اگر این مطالب های غیر ضروری را با خیال راحت حذف کنید ، بدون تأثیر بر نحوه ارائه سبک مرورگر

از اندازه نهایی ، اندازه نهایی را کاهش می دهد.

این فرآیند کوچک سازی نامیده می شود و به شما در کاهش بارگذاری کمک می کند.

یک راه این است که کد خود را به صورت عادی بنویسید و با استفاده از Webpack مرحله کوچک سازی را اضافه کنید.

CSS غیر ضروری را به تعویق بیندازید

Minimize main-thread work

Coverage Tool در DevTools به شما نشان می دهد که کدام کلاس های CSS برای

بارگذاری صفحه بسیار مهم هستند.

CSS مهم را از ابزار پوشش استخراج کرده و در یک بلوک در بالای صفحه بارگیری کنید.

سپس می توانید کلاسهای غیر بحرانی را به صورت غیرهمزمان بارگیری کرده و کار

رشته اصلی را کاهش دهید.

این باعث می شود صفحه شما تعاملی شود و زمان بارگیری آن بسیار سریعتر شود.

ما تمام تلاش خود را به کار می گیریم که شما کاربران عزیز با کمترین هزینه وب سایت مطلوبی داشته باشید برای همین تمامی مقالات آزمایش شده بعد ترجمه می شود.

اشتراک گذاری پست

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *