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

Addy Osmani

Long Task یک کد جاوا اسکریپت است که رشته اصلی را برای مدت زمان طولانی در انحصار خود در می آورد و باعث می شود رابط کاربری یخ بزند.

در حالی که یک صفحه صفحه در حال بارگیری است، Long Tasks می تواند رشته اصلی را ببندد و صفحه را به ورودی کاربر پاسخ ندهد، حتی اگر آماده به نظر برسد. کلیک‌ها و ضربه‌ها اغلب کار نمی‌کنند زیرا ویژگی‌های تعاملی مانند شنوندگان رویداد و کنترل‌کننده‌های کلیک هنوز به عناصر رابط کاربری متصل نشده‌اند. به همین دلیل، Long Tasks می تواند تا حد زیادی زمان تعامل شما را افزایش دهد.

گزارش فانوس دریایی که یک TTI ضعیف را نشان می دهد.

Chrome DevTools اکنون می‌تواند Long Tasks را تجسم کند و دیدن کارهایی را که نیاز به بهینه‌سازی دارند آسان‌تر می‌کند.

چه چیزی به عنوان یک کار طولانی به حساب می آید؟

کارهای طولانی سنگین CPU ناشی از کار پیچیده ای است که بیش از 50 میلی ثانیه طول می کشد. مدل RAIL به شما پیشنهاد می‌کند رویدادهای ورودی کاربر را در 50 میلی‌ثانیه پردازش کنید تا از پاسخ قابل مشاهده در 100 میلی‌ثانیه اطمینان حاصل کنید و ارتباط بین عمل و واکنش را حفظ کنید.

نکته کلیدی: در حالی که مدل RAIL ارائه یک پاسخ بصری به ورودی کاربر را در عرض 100 میلی ثانیه پیشنهاد می‌کند، آستانه‌های متریک Interaction to Next Paint (INP) تا 200 میلی‌ثانیه اجازه می‌دهد تا انتظارات قابل‌دستیابی‌تری را ایجاد کند، به‌ویژه برای دستگاه‌های کندتر.

آیا کارهای طولانی در صفحه من وجود دارد که می تواند تعامل را به تاخیر بیندازد؟

تا به حال، باید به صورت دستی به دنبال «بلوک‌های زرد بلند» از اسکریپت با طول بیش از 50 میلی‌ثانیه در ابزارهای توسعه‌دهنده کروم بگردید یا از Long Tasks API استفاده کنید تا بفهمید چه وظایفی تعامل را به تأخیر می‌اندازد.

نوارهای زرد نشان دهنده طول کار است.

برای کمک به تسهیل گردش کار حسابرسی عملکرد، DevTools اکنون Long Tasks را به تصویر می کشد . اگر وظایف طولانی باشند (به رنگ خاکستری نشان داده شده اند) دارای پرچم قرمز هستند.

برای استفاده از ابزار تجسم جدید:

1. یک ردیابی را در پانل عملکرد بارگیری یک صفحه وب ثبت کنید.
2. به دنبال یک پرچم قرمز در نمای موضوع اصلی باشید. باید ببینید وظایف اکنون با رنگ خاکستری مشخص شده اند و با برچسب Task مشخص شده اند.
3. نشانگر خود را روی یک نوار خاکستری نگه دارید. گفتگویی خواهید دید که مدت زمان کار و اینکه آیا آن کار طولانی در نظر گرفته می شود را نشان می دهد.

چه چیزی باعث وظایف طولانی من می شود؟

برای کشف علت یک کار طولانی، نوار خاکستری Task را انتخاب کنید. در کشوی زیر، Bottom-Up و Group by Activity را انتخاب کنید. این به شما امکان می‌دهد ببینید چه فعالیت‌هایی بیشترین کمک را (در مجموع) در انجام این کار طولانی مدت داشته است. در مثال زیر، علت تأخیر مانند مجموعه پرهزینه ای از پرس و جوهای DOM به نظر می رسد.

DevTools دلایل انجام کارهای طولانی را در این منو نشان می دهد.

راه های رایج برای بهینه سازی وظایف طولانی چیست؟

اسکریپت های بزرگ اغلب یکی از دلایل اصلی کارهای طولانی هستند. تقسیم آنها را در نظر بگیرید. همچنین مراقب اسکریپت‌های شخص ثالث باشید، که می‌تواند حاوی وظایف طولانی باشد که تعاملی شدن محتوای اصلی را به تاخیر می‌اندازد.

تمام کارهای خود را به قطعاتی تقسیم کنید که در کمتر از 50 میلی ثانیه اجرا می شوند و این تکه ها را در مکان و زمان مناسب اجرا کنید. مکان مناسب برای برخی از آنها ممکن است خارج از موضوع اصلی، در یک کارگر خدماتی باشد. برای راهنمایی در مورد از بین بردن کارهای طولانی، به بهینه سازی وظایف طولانی و فیل والتون بیکار تا فوری مراجعه کنید.

صفحات خود را ریسپانسیو نگه دارید. به حداقل رساندن وظایف طولانی یک راه عالی برای اطمینان از اینکه کاربران شما هنگام بازدید از سایت شما تجربه لذت بخشی دارند. برای اطلاعات بیشتر در مورد وظایف طولانی، به معیارهای عملکرد کاربر محور مراجعه کنید.