هنگام بهینه‌سازی عملکرد یک وبسایت یا وب‌اپلیکیشن، کاهش زمان صرف‌شده برای وظایف طولانی‌مدت در رشته اصلی (main thread) یکی از اصول مهم برای بهبود تجربه کاربری است. وظایف رشته اصلی به عملیات‌هایی گفته می‌شود که مرورگر در رشته اصلی (که به آن رشته رابط کاربری یا UI thread نیز گفته می‌شود) انجام می‌دهد، مانند اجرای جاوااسکریپت، مدیریت تعاملات کاربر و رندر کردن محتوا. اگر وظایف در رشته اصلی مدت زیادی طول بکشند، می‌توانند منجر به عملکرد کند، تعاملات غیرپاسخگو و تجربه کاربری ضعیف شوند. به همین دلیل، یکی از مهم‌ترین بهینه‌سازی‌هایی که گوگل برای بررسی عملکرد سایت‌ها توصیه میکند، کاهش وظایف طولانی‌مدت در رشته اصلی است.
چرا وظایف طولانی‌مدت در رشته اصلی مشکل‌ساز هستند؟
پاسخگویی رابط کاربری (UI): رشته اصلی مسئول رندر کردن رابط کاربری، پردازش ورودی‌های کاربر و اجرای جاوااسکریپت است. اگر یک وظیفه طولانی‌مدت در رشته اصلی در حال اجرا باشد، مرورگر نمی‌تواند سریعاً به تعاملات کاربر پاسخ دهد. به‌عنوان مثال، اگر اجرای جاوااسکریپت زمان‌بر باشد یا اسکریپت رشته اصلی را مسدود کند، می‌تواند منجر به تأخیر در تعاملاتی مانند کلیک، اسکرول و انیمیشن‌ها شود و این احساس را به کاربر منتقل کند که وبسایت کند یا غیرپاسخگو است.
لرزش (Jank) و تأخیرها: انجام یک وظیفه طولانی‌مدت در رشته اصلی می‌تواند باعث ایجاد لرزش (Jank) شود که به رفتارهای ناهموار، تأخیر یا غیرپاسخگویی در تعاملات گفته می‌شود. زمانی که رشته اصلی توسط یک وظیفه مسدود می‌شود، مرورگر نمی‌تواند فریم‌ها را به‌موقع رندر کند یا به تعاملات کاربر به‌طور مناسب پاسخ دهد که باعث جلب توجه به لرزش در انیمیشن‌ها، اسکرول یا تأخیر در ورودی‌های کاربر می‌شود. این مسئله مستقیماً بر تجربه کاربری و عملکرد کلی وبسایت، به‌ویژه در دستگاه‌های موبایل، تأثیر می‌گذارد، جایی که کاربران انتظار دارند تجربه‌ای روان و پاسخگو داشته باشند.
مسدود شدن مسیر رندر بحرانی: رشته اصلی مسئول بسیاری از عملیات‌های بحرانی مانند بارگذاری و رندر کردن محتوا است. هنگامی که وظایف در رشته اصلی به تأخیر می‌افتند، ممکن است مسیر رندر بحرانی مسدود شود. به این معنی که مرورگر ممکن است قادر به رندر سریع صفحه نباشد که منجر به افزایش زمان بارگذاری و کاهش عملکرد مشهود صفحه شود و این موضوع می‌تواند باعث نارضایتی کاربران شود.
چگونه می‌توان از وظایف طولانی‌مدت در رشته اصلی جلوگیری کرد؟
تقسیم وظایف طولانی به بخش‌های کوچکتر: یکی از مؤثرترین راه‌ها برای اجتناب از وظایف طولانی‌مدت در رشته اصلی تقسیم وظایف بزرگ جاوااسکریپت به بخش‌های کوچکتر و قابل مدیریت است. این تکنیک به نام تقسیم وظایف شناخته می‌شود. با تقسیم کار به بخش‌های کوچکتر، مرورگر می‌تواند آنها را در بین سایر عملیات‌ها مانند رندر کردن فریم‌ها و پاسخ دادن به ورودی‌های کاربر پردازش کند. این امر احتمال مسدود شدن رشته اصلی را کاهش می‌دهد و باعث می‌شود که صفحه پاسخگو باقی بماند.
به‌عنوان مثال، به جای انجام یک محاسبه طولانی‌مدت به‌طور یکجا، می‌توانید آن را با استفاده از setTimeout() یا requestIdleCallback() به عملیات کوچکتری تقسیم کنید تا مرورگر بتواند وظایف دیگر را بین آنها انجام دهد.
استفاده از وب‌ورکرها (Web Workers): وب‌ورکرها رشته‌های جداگانه‌ای هستند که می‌توانند کد جاوااسکریپت را به‌طور مستقل از رشته اصلی اجرا کنند. با واگذاری محاسبات سنگین به وب‌ورکرها، می‌توانید اطمینان حاصل کنید که رشته اصلی برای انجام به‌موقع به‌روزرسانی‌های رابط کاربری و تعاملات کاربر آزاد می‌ماند. وب‌ورکرها می‌توانند برای پردازش داده‌ها، انجام محاسبات یا دریافت منابع استفاده شوند بدون اینکه عملیات رشته اصلی مختل شود.
بهینه‌سازی اجرای جاوااسکریپت: بهینه‌سازی عملکرد جاوااسکریپت برای جلوگیری از وظایف طولانی‌مدت در رشته اصلی بسیار حیاتی است. محاسبات غیرضروری را کاهش دهید، از استفاده از عملیات همزمان مسدودکننده جلوگیری کنید و از دستکاری‌های اضافی DOM که می‌توانند سرعت صفحه را کند کنند پرهیز کنید. علاوه بر این، استفاده از ویژگی‌های مدرن جاوااسکریپت مانند async/await و Promise برای مدیریت عملیات‌های ناهمزمان می‌تواند عملکرد را بهبود بخشد.
بارگذاری تنبل (Lazy Load) محتوای غیرضروری: بارگذاری تنبل یک تکنیک است که در آن منابع مانند تصاویر یا اسکریپت‌ها تنها زمانی بارگذاری می‌شوند که به آنها نیاز است. با به تعویق انداختن بارگذاری محتوای غیرضروری، می‌توانید بار روی رشته اصلی را در طول بارگذاری اولیه صفحه کاهش دهید. این موضوع به‌ویژه برای صفحاتی که محتوای زیادی دارند یا اسکریپت‌های شخص ثالثی که ممکن است برای رندر اولیه صفحه ضروری نباشند، اهمیت دارد.
اولویت‌بندی وظایف بحرانی: همه وظایف در رشته اصلی از اهمیت یکسانی برخوردار نیستند. برخی از وظایف برای رندر کردن صفحه بحرانی هستند، مانند چیدمان و نقاشی (painting)، در حالی که برخی دیگر، مانند اسکریپت‌های تجزیه و تحلیل یا ویجت‌های شخص ثالث، می‌توانند به تأخیر بیفتند. از اشاره‌گر اولویت (priority hints) و ویژگی defer برای بارگذاری اسکریپت‌های غیرضروری پس از رندر اولیه صفحه استفاده کنید. این باعث می‌شود رشته اصلی مسدود نشود و مرورگر بتواند عملیات‌های ضروری مانند چیدمان و رندر را در اولویت قرار دهد.
اندازه‌گیری و نظارت بر عملکرد رشته اصلی
برای ردیابی عملکرد وظایف رشته اصلی، توسعه‌دهندگان می‌توانند از ابزارهایی مانند Google Chrome DevTools استفاده کنند که بینش‌های دقیقی در مورد چگونگی استفاده از رشته اصلی ارائه می‌دهد. تب Performance در DevTools یک جدول زمانی از فعالیت‌های رشته اصلی را نشان می‌دهد که به توسعه‌دهندگان این امکان را می‌دهد تا وظایف طولانی‌مدت را شناسایی کرده، مدت زمان اجرای آنها را اندازه‌گیری کرده و ببینند چگونه بر عملکرد کلی صفحه تأثیر می‌گذارند.
ابزار دیگری که برای این کار مفید است، Lighthouse است که یک ممیزی خودکار از عملکرد صفحه وب انجام می‌دهد و شامل بینش‌هایی درباره عملکرد رشته اصلی و پیشنهادات برای بهینه‌سازی است.
نتیجه‌گیری
وظایف طولانی‌مدت در رشته اصلی می‌توانند عملکرد وبسایت را به‌طور قابل‌توجهی کاهش دهند و منجر به بارگذاری کند صفحه، تعاملات غیرپاسخگو و تجربه کاربری ضعیف شوند. برای بهینه‌سازی عملکرد، ضروری است که مدت زمان و فراوانی این وظایف کاهش یابد. با تقسیم وظایف بزرگ به بخش‌های کوچکتر، استفاده از وب‌ورکرها، بهینه‌سازی اجرای جاوااسکریپت، بارگذاری تنبل محتوا و اولویت‌بندی وظایف بحرانی، توسعه‌دهندگان می‌توانند اطمینان حاصل کنند که رشته اصلی برای رندر کردن و پاسخ دادن به ورودی‌های کاربر آزاد باقی می‌ماند. نظارت و بهینه‌سازی عملکرد رشته اصلی باید بخشی از فرآیند توسعه وب باشد، زیرا نقش اساسی در ارائه وب‌سایت‌هایی با عملکرد سریع، پاسخگو و کاربرپسند دارد.
