لتحسين أداء التمرير/التكبير/التصغير في wheel، ننصح المطوّرين
بتسجيل أدوات معالجة أحداث wheel وmousewheel على أنّها سلبية
من خلال ضبط الخيار {passive: true} على addEventListener(). إنّ تسجيل
أدوات معالجة الأحداث على أنّها سلبية يُعلم المتصفّح بأنّ أدوات معالجة عجلة الماوس لن
تستدعي preventDefault()، ويمكن للمتصفّح تنفيذ الانتقال للأعلى أو للأسفل
والتكبير أو التصغير بأمان بدون حظر أدوات المعالجة.
تكمن المشكلة في أنّ أدوات الاستماع إلى أحداث عجلة الماوس تكون في أغلب الأحيان
سلبية من الناحية المفاهيمية (لا تستدعي preventDefault()) ولكن لا يتم تحديدها صراحةً على أنّها
كذلك، ما يتطلّب من المتصفّح الانتظار حتى تنتهي معالجة أحداث JavaScript قبل
بدء الانتقال/التكبير/التصغير حتى لو لم يكن الانتظار ضروريًا. في الإصدار 56 من Chrome،
تم حلّ هذه المشكلة في touchstart وtouchmove،
واعتمد كل من Safari وFirefox هذا التغيير لاحقًا. كما يمكنك الاطّلاع عليه
في الفيديو التوضيحي الذي أنشأناه في ذلك الوقت، فإنّ ترك السلوك على ما هو عليه
كان يؤدي إلى تأخير ملحوظ في استجابة الانتقال للأعلى أو للأسفل. في الإصدار 73 من Chrome،
طبّقنا الإجراء نفسه على حدثَي wheel وmousewheel.
التدخل
هدفنا من هذا التغيير هو تقليل الوقت الذي يستغرقه تحديث الشاشة
بعد أن يبدأ المستخدم في الانتقال للأعلى أو للأسفل باستخدام عجلة الماوس أو لوحة اللمس، بدون أن يحتاج المطوّرون
إلى تغيير الرمز البرمجي. تُظهر مقاييسنا أنّ% 75 من مستمعي حدثَي wheel وmousewheel
المسجّلين على استهدافات الجذر (النافذة أو المستند أو النص)
لا يحدّدون أي قيم للخيار السلبي، وأكثر من% 98 من هؤلاء
المستمعين لا يُطلِقون preventDefault(). في الإصدار 73 من Chrome، سنغيّر مستمعَي
wheel وmousewheel المسجَّلين على استهدافات الجذر (window أو
document أو body) ليصبحا سلبيَين تلقائيًا. هذا يعني أنّ أداة معالجة الحدث
مثل:
window.addEventListener("wheel", func);
تصبح مساوية لما يلي:
window.addEventListener("wheel", func, {passive: true});
وسيتم تجاهل استدعاء preventDefault() داخل المستمع مع
تحذير "أدوات المطوّرين" التالي:
[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
الكسر والإرشادات
في الغالبية العظمى من الحالات، لن يتم ملاحظة أيّ انقطاع. في حالات نادرة فقط،
(أقل من% 0.3 من الصفحات وفقًا لمقاييسنا)، قد يحدث التمرير/التكبير/التصغير العميق العميق
بسبب تجاهل طلب preventDefault() داخل
المستمعين الذين يتم التعامل معهم على أنّهم سلبيون تلقائيًا. يمكن لتطبيقك تحديد ما إذا كان قد واجه هذه المشكلة في الوقت الحالي من خلال التحقّق مما إذا كان استدعاء preventDefault() قد أدى إلى أي تأثير من خلال الموقع الإلكتروني defaultPrevented. إنّ إصلاح الحالات المتأثرة بالخطأ سهل نسبيًا: ما عليك سوى تمرير {passive: false} إلى
addEventListener() لإلغاء السلوك التلقائي والحفاظ على مستمع حدث
ك كحاجب.