بفهمید تأخیر ورودی چیست و تکنیکهایی را برای کاهش آن برای تعامل سریعتر بیاموزید.
تعاملات در وب چیزهای پیچیدهای هستند و انواع فعالیتها در مرورگر برای هدایت آنها رخ میدهد. با این حال، وجه مشترک همه آنها این است که قبل از شروع اجرای فراخوانیهای رویدادشان، مقداری تأخیر ورودی ایجاد میکنند. در این راهنما، یاد خواهید گرفت که تأخیر ورودی چیست و چه کاری میتوانید برای به حداقل رساندن آن انجام دهید تا تعاملات وبسایت شما سریعتر اجرا شوند.
تأخیر ورودی چیست؟
تأخیر ورودی ، دوره زمانی است که از زمانی که کاربر برای اولین بار با یک صفحه تعامل میکند - مانند ضربه زدن روی صفحه، کلیک کردن با ماوس یا فشار دادن یک کلید - تا زمانی که فراخوانیهای رویداد برای تعامل شروع به اجرا میکنند، آغاز میشود. هر تعاملی با مقداری تأخیر ورودی آغاز میشود.
بخشی از تأخیر ورودی اجتنابناپذیر است: همیشه مدتی طول میکشد تا سیستم عامل یک رویداد ورودی را تشخیص داده و آن را به مرورگر منتقل کند. با این حال، آن بخش از تأخیر ورودی اغلب حتی قابل توجه نیست و اتفاقات دیگری نیز در خود صفحه رخ میدهد که میتواند تأخیرهای ورودی را به اندازهای طولانی کند که باعث ایجاد مشکل شود.
چگونه در مورد تأخیر ورودی فکر کنیم
به طور کلی، شما میخواهید هر بخش از یک تعامل را تا حد امکان کوتاه نگه دارید تا وبسایت شما بهترین شانس را برای رسیدن به آستانه "خوب" معیار تعامل تا رنگ بعدی (INP) داشته باشد، صرف نظر از دستگاه کاربر. کنترل تأخیر ورودی تنها بخشی از رسیدن به آن آستانه است.
در نتیجه، شما باید برای رسیدن به آستانه «خوب» INP، کوتاهترین تأخیر ورودی ممکن را هدف قرار دهید. با این حال، باید توجه داشته باشید که نمیتوانید انتظار داشته باشید که تأخیرهای ورودی را به طور کامل از بین ببرید. تا زمانی که از کار بیش از حد نخ اصلی در حالی که کاربران سعی در تعامل با صفحه شما دارند، اجتناب میکنید، تأخیر ورودی شما باید به اندازه کافی کم باشد تا از بروز مشکلات جلوگیری شود.
چگونه تأخیر ورودی را به حداقل برسانیم
همانطور که قبلاً گفته شد، مقداری تأخیر ورودی اجتنابناپذیر است، اما از طرف دیگر، مقداری تأخیر ورودی قابل اجتناب است . در اینجا مواردی وجود دارد که اگر با تأخیرهای ورودی طولانی دست و پنجه نرم میکنید، باید در نظر بگیرید.
از تایمرهای تکراری که باعث شروع کار بیش از حد در نخ اصلی میشوند، خودداری کنید.
دو تابع تایمر رایج در جاوا اسکریپت وجود دارد که میتوانند در تأخیر ورودی نقش داشته باشند: setTimeout و setInterval . تفاوت بین این دو در این است که setTimeout یک فراخوانی برگشتی را برای اجرا پس از یک زمان مشخص برنامهریزی میکند. از سوی دیگر، setInterval یک فراخوانی برگشتی را برای اجرا در هر n میلیثانیه به طور دائم یا تا زمانی که تایمر با clearInterval متوقف شود، برنامهریزی میکند.
setTimeout به خودی خود مشکلساز نیست - در واقع، میتواند در جلوگیری از انجام وظایف طولانی مفید باشد. با این حال، بستگی به این دارد که timeout چه زمانی رخ میدهد و آیا کاربر هنگام اجرای فراخوانی timeout سعی در تعامل با صفحه دارد یا خیر.
علاوه بر این، setTimeout میتواند در یک حلقه یا به صورت بازگشتی اجرا شود، که در آن بیشتر شبیه setInterval عمل میکند، هرچند ترجیحاً تکرار بعدی را تا زمان تکمیل تکرار قبلی زمانبندی نمیکند. اگرچه این بدان معناست که حلقه هر بار که setTimeout فراخوانی میشود، به نخ اصلی تسلیم میشود، باید مراقب باشید که فراخوانی مجدد آن منجر به انجام کار بیش از حد نشود.
setInterval یک فراخوانی برگشتی را در یک بازه زمانی اجرا میکند و بنابراین احتمال بیشتری دارد که مانع تعاملات شود. دلیل این امر این است که - برخلاف یک نمونه واحد از فراخوانی setTimeout که یک فراخوانی برگشتی یکباره است و ممکن است مانع تعامل کاربر شود - ماهیت تکرارشونده تابع setInterval احتمال اینکه مانع تعامل شود را بسیار بیشتر میکند و در نتیجه تأخیر ورودی تعامل را افزایش میدهد.
setInterval ثبت شده و همانطور که در پنل عملکرد Chrome DevTools نشان داده شده است، در تأخیر ورودی نقش دارد. تأخیر ورودی اضافه شده باعث میشود که فراخوانیهای رویداد برای تعامل دیرتر از آنچه در غیر این صورت میتوانستند اجرا شوند.اگر تایمرها در کد شخص ثالث رخ میدهند، پس شما بر آنها کنترل دارید. ارزیابی کنید که آیا به آنها نیاز دارید یا تمام تلاش خود را برای کاهش کار در آنها تا حد امکان انجام دهید. با این حال، تایمرها در اسکریپتهای شخص ثالث داستان متفاوتی هستند. شما اغلب بر عملکرد یک اسکریپت شخص ثالث کنترلی ندارید و رفع مشکلات عملکرد در کد شخص ثالث اغلب شامل همکاری با ذینفعان برای تعیین اینکه آیا یک اسکریپت شخص ثالث خاص ضروری است یا خیر، و در این صورت، با یک فروشنده اسکریپت شخص ثالث تماس بگیرید تا مشخص شود چه کاری میتوان برای رفع مشکلات عملکردی که ممکن است در وبسایت شما ایجاد کنند، انجام داد.
از انجام کارهای طولانی خودداری کنید
یکی از راههای کاهش تأخیرهای ورودی طولانی، اجتناب از وظایف طولانی است. وقتی کار بیش از حد در نخ اصلی دارید که نخ اصلی را در طول تعاملات مسدود میکند، این امر به تأخیر ورودی برای آنها قبل از اینکه وظایف طولانی فرصت اتمام داشته باشند، میافزاید.
علاوه بر به حداقل رساندن میزان کاری که در یک وظیفه انجام میدهید - و شما همیشه باید تلاش کنید تا حد امکان کار کمتری روی نخ اصلی انجام دهید - میتوانید با شکستن وظایف طولانی، پاسخگویی به ورودی کاربر را بهبود بخشید.
به همپوشانی تعاملات توجه داشته باشید
یکی از چالشهای خاص بهینهسازی INP میتواند این باشد که آیا تعاملاتی دارید که با هم همپوشانی دارند. همپوشانی تعاملات به این معنی است که پس از تعامل با یک عنصر، قبل از اینکه تعامل اولیه فرصتی برای رندر فریم بعدی داشته باشد، تعامل دیگری با صفحه برقرار میکنید.
منابع تداخل تعاملی میتوانند به سادگیِ انجام تعاملات زیاد توسط کاربران در مدت زمان کوتاه باشند. این میتواند زمانی رخ دهد که کاربران در فیلدهای فرم تایپ میکنند، جایی که تعاملات زیادی با صفحه کلید میتواند در مدت زمان بسیار کوتاهی رخ دهد. اگر کار روی یک رویداد کلیدی بسیار پرهزینه باشد - مانند مورد رایج فیلدهای تکمیل خودکار که درخواستهای شبکه به یک back-end ارسال میشود - شما چند گزینه دارید:
- برای محدود کردن تعداد دفعات اجرای یک فراخوانی رویداد در یک دوره زمانی مشخص، حذف ورودیهای برگشتی را در نظر بگیرید.
-
AbortControllerبرای لغو درخواستهایfetchخروجی استفاده کنید تا نخ اصلی در مدیریت فراخوانیهایfetchدچار ازدحام نشود. نکته: از ویژگیsignalدر یک نمونهAbortControllerمیتوان برای لغو رویدادها نیز استفاده کرد.
یکی دیگر از منابع افزایش تأخیر ورودی به دلیل تداخل تعاملات میتواند انیمیشنهای پرهزینه باشد. به طور خاص، انیمیشنها در جاوا اسکریپت ممکن است فراخوانیهای requestAnimationFrame زیادی را اجرا کنند که ممکن است در مسیر تعاملات کاربر قرار گیرند. برای حل این مشکل، هر زمان که ممکن است از انیمیشنهای CSS استفاده کنید تا از صفبندی فریمهای انیمیشن بالقوه پرهزینه جلوگیری شود - اما اگر این کار را انجام میدهید، مطمئن شوید که از انیمیشنهای غیرکامپوزیت شده اجتناب میکنید تا انیمیشنها عمدتاً روی رشتههای GPU و کامپوزیتور اجرا شوند و نه روی رشته اصلی.
نتیجهگیری
اگرچه ممکن است تأخیرهای ورودی بخش عمدهای از زمان اجرای تعاملات شما را تشکیل ندهند، اما درک این نکته مهم است که هر بخش از یک تعامل، زمانی را اشغال میکند که میتوانید آن را کاهش دهید. اگر تأخیر ورودی طولانی را مشاهده میکنید، فرصتهایی برای کاهش آن دارید. اجتناب از فراخوانیهای مکرر تایمر، تقسیم وظایف طولانی و آگاهی از همپوشانیهای احتمالی تعاملات، همگی میتوانند به شما در کاهش تأخیر ورودی کمک کنند و منجر به تعامل سریعتر برای کاربران وبسایت شما شوند.
تصویر قهرمان از Unsplash ، اثر اریک مککلین .