المجتمع الأكبر للعرب في مجال التك

تحميل من Google Playتحميل من App Store

ال  TBT في الLight house

mhmda965290
منذ 8 أشهر

ال  TBT في الLight house بيقولك إن كودك ثقيل لدرجة إنه شل حركة المتصفح ومنع المستخدم من التفاعل مع الموقع.


تيجي تضغط على زرار أو تفتح منيو تلاقي الموقع مهنج لثواني وبعدين يستجيب.

لو الـ TBT عندك أكتر من 200 ms يبقى إنت بتقدم تجربة مستخدم سيئة.

الحل : 

# كسر المهمات الكبيرة
المتصفح بيمشي في تنفيذ الكود سطر سطر. لو قابل Task واحدة بتاخد أكتر من 50 msبيعتبرها Long Task وبيوقف أي تفاعل تاني زي الضغط أو الـ Scroll

الحل: استخدم تقنيات الـ Code Splitting بلاش تبعت ملف JS واحد حجمه 2 ميجا قطع الكود لأجزاء صغيرة تتحمل بس لما نحتاجها او استخدم الdynamic import

# تقليل وقت تنفيذ الـ JavaScript
امسح الـ Unused JS الكود اللي مش مستخدم في الصفحة الحالية.
قلل الاعتماد على المكتبات الضخمة لو تقدر تستبدلها بـ Native JS
مثلا: بدل ما تستخدم Moment.js عشان التاريخ استخدم  Intl.DateTimeFormat

# تحسين الـ Third-Party Scripts
أكبر عدو للـ TBT هو السكريبتات الخارجية (إعلانات، شات، تحليلات) دي سكريبتات إنت مش متحكم فيها وبتحجز الـ Main Thread لنفسها.
الحل:استخدم خاصية defer أو async.

# الـ Web Workers
لو عندك حسابات معقدة أو معالجة داتا كبيرة في الـ Frontend، بلاش تعملها في الـ Main Thread.
الحل: انقل العمليات التقيلة لـ Web Workerده بيسمح للكود يشتغل في Thread منفصل تماماً، ويسيب الـ Main Thread فاضي عشان يستجيب لضغطات المستخدم.



hashtag#ReactJS
hashtag#FrontendDevelopment
hashtag#WebDevelopment
hashtag#JavaScript
hashtag#NextJS
hashtag#TypeScript
hashtag#UIUX
hashtag#WebDesign
hashtag#Frontend
hashtag#Coding
hashtag#Programming
hashtag#WebPerformance
hashtag#CSS
hashtag#Animation
hashtag#ReactDeveloper
hashtag#SoftwareEngineering
hashtag#WebDev
hashtag#Tech
hashtag#OpenSource
hashtag#DeveloperTools
hashtag#UIComponents
hashtag#CreativeDevelopment
hashtag#FrontendEngineering
hashtag#DevCommunity
hashtag#SoftwareDevelopment

35مشاهدة

سجّل الدخول لعرض التعليقات

تسجيل الدخول