De continue schildermodus voor verfprofilering is nu beschikbaar in Chrome Canary . In dit artikel wordt uitgelegd hoe u een probleem met de tekentijd van pagina's kunt identificeren en hoe u dit nieuwe hulpmiddel kunt gebruiken om knelpunten in de tekenprestaties op te sporen.
Onderzoek naar de schildertijd op uw pagina
Je hebt dus gemerkt dat je pagina niet soepel scrollt. Dit is hoe je het probleem zou kunnen aanpakken. Voor ons voorbeeld gebruiken we de demopagina Things We Left On The Moon van Dan Cederholm als voorbeeld.
Je opent de Web Inspector, start een tijdlijnopname en scrollt je pagina op en neer. Vervolgens kijk je naar de verticale tijdlijnen, die laten zien wat er in elk frame is gebeurd.
Als je ziet dat de meeste tijd wordt besteed aan schilderen (grote groene balken boven 60 fps), moet je nader bekijken waarom dit gebeurt. Om uw verven te onderzoeken, gebruikt u de instelling Verfrechthoeken weergeven van de Web Inspector (tandwielpictogram in de rechteronderhoek van de Web Inspector). Dit toont u de regio's waar Chrome schildert.
Er zijn verschillende redenen waarom Chrome delen van de pagina opnieuw tekent:
- DOM-knooppunten worden gewijzigd in JavaScript, waardoor Chrome de lay-out van de pagina opnieuw berekent.
- Er worden animaties afgespeeld die worden bijgewerkt in een op frames gebaseerde cyclus.
- Gebruikersinteractie, zoals zweven, veroorzaakt stijlveranderingen bij bepaalde elementen.
- Elke andere bewerking die ervoor zorgt dat de pagina-indeling verandert.
Als ontwikkelaar moet u op de hoogte zijn van de herschilderingen op uw pagina. Kijken naar de verfrechthoeken is een geweldige manier om dat te doen. In het bovenstaande voorbeeldscherm kun je zien dat het hele scherm bedekt is met een grote verfrechthoek. Dit betekent dat het hele scherm opnieuw wordt geverfd terwijl je scrolt, wat niet goed is. In dit specifieke geval wordt dit veroorzaakt door de CSS-stijl background-attachment:fixed , die ervoor zorgt dat de achtergrondafbeelding van de pagina op dezelfde positie blijft terwijl de inhoud van de pagina erbovenop beweegt terwijl je scrollt.
Als u vaststelt dat het opnieuw schilderen een groot gebied bestrijkt en/of lang duurt, heeft u twee opties:
- U kunt proberen de pagina-indeling te wijzigen om de hoeveelheid verf te verminderen. Indien mogelijk schildert Chrome de zichtbare pagina slechts één keer en voegt onderdelen toe die niet zichtbaar waren terwijl u naar beneden scrolde. Er zijn echter gevallen waarin Chrome bepaalde gebieden opnieuw moet schilderen. De CSS-regel
position:fixed, die vaak wordt gebruikt voor navigatie-elementen die op dezelfde positie blijven, kan deze herschilderingen veroorzaken. - Als u uw pagina-indeling wilt behouden, kunt u proberen de schilderkosten van de gebieden die opnieuw worden geverfd te verlagen. Niet elke CSS-stijl heeft dezelfde schilderkosten, sommige hebben weinig impact, andere veel. Het berekenen van de schilderkosten van bepaalde stijlen kan veel werk zijn. Je kunt dit doen door tussen stijlen te wisselen in het Elementenpaneel en te kijken naar het verschil in de tijdlijnopname, wat betekent dat je tussen panelen moet schakelen en veel opnames moet maken. Dit is waar de continue schildermodus een rol speelt.
Continue schildermodus
De modus voor continu schilderen is een hulpmiddel waarmee u kunt identificeren welke elementen kostbaar zijn op de pagina. Het brengt de pagina in een staat die altijd opnieuw wordt geschilderd, en toont een teller van hoeveel schilderwerk er gebeurt. Vervolgens kun je elementen verbergen en stijlen muteren, terwijl je naar de teller kijkt, om erachter te komen wat traag is.
Installatie
Om de continue tekenmodus te gebruiken, moet je Chrome Canary gebruiken.
Op Linux- systemen (en sommige Macs) moet je ervoor zorgen dat Chrome in de compositiemodus draait. Dit kan permanent worden ingeschakeld met behulp van de GPU-compositie op alle pagina's in about:flags .
Hoe te beginnen
De modus voor continu tekenen kan worden ingeschakeld via het selectievakje Continu opnieuw schilderen van pagina's inschakelen in de instellingen van de Web Inspector (tandwielpictogram in de rechteronderhoek van de Web Inspector).
Op het kleine display rechtsboven zie je de gemeten verftijden in milliseconden. Meer specifiek blijkt:
- Links de laatst gemeten verftijd.
- Het minimum en maximum van de huidige grafiek aan de rechterkant.
- Een staafdiagram dat de geschiedenis van de laatste 80 frames onderaan weergeeft (de lijn in het diagram geeft 16 ms aan als referentiepunt).
De verftijdmetingen zijn afhankelijk van de schermresolutie, venstergrootte en de hardware waarop Chrome draait. Houd er rekening mee dat deze zaken waarschijnlijk anders zijn voor uw gebruikers.
Werkstroom
Zo kunt u de continue schildermodus gebruiken om elementen en stijlen op te sporen die veel schilderkosten met zich meebrengen:
- Open de instellingen van Web Inspector en vink Continu opnieuw schilderen van pagina's inschakelen aan .
- Ga naar het paneel Elementen en doorloop de DOM-structuur met de pijltoetsen of door elementen op de pagina te selecteren.
- Gebruik de H-sneltoets , een nieuw geïntroduceerde helper, om de zichtbaarheid van een element in of uit te schakelen.
- Kijk naar de verftijdgrafiek en probeer een element te ontdekken dat veel schildertijd toevoegt.
- Doorloop de CSS-stijlen van dat element, schakel ze aan en uit terwijl je naar de grafiek kijkt, om de stijl te vinden die de vertraging veroorzaakt.
- Wijzig deze stijl en maak nog een tijdlijnopname om te controleren of uw pagina hierdoor beter presteert.
De onderstaande animatie toont het schakelen tussen stijlen en de invloed ervan op de tekentijd:
Dit voorbeeld laat zien hoe het uitschakelen van een van de CSS-stijlen box-shadow of border-radius de tekentijd aanzienlijk verkort. Het gebruik van zowel box-shadow als border-radius op een element leidt tot zeer dure schilderbewerkingen, omdat Chrome hiervoor niet kan optimaliseren. Dus als je een element hebt dat veel opnieuw wordt geverfd, zoals in het voorbeeld, moet je deze combinatie vermijden.
Opmerkingen
De modus voor continu schilderen schildert de hele zichtbare pagina opnieuw. Dit is meestal niet het geval wanneer u door een webpagina bladert. Door te scrollen worden meestal alleen de delen geschilderd die nog niet eerder zichtbaar waren. En voor andere wijzigingen op de pagina wordt alleen het kleinst mogelijke gebied opnieuw geverfd. Controleer dus met een andere tijdlijnopname of uw stijlverbeteringen daadwerkelijk invloed hebben gehad op de tekentijden van uw pagina.
Wanneer u continuous painting mode gebruikt, ontdekt u misschien dat bijvoorbeeld de CSS-stijlen border-radius en box-shadow veel tekentijd toevoegen. Het wordt niet afgeraden om deze functies in het algemeen te gebruiken, ze zijn geweldig en we zijn blij dat ze er eindelijk zijn. Maar het is belangrijk om te weten wanneer en waar u ze moet gebruiken. Gebruik ze niet in gebieden met veel herschilderingen en vermijd overmatig gebruik ervan in het algemeen.
Live-demo
Klik hieronder voor een demo waarin Paul Irish continu schilderen gebruikt om een uniek dure verfbewerking te identificeren.