Veel sites en apps moeten veel scripts uitvoeren. Vaak moet uw JavaScript zo snel mogelijk worden uitgevoerd, maar tegelijkertijd wilt u niet dat het de gebruiker in de weg zit. Als u analysegegevens verzendt wanneer de gebruiker door de pagina scrollt, of als u elementen aan de DOM toevoegt terwijl deze op de knop tikt, reageert uw webapp mogelijk niet meer, wat resulteert in een slechte gebruikerservaring.
Het goede nieuws is dat er nu een API is die kan helpen: requestIdleCallback . Op dezelfde manier waarop requestAnimationFrame ons in staat stelde animaties goed te plannen en onze kansen op 60 fps te maximaliseren, plant requestIdleCallback werk wanneer er vrije tijd is aan het einde van een frame, of wanneer de gebruiker inactief is. Dit betekent dat er een mogelijkheid is om uw werk te doen zonder de gebruiker in de weg te staan. Het is beschikbaar vanaf Chrome 47, dus je kunt er vandaag nog mee experimenteren door Chrome Canary te gebruiken! Het is een experimentele functie en de specificaties zijn nog steeds in beweging, dus er kunnen in de toekomst dingen veranderen.
Waarom zou ik requestIdleCallback gebruiken?
Zelf niet-essentiële werkzaamheden inplannen is erg lastig. Het is onmogelijk om precies te achterhalen hoeveel frametijd er nog overblijft, omdat nadat requestAnimationFrame -callbacks zijn uitgevoerd, er stijlberekeningen, lay-out, verf en andere browser-internals moeten worden uitgevoerd. Een thuisgerolde oplossing kan daar geen rekening mee houden. Om er zeker van te zijn dat een gebruiker op de een of andere manier geen interactie heeft, moet je ook luisteraars koppelen aan elk soort interactiegebeurtenis ( scroll , touch , click ), zelfs als je ze niet nodig hebt voor de functionaliteit, zodat je er absoluut zeker van kunt zijn dat de gebruiker geen interactie heeft. De browser daarentegen weet precies hoeveel tijd er aan het einde van het frame beschikbaar is en of de gebruiker interactie heeft, en dus krijgen we via requestIdleCallback een API waarmee we onze vrije tijd op de meest efficiënte manier kunnen gebruiken.
Laten we er wat gedetailleerder naar kijken en kijken hoe we er gebruik van kunnen maken.
Controleren op requestIdleCallback
Het is een vroege dag voor requestIdleCallback , dus voordat u het gebruikt, moet u controleren of het beschikbaar is voor gebruik:
if ('requestIdleCallback' in window) {
// Use requestIdleCallback to schedule work.
} else {
// Do what you’d do today.
}
Je kunt het gedrag ook opvullen, waarvoor je terug moet vallen op setTimeout :
window.requestIdleCallback =
window.requestIdleCallback ||
function (cb) {
var start