بهینه سازی تاخیر ورودی

ببینید تاخیر ورودی چیست و تکنیک‌هایی را برای کاهش آن برای تعامل سریع‌تر بیاموزید.

جرمی واگنر
جرمی واگنر
صفحه اصلی GitHub

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

تاخیر ورودی چیست؟

تأخیر ورودی دوره زمانی است که از زمانی که کاربر برای اولین بار با یک صفحه تعامل برقرار می کند - مانند ضربه زدن روی صفحه، کلیک کردن با ماوس یا فشار دادن یک کلید - تا زمانی که تماس های رویداد برای تعامل شروع به اجرا می کند. هر تعاملی با مقداری تاخیر ورودی آغاز می شود.

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

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

چگونه به تأخیر ورودی فکر کنیم

به طور کلی، شما می‌خواهید هر بخش از تعامل را تا حد امکان کوتاه نگه دارید تا وب‌سایت شما بدون در نظر گرفتن دستگاه کاربر، بهترین شانس برای رسیدن به آستانه «خوب» معیار Interaction to Next Paint (INP) را داشته باشد. بررسی تأخیر ورودی تنها بخشی از این آستانه است.

ممکن است وسوسه شوید که آستانه‌های تأخیر ورودی اول (FID) را برای تعیین محدودیتی برای تأخیرهای ورودی بررسی کنید - اما آستانه «خوب» برای FID 100 میلی‌ثانیه یا کمتر است. اگر از این آستانه عبور کنید، نیمی از بودجه خود را به INP تنها به تاخیر ورودی اختصاص می دهید. زمانی که فکر می‌کنید که یک تعامل برای اجرای تماس‌های رویداد و اینکه مرورگر فریم بعدی را نقاشی کند به زمان نیاز دارد، توصیه نمی‌شود.

برای رسیدن به آستانه "خوب" INP، باید کوتاه ترین تاخیر ورودی ممکن را هدف قرار دهید، اما نباید انتظار داشته باشید که آن را به طور کامل حذف کنید، زیرا غیرممکن است. تا زمانی که از کار بیش از حد با موضوع اصلی اجتناب می کنید، در حالی که کاربران سعی می کنند با صفحه شما تعامل داشته باشند، تاخیر ورودی شما باید به اندازه کافی کم باشد تا مشکلی ایجاد نشود.

چگونه تاخیر ورودی را به حداقل برسانیم

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

از تایمرهای تکرار شونده که باعث شروع بیش از حد کار نخ اصلی می شود، خودداری کنید

دو تابع تایمر متداول در جاوا اسکریپت وجود دارد که می تواند به تاخیر ورودی کمک کند: setTimeout و setInterval . تفاوت بین این دو در این است که setTimeout یک تماس برگشتی را برای اجرا پس از یک زمان مشخص برنامه ریزی می کند. از سوی دیگر، setInterval یک تماس برگشتی را به گونه‌ای برنامه‌ریزی می‌کند که هر n میلی‌ثانیه به‌طور دائم اجرا شود، یا تا زمانی که تایمر با clearInterval متوقف شود.

setTimeout به خودی خود مشکل ساز نیست - در واقع، می تواند برای اجتناب از کارهای طولانی مفید باشد. با این حال، این بستگی به زمانی دارد که مهلت زمانی رخ می‌دهد، و اینکه آیا کاربر تلاش می‌کند با صفحه در هنگام اجرای بازخوانی مهلت زمانی انجام شود یا خیر.

علاوه بر این، setTimeout می‌تواند در یک حلقه یا به صورت بازگشتی اجرا شود، جایی که بیشتر شبیه setInterval عمل می‌کند، اگرچه ترجیحاً تکرار بعدی را تا تکمیل قبلی برنامه‌ریزی نمی‌کند. در حالی که این بدان معناست که هر بار که setTimeout فراخوانی می‌شود، حلقه به رشته اصلی تسلیم می‌شود، باید مراقب باشید که تماس برگشتی آن در نهایت کار بیش از حد انجام ندهد.

setInterval در یک بازه زمانی یک تماس برگشتی را اجرا می‌کند و بنابراین احتمال بیشتری دارد که در مسیر تعامل قرار بگیرد. این به این دلیل است که - بر خلاف یک نمونه از یک تماس setTimeout ، که یک تماس برگشتی است که ممکن است مانع تعامل کاربر شود - ماهیت تکرارشونده setInterval باعث می‌شود که این احتمال بسیار بیشتر شود که در مسیر یک تماس قرار گیرد . تعامل، بنابراین تاخیر ورودی تعامل افزایش می یابد.

تصویری از نمایه‌ساز عملکرد در Chrome DevTools که تاخیر ورودی را نشان می‌دهد. وظیفه ای که توسط یک تابع تایمر انجام می شود درست قبل از اینکه کاربر تعامل کلیک را آغاز کند اتفاق می افتد. با این حال، تایمر تاخیر ورودی را افزایش می‌دهد و باعث می‌شود که تماس‌های رویداد تعامل دیرتر از زمانی که در غیر این صورت انجام می‌شد، اجرا شوند.
یک تایمر ثبت‌شده توسط یک تماس setInterval قبلی که به تأخیر ورودی کمک می‌کند، همانطور که در پانل عملکرد Chrome DevTools نشان داده شده است. تأخیر ورودی اضافه شده باعث می‌شود که تماس‌های رویداد برای تعامل دیرتر از زمانی که می‌توانستند اجرا شود.

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

از کارهای طولانی دوری کنید

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

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

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

مراقب همپوشانی تعامل باشید

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

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

منابع تعامل ممکن است به همین سادگی باشد که کاربران در مدت زمان کوتاهی تعاملات زیادی را انجام دهند. این می تواند زمانی رخ دهد که کاربران در فیلدهای فرم تایپ کنند، جایی که بسیاری از تعاملات صفحه کلید می تواند در مدت زمان بسیار کوتاهی رخ دهد. اگر کار روی یک رویداد کلیدی به ویژه گران است - مانند مورد رایج فیلدهای تکمیل خودکار که در آن درخواست‌های شبکه به یک صفحه پشتی ارسال می‌شود - چند گزینه دارید:

  • برای محدود کردن تعداد دفعاتی که یک رویداد در یک بازه زمانی معین اجرا می‌شود، ورودی‌های برگشتی را در نظر بگیرید.
  • از AbortController برای لغو درخواست‌های fetch خروجی استفاده کنید تا رشته اصلی در رسیدگی به تماس‌های fetch شلوغ نشود. توجه: ویژگی signal یک نمونه AbortController همچنین می تواند برای لغو رویدادها استفاده شود.

یکی دیگر از منابع افزایش تاخیر ورودی به دلیل تعاملات همپوشانی می تواند انیمیشن های گران قیمت باشد. به طور خاص، انیمیشن‌های جاوا اسکریپت ممکن است بسیاری از درخواست‌های requestAnimationFrame را اجرا کنند، که ممکن است مانع تعامل کاربر شود. برای دور زدن این موضوع، تا حد امکان از انیمیشن‌های CSS استفاده کنید تا از قرار گرفتن فریم‌های انیمیشن گران‌قیمت بالقوه در صف بپرهیزید – اما اگر این کار را انجام می‌دهید، مطمئن شوید که از انیمیشن‌های غیر ترکیبی اجتناب می‌کنید تا انیمیشن‌ها عمدتاً روی رشته‌های گرافیکی و کامپوزیتور اجرا شوند و نه روی رشته اصلی. .

نتیجه

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

تصویر قهرمان از Unsplash , اثر اریک مکلین .