نشانگر سفارشی چطور سایت را کند می‌کند (و چطور درستش کنیم)

مسئله چیست؟

نشانگر سفارشی معمولاً از سه لایه ساخته می‌شود: یک نقطه‌ی کوچک، یک حلقه‌ی دنبال‌کننده و یک هاله‌ی محو (glow). دو لایه‌ی اول سبک هستند، اما هاله‌ی محو اگر بزرگ باشد و روی آن filter: blur() یا mix-blend-mode اعمال شود، مرورگر مجبور می‌شود در هر فریم بخش بزرگی از صفحه را دوباره رنگ‌آمیزی کند.

وقتی یک مودال با backdrop-filter هم باز باشد، این هزینه چند برابر می‌شود؛ چون هر تغییر پیکسل زیر مودال، محاسبه‌ی مجدد بلور پس‌زمینه را هم تحمیل می‌کند. نتیجه همان حس «کندی و لگ» است.

سه اصلاح مؤثر

• اندازه‌ی هاله را کوچک‌تر کنید و filter: blur() را حذف کنید؛ گرادیان شعاعی نرم همان حس را بدون هزینه‌ی بلور می‌دهد.
• در حلقه‌ی requestAnimationFrame فقط زمانی استایل بنویسید که مقدار واقعاً تغییر کرده باشد؛ نوشتن بی‌دلیل در style باعث layout/paint اضافه می‌شود.
• وقتی مودال یا منوی تمام‌صفحه باز است، هاله را کامل مخفی کنید. کاربر آن را نمی‌بیند، ولی مرورگر هزینه‌اش را می‌پردازد.

نکته‌ی مهم دیگر: رویدادها

اگر موقعیت نشانگر را با mousemove ردیابی کنید، در لحظه‌ای که کاربر شروع به درگ کردن یک لینک یا تصویر می‌کند، مرورگر رویداد حرکت را قطع می‌کند و نشانگر سر جای اول «یخ» می‌زند. راه‌حل، استفاده از pointermove به‌همراه جلوگیری از درگ بومی با dragstart است.