Passiva händelselyssnare

Silktide läser in dina sidor i en riktig webbläsare och letar efter skript som lyssnar efter pek- och mushjulshändelser på ett sätt som kan fördröja rullning. Genom att markera dessa lyssnare som passiva kan webbläsaren börja rulla direkt.

När ett skript lyssnar efter pek- eller mushjulshändelser måste webbläsaren vänta på att skriptet körs innan den börjar rulla, ifall skriptet avbryter rullningen. På belastade sidor gör detta rullningen hackig eller långsam – en av de mest märkbara typerna av hackighet, särskilt på telefoner.

Varför detta är viktigt

Rullning är det vanligaste besökarna gör på en sida, och människor märker direkt när den inte är jämn. En sida som tvekar eller hackar under fingret känns trasig även när allt på den fungerar, och det intrycket blir starkast på mobila enheter, där pekrullning sker hela tiden.

Så åtgärdar du det

Markera pek- och mushjulslyssnare som passiva. Då lovar du webbläsaren att de aldrig kommer att avbryta rullningen:

// Blockerar rullning tills hanteraren har körts
document.addEventListener('touchstart', onTouchStart);

// Passiv: webbläsaren börjar rulla direkt
document.addEventListener('touchstart', onTouchStart, { passive: true });

Lägg till { passive: true } i dina egna lyssnare för touchstart, touchmove, wheel och mousewheel, såvida en lyssnare inte faktiskt anropar preventDefault() för att stoppa rullningen.
För rapporterade lyssnare i skript från tredje part kan du kontrollera om det finns en uppdaterad version av biblioteket eller ta upp det med leverantören – se kod från tredje part.

Alla moderna webbläsare stöder passiva lyssnare. Endast mycket gamla webbläsare behöver funktionsdetektering.

Så testar Silktide detta

Läs in sidan i en riktig webbläsare och hitta lyssnare för pek- och mushjulshändelser som inte är markerade som passiva och som kan fördröja rullningen.
Rapportera skriptet som innehåller varje sådan lyssnare, tillsammans med raden där den registreras.

Felsökning

Min lyssnare måste avbryta rullningen

En lyssnare som faktiskt anropar preventDefault() för att stoppa rullningen kan inte vara passiv – om du markerar den som passiv ignorerar webbläsaren anropet till preventDefault(). Om en rapporterad lyssnare verkligen måste avbryta rullningen är det korrekt att låta den vara icke-passiv. Överväg att begränsa var den kopplas så att den inte påverkar rullningen på andra delar av sidan.