Het rendererproces van de browser verandert uw code in een webpagina waarmee uw gebruikers kunnen communiceren. Standaard verwerkt de hoofdthread van het rendererproces doorgaans de meeste code: het parseert de HTML en bouwt de DOM, parseert de CSS en past de opgegeven stijlen toe, en parseert, evalueert en voert JavaScript uit.
De hoofdthread verwerkt ook gebruikersgebeurtenissen. Dus elke keer dat de hoofdlijn bezig is met iets anders, reageert uw webpagina mogelijk niet op gebruikersinteracties, wat tot een slechte ervaring leidt.
Hoe de Lighthouse-hoofdlijnwerkaudit mislukt
Lighthouse markeert pagina's die de hoofdthread langer dan 4 seconden bezet houden tijdens het laden:
Om u te helpen de bronnen van de hoofdthreadbelasting te identificeren, toont Lighthouse een overzicht van waar de CPU-tijd werd besteed terwijl de browser uw pagina laadde.
Hoe u hoofddraadwerk kunt minimaliseren
De onderstaande secties zijn georganiseerd op basis van de categorieën die Lighthouse rapporteert. Zie De anatomie van een frame voor een overzicht van hoe Chromium webpagina's weergeeft.
Zie Minder hoofdthreadwerk doen om te leren hoe u Chrome DevTools kunt gebruiken om te onderzoeken wat uw hoofdthread precies doet terwijl de pagina wordt geladen.
Scriptevaluatie
Stijl en lay-out
- Verminder de reikwijdte en complexiteit van stijlberekeningen
- Vermijd grote, complexe lay-outs en het geselen van de lay-out
Weergave
- Houd u aan de eigenschappen van alleen de compositor en beheer het aantal lagen
- Vereenvoudig de complexiteit van verf en verminder verfoppervlakken