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

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

آدی عثمانی
آدی عثمانی

Long Tasks می تواند تاپیک اصلی را مشغول نگه دارد و تعامل کاربر را به تاخیر بیاندازد. Chrome DevTools اکنون می‌تواند Long Tasks را تجسم کند و دیدن وظایف برای بهینه‌سازی را آسان‌تر می‌کند.

اگر از Lighthouse برای ممیزی صفحات خود استفاده می کنید، ممکن است با Time to Interactive آشنا باشید، معیاری که نشان می دهد چه زمانی کاربران می توانند با صفحه شما تعامل داشته باشند و پاسخ دریافت کنند. اما آیا می‌دانستید که وظایف طولانی (جاوا اسکریپت) می‌تواند نقش مهمی در TTI ضعیف داشته باشد؟

Time to Interactive در گزارش فانوس دریایی نمایش داده شده است

وظایف طولانی چیست؟

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

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

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

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

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

اسکرین شات پنل عملکرد DevTools که تفاوت بین کارهای کوتاه و کارهای طولانی را نشان می دهد

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

DevTools وظایف طولانی را به صورت نوارهای خاکستری در پنل عملکرد با یک پرچم قرمز برای کارهای طولانی تجسم می کند.

  • یک ردیابی را در پانل عملکرد بارگیری یک صفحه وب ثبت کنید.
  • به دنبال یک پرچم قرمز در نمای موضوع اصلی باشید. باید ببینید وظایف اکنون خاکستری هستند ("تکلیف").
  • نگه داشتن ماوس روی یک میله به شما اطلاع می دهد که مدت زمان کار و اینکه آیا "طولانی" در نظر گرفته شده است.

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

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

انتخاب یک کار طولانی (با برچسب "Task") در DevTools به ما این امکان را می دهد تا فعالیت هایی را که مسئول آن بودند بررسی کنیم.

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

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

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

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