Browser schilderen en overwegingen voor het web performance

0
24

Het proces van een webbrowser draaien HTML, CSS en JavaScript in een visuele representatie is vrij complex en het gaat om een stuk van de magie. Hier is een vereenvoudigde reeks van stappen die de browser gaat door:

  1. De Browser maakt de DOM en CSSOM.
  2. De Browser maakt de render tree, waar de DOM en de stijlen van de CSSOM zijn genomen (display: none elementen worden vermeden).
  3. Browser berekent de geometrie van de lay-out en de elementen op basis van de render tree.
  4. Browser verf pixel per pixel te maken van de visuele representatie die we zien op het scherm.

In dit artikel wil ik focussen op het laatste deel: de schilderkunst.

Al deze stappen samen is veel werk voor een browser op te laden… en eigenlijk niet alleen op te laden, maar elke keer als de DOM (of CSSOM) is gewijzigd. Dat is de reden waarom vele web ontwikkelaars hebben de neiging om gedeeltelijk oplossen door het gebruik van een soort van front-end framework, zoals het Reageren die, naast vele andere voordelen, kan helpen om sterk te optimaliseren veranderingen in de DOM om te voorkomen dat onnodige herberekenen of renderen.

Je hebt misschien gehoord van termen als staat, component rendering, of onveranderlijkheid. Alle degenen die iets te maken hebben met de optimalisatie van de DOM veranderingen, of in andere woorden, om alleen wijzigingen op de DOM wanneer het nodig is.

Om een voorbeeld te geven, de staat van een web-applicatie kunnen veranderen, en dat zou leiden tot een verandering in de GEBRUIKERSINTERFACE. Echter, sommige (of veel) onderdelen zijn niet beïnvloed door deze wijziging. Wat Reageren helpt om te doen is het beperken van het schrijven van de DOM voor elementen die zijn eigenlijk beïnvloed door een verandering in de toestand en uiteindelijk beperken van de weergave tot in het kleinste deel van de web-applicatie mogelijk:

DOM/CSSOM → render tree → opmaak → schilderen

Echter, de browser schilderij is speciaal op zijn eigen manier, als het kan zelfs gebeuren zonder wijzigingen aan te brengen aan de DOM en/of CSSOM.

Voorbeeld van de pagina prestaties samenvatting

Het bovenstaande diagram werd gegenereerd met behulp van Chrome deelvenster prestaties in DevTools (later meer daarover) en het laat zien hoe veel tijd is genomen door elke taak in de browser in de opgenomen tijd (0-7.12 s) na het herladen van een pagina. Zoals u kunt zien, schilderen vindt een aanzienlijk deel, en dat is niet automatisch een slechte zaak. In dit specifieke voorbeeld is de verhoogde schilderij wordt veroorzaakt door een combinatie van geanimeerde Gif ‘ s op de pagina van canvas tekenen (op 60 fps), waar zowel veroorzaken geen veranderingen aan de DOM of haar stijlen, terwijl nog steeds het triggeren van de schilderkunst.

Een ander goed voorbeeld van een functie die kan leiden tot een schilderij zonder enige interventie van buitenaf is de CSS animatie eigendom, en vergeleken met animated GIF of canvas, is het waarschijnlijk vaker op het web. Een animatie wordt meestal veroorzaakt door input van de gebruiker, zoals zweven, maar dankzij de animatie en @keyframes regels, we kunnen zelfs behoorlijk complexe animaties draait constant op de pagina, zonder veel van een inspanning, die is best wel geweldig.

Wat sommigen misschien niet beseffen, is dat die animaties kan gemakkelijk uit de hand lopen en voortdurend trigger schilderij, en dat kost ons veel rekenkracht. Natuurlijk, zijn er enkele regels die kunnen worden gebruikt om te voorkomen dat schilderij. Meest voor de hand liggende is het beperken van de manipulatie van elementen te CSS transformeren en dekking eigenschappen, die standaard niet leiden tot verf, tenzij er bijzondere omstandigheden zijn, zoals het animeren van een SVG-pad.

Verf knipperen

U waarschijnlijk weet dat Chrome DevTools. Wat je misschien niet weet over is een beetje snelkoppeling (Shift+Cmd+P op een Mac of Ctrl+Shift+P op de PC) die gebruikt kunnen worden binnen DevTools te brengen tot een kleine zoekbalk en commando-menu.

Commando Menu

Ik ben begonnen met het graven rond, en afgezien van de vele andere nuttige en ongelooflijk interessante opties, een render paneel mijn aandacht trok.

Render Paneel

Op het eerste gezicht, zie je een aantal interessante opties die kunnen zeer nuttig zijn als het gaat om het debuggen animatie op het web, zoals een FPS meter.

FPS meter

Laag grenzen en verf knipperende zijn ook interessante programma ‘ s. Laag grenzen zijn gebruikt voor het weergeven van de randen van de lagen zoals ze worden weergegeven door de browser zodat eventuele transformatie of verandering in de grootte is gemakkelijk te herkennen. Verf knipperen dient om de aandacht van de webpagina waar de browser wordt gedwongen om te schilderen.

Verf knipperen

Na het ontdekken van de verf te knipperen, het eerste wat ik deed was op een project van mij. In de meeste plaatsen was er geen probleem. Bijvoorbeeld, een beweging geactiveerd door te scrollen op de website werd aangedreven door de CSS-transform-eigenschap, die als we vallen, veroorzaken niet schilderen. Het schilderij was aanwezig waar men zou verwachten dat het, zoals wijzigingen in tekst, kleur van de muisaanwijzer, maar dat is niet iets dat moet worden veel van een zorg vanwege de ruimte en de aanwezigheid alleen op de muisaanwijzer van het element. Kortom, u vindt altijd wel iets te verbeteren, zelfs als u de code geschreven gisteren…

Maar één ding was een klap in het gezicht.

Het maakt niet uit hoe ervaren of voorzichtig je ook bent, u kan het meest waarschijnlijk — een fout maken. Wij zijn gewoon mensen en sommigen beweren dat de vaststelling van uw eigen fouten is dat het merendeel van de taak als het gaat om ontwikkeling. Echter, voor een bug te repareren, moeten we ons bewust van… en dat is precies waar de render paneel helpt.

Case study

Laten we een kijkje nemen naar het werkelijke probleem. Het ontwerp kwam met het verzoek voor een drukke achtergrond. Dat soort effect dat oude Tv ‘ s hadden toen was er geen signaal is.

Het is bekend dat Gif ‘ s hebben veel problemen, waar de prestatie is zeker een van hen, zodat ik zeker niet kon gebruiken voor een hele pagina-achtergrond. Als u wilt om wat meer te lezen over het waarom te vermijden, Gif ‘ s, hier is een goede bron met een heleboel redenen.

Met behulp van JavaScript is zeker een optie in dit geval. Het weergeven of verbergen van elementen met een iets verplaatst achtergrond was het eerste ding dat kwam in mijn gedachten, en door het gebruik van canvas kan ook helpen. Echter, dit alles leek een beetje overkill voor het hebben van een achtergrond. Ik besloot te gaan voor een CSS-only benadering.

Mijn oplossing was om een kleine “luidruchtige” PNG-afbeelding als achtergrond-afbeelding op de achtergrond inschakelen-herhalen en gooien het over een één-kleur achtergrond. Hoe ben ik te bereiken het noise effect? Met oneindig veel CSS animatie! Door het instellen van de achtergrond-positie naar de andere waarde over de periode van 200 milliseconden. Hier is hoe dat bleek:

Zie de Pen MXoddr door Georgy Martsjoek (@gmrchk) op CodePen.

Kunt u raden het probleem? Het leek een heel elegante oplossing voor mij, en ik was enthousiast over mijn prestatie van te maken, zonder een crappy GIF en zelfs niet een enkele lijn van JavaScript. Gewoon simpel CSS die is geoptimaliseerd voor browsers deze dagen.

Goed, de verf te knipperen bleek er iets heel anders. De laag van de grootte van het venster werd voortdurend te schilderen, zonder dat de gebruiker nog iets te doen. U kunt zien dat de verf te knipperen in de demo hierboven als u deze inschakelen in de render paneel (let op dat de verf knippert niet in de ingesloten pen.)

Zonder verf knipperen (links) vs. met verf knipperend (rechts)

Dat is zeker niet goed te spelen met de prestaties van de website en het riool laptop accu alsof er geen morgen.

CPU-gebruik voor de animatie gedaan met background-position (boven) en de transformatie (onderkant)

Dit alles CPU-gebruik kunnen vermeden worden door het vervangen van de wijzigingen van de achtergrond-positie met behulp van transformatie en transparantie.

Zie de Pen XYOYGm door Georgy Martsjoek (@gmrchk) op CodePen.

Het probleem

Ik ben bezig met website ontwikkeling voor een tijdje en ik wist heel goed dat het animeren van een achtergrond is nooit een goed idee. Dit voelde als een rookie fout. Mensen maken fouten… maar dat is niet het hele verhaal. De website was al laggy en oncomfortabel om in te navigeren. Hoe heb ik het mis?

Iets dat speelt zeker een grote rol speelt is het feit dat ik (en jij misschien ook) een beetje verwend als het gaat om de ontwikkeling van de apparatuur. Ik heb een mooie, krachtige computer voor het werk en de toegang tot snel internet. Tenzij we schrijven een aantal echt crappy code, alles wat we schrijven loopt vrij soepel in onze ogen. Maar dat is niet altijd het geval te zijn voor onze gebruikers.

Een vergelijkbaar probleem geldt voor veel andere dingen — zoals de grootte van de vertoning. Met een beetje overdrijving, terwijl we aan het ontwikkelen zijn op het 27″ display met een resolutie van 4K en het krijgen van de ontwerpen vooral voor 1920×1080, onze gasten komen voornamelijk uit 1366×768 laptops en hebben een compleet andere workflow als het gaat om het gebruik van een computer.

Conclusie

Terwijl dit artikel begon als een stuk over het schilderen, het belangrijkste onderwerp is echt veel meer over zijn zich bewust van de impact die onze code heeft op het schilderij proces of de prestaties in het algemeen. Tijdens het schilderen dient als een goed voorbeeld van iets dat kan problematisch zijn en gemakkelijk gemist, het is meer een discrepantie tussen ontwikkelaar en gebruiker, dat is het probleem.

Het web is een plek van vele omgevingen, waar de ontwikkelaar dat de omgeving vaak heel anders dan die van de gebruiker. Hoewel er geen noodzaak om te veranderen onze manieren of switch te lui computers, het helpt zeker om te zien dat ons werk op de manier die het door anderen gezien wordt van tijd tot tijd. Mijn suggestie is: wanneer kom je thuis van het werk en een beetje vrije tijd proberen te halen uw oude computer en controleer je er te werken, om een beetje dichter bij wat uw gebruikers ervaring.

Als je niet dit soort van computer rond, tools, zoals render paneel kan blijken te zijn hartstikke handig.