کنترلکنندههای ورودی میتوانند علت بالقوه مشکلات عملکردی در برنامههای شما باشند، زیرا میتوانند مانع از تکمیل فریمها شوند و باعث ایجاد کارهای اضافی و غیرضروری در طرحبندی شوند.
کنترلکنندههای ورودی میتوانند علت بالقوه مشکلات عملکردی در برنامههای شما باشند، زیرا میتوانند مانع از تکمیل فریمها شوند و باعث ایجاد کارهای اضافی و غیرضروری در طرحبندی شوند.
خلاصه
- از مدیریتکنندههای ورودی طولانی مدت خودداری کنید؛ آنها میتوانند پیمایش را مسدود کنند.
- در کنترلکنندههای ورودی، تغییرات سبک ایجاد نکنید.
- کنترلکنندههای خود را غیرفعال کنید؛ مقادیر رویداد را ذخیره کنید و با تغییرات سبک در فراخوانی بعدی requestAnimationFrame مقابله کنید.
از مدیریتکنندههای ورودی طولانیمدت اجتناب کنید
در سریعترین حالت ممکن، وقتی کاربر با صفحه تعامل میکند، رشتهی ترکیبکنندهی صفحه میتواند ورودی لمسی کاربر را دریافت کرده و به سادگی محتوا را جابجا کند. این کار نیازی به کار رشتهی اصلی ندارد، جایی که جاوا اسکریپت، طرحبندی، استایلها یا رنگآمیزی انجام میشود.
با این حال، اگر یک کنترلکننده ورودی مانند touchstart ، touchmove یا touchend را پیوست کنید، رشته کامپوزیتور باید منتظر بماند تا اجرای این کنترلکننده تمام شود، زیرا ممکن است شما preventDefault() را فراخوانی کرده و از انجام اسکرول لمسی جلوگیری کنید. حتی اگر preventDefault() را فراخوانی نکنید، کامپوزیتور باید منتظر بماند و به این ترتیب اسکرول کاربر مسدود میشود که میتواند منجر به وقفه و از دست رفتن فریمها شود.
به طور خلاصه، باید مطمئن شوید که هر کنترلکننده ورودی که اجرا میکنید، باید به سرعت اجرا شود و به کامپوزیتور اجازه دهد کار خود را انجام دهد.
از تغییرات سبک در کنترلکنندههای ورودی جلوگیری کنید
کنترلکنندههای ورودی، مانند آنهایی که برای اسکرول و لمس استفاده میشوند، طوری برنامهریزی شدهاند که درست قبل از هرگونه فراخوانی requestAnimationFrame اجرا شوند.
اگر در داخل یکی از این هندلرها تغییر بصری ایجاد کنید، در شروع requestAnimationFrame ، تغییرات سبک در انتظار خواهند بود. اگر سپس ویژگیهای بصری را در ابتدای فراخوانی requestAnimationFrame بخوانید، همانطور که توصیهی « از طرحبندیهای بزرگ و پیچیده و درهمریختگی طرحبندی اجتناب کنید » نشان میدهد، یک طرحبندی همگامسازی اجباری را فعال خواهید کرد!
کنترلکنندههای اسکرول خود را غیرفعال کنید
راه حل هر دو مشکل بالا یکسان است: شما همیشه باید تغییرات بصری را در فراخوانی بعدی requestAnimationFrame دیبانس کنید:
function onScroll (evt) {
// Store the scroll value for laterz.
lastScrollY = window.scrollY;
// Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return;
scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
}
window.addEventListener('scroll', onScroll);
انجام این کار همچنین این مزیت اضافی را دارد که کنترلکنندههای ورودی شما را سبک نگه میدارد، که بسیار عالی است زیرا اکنون شما چیزهایی مانند پیمایش یا لمس را در کد محاسباتی پرهزینه مسدود نمیکنید!