زمان مسدود سازی کل یا tbt چیست؟

Tbt که مخفف عبارت Total Blocking Time است، به مدت زمانی گفته می شود که در طی آن همه وظایف طولانی تر از 50 میلی ثانیه که به وظایف Long Tasks نیز شهرت دارند، رشته اصلی را مسدود می کنند و بر قابلیت استفاده یک صفحه تاثیر می گذارد. به همین دلیل tbt یا Total Blocking Time، به زبان فارسی «زمان مسدود سازی کل» ترجمه می شود. کمکی که tbt به ما می کند این است که با دانستن این که tbt چیست، ما متوجه می شویم که یک صفحه قبل از این که به طور کامل در تعامل قرار گیرد، چقدر پاسخگو نیست.

Long Task وظیفه ای است که بیشتر از 50 میلی ثانیه روی رشته اصلی اجرا می شود. Long Task ها باعث مسدود شدن رشته اصلی می شوند. چون وقتی که Long Task ها در حال اجرا شدن قرار می گیرند، مرورگر توانایی قطع آن ها را ندارد. ممکن است با اهمیت رشته اصلی به خوبی آشنا نشده باشید. وقتی راجع به تصویر سازی در صفحه یا همان rendering حرف می زنیم، رشته اصلی یا main thread هسته اصلی این تصویر سازی است. مرورگر در موارد زیادی به رشته اصلی یا main thread وابسته است.

بعد از این که مرورگر یک فایل کد را دریافت می کند، رشته اصلی یا همان main thread، HTML را تجزیه می کند. پس از آن که HTML به وسیله رشته اصلی یا main thread تجزیه شد، به وسیله رشته اصلی به یک مدل شی سند یا Document Object Model که به صورت اختصار به DOM شهرت دارد، تبدیل می شود. سپس بعد از گذراندن این مراحل، رشته اصلی، CSS را تجزیه می کند و سبک هر عنصر را تعیین می کند. البته باید به این موضوع نیز دقت کنید که این تنها کار رشته اصلی یا main thread نیست و رشته اصلی هزاران کار دیگر نیز انجام می دهد.

نقش tbt در وب سایت

حال بهتر است به این موضوع بپردازیم که نقش tbt چیست. تا الان متوجه شدیم که تمامی کار های سنگین و اصلی به وسیله رشته اصلی یا main thread انجام می شود. ممکن است پیش خود فکر کنید که دیگر دلیل نیاز ما به tbt چیست. دقیقا موضوع اصلی این است که کار های زیادی بر روی دوش رشته اصلی یا main thread قرار گرفته است. همچنین به طور پیش فرض، تمام جاوا اسکریپت بر روی رشته اصلی اجرا می شود. این مسئله که تمام جاوا اسکریپت تنها بر روی رشته اصلی یا main thread اجرا می شود، مشکلی ندارد اگر رشته اصلی مسئولیت دیگری نداشته باشد.

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

نحوه اندازه گیری tbt چیست؟

برای آن که بتوانیم به بهترین نحو به شما توضیح دهیم که نحوه اندازه گیری tbt چیست، باید از چند مثال استفاده کنیم. بهتر است فرض کنید که چهار وظیفه یا Task داریم که روی رشته اصلی یا main thread اجرا می شوند. فرض کنید که وظیفه اول 260 میلی ثانیه، وظیفه دوم 30 میلی ثانیه، وظیفه سوم 100 میلی ثانیه و وظیفه آخر 60 میلی ثانیه طول می کشد.

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

• زمان مسدود شدن هر کار را محاسبه کنید.
• همه نتایج را با هم اضافه کنید.

حال با تعریفی که از tbt داشتیم، task اول که 260 میلی ثانیه زمان می برد، 210 میلی ثانیه آن مسدود است. task دوم چون کمتر از 50 میلی ثانیه زمان می برد، به tbt ربطی ندارد. حال سومین task، چون 100 میلی ثانیه طول می کشد، 50 میلی ثانیه از آن مسدود است. سپس در آخر، task چهارم چون 60 میلی زمان می برد، 10 میلی ثانیه از آن مسدود است.

حال اگر مدت زمان های مسدود شده، یعنی 210 میلی ثانیه، 50 میلی ثانیه و 10 میلی ثانیه را با هم جمع کنیم، توانسته ایم که tbt را اندازه گیری کنیم. در این مثالی که ما برای توضیح روش اندازه گیری tbt زدیم، tbt ما 270 میلی ثانیه است.

حال برای آن که بهتر متوجه شوید که نحوه اندازه گیری tbt چیست، بهتر است که به مثال دیگری نگاه کنیم.

فرض کنید که ما فقط یک task در رشته اصلی یا main thread داریم که به اندازه 400 میلی ثانیه زمان می برد. ممکن است که در ابتدا فکر کنید چون در این مثال فقط یک task داریم، پس شرایط بهتر از زمانی است که چند task بر روی رشته اصلی یا main thread کار انجام می دهند. اما این طرز فکر اشتباه است.

همانطور که بیان کردیم، زمان مسدود شدن، 50 میلی ثانیه است. حال با این تعریف، زمان مسدود کردن این task که 400 میلی ثانیه طول می کشد، 350 میلی ثانیه خواهد بود. اگر چه که تنها در این مثال یک task بر روی رشته اصلی یا main thread کار انجام می دهد، اما باز هم زمان بیشتری را نسبت به چهار task که در مثال بالا بیان کردیم، با هم مسدود می کند.

نکات پایانی

نکته بسیار حیاتی و مهمی که در رابطه با tbt باید به آن دقت کنید، این مسئله است که تعداد کمی از وظایف در رشته اصلی، لزوما به معنای زمان مسدود کردن کم نیست. همچنین در ادامه این نکته، این موضوع را هم باید بیان کردن که تعداد زیادی از کار ها لزوما به زمان زیادی برای مسدود کردن یا تجربه بد کاربری منجر نمی شود. زمانی که می خواهید روش هایی برای بهبود tbt خود پیدا کنید، بهتر است که به این نکته دقت کنید.

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