Readymag Under hætten: hurtigere implementering af lodret visning

I december 2017 lancerede Readymag Faster Vertical Viewer, der muliggør en jævnere oplevelsesoplevelse til projekter med faste widgets og tunge animationer. I denne artikel beskriver Readymag produktdesigner Eugene Petrov, hvordan vi gjorde det, og hvad vi opnåede.

Det hele var let først

I 2013 startede Readymag med en enkelt Horizontal Viewer. Et projekt, der bruger denne type fremviser, præsenterer et sæt lodrette sider, mellem hvilke læseren skifter mellem navigationspile til venstre og til højre på siden. I et vandret viewer-projekt kunne hver enkelt side også rulles lodret fra top til bund, hvis den ikke passer til skærmen.

Sider i vandret visning

Derefter introducerede vi faste widgets - de holder sig til en bestemt position i browservinduet og bevæger sig ikke, når siden rulles. Men når du flytter til en anden side, er faste widgets ude af visningen sammen med den forrige side, hvor de hører hjemme. Til todimensionel rulning var det nok at bruge bredt understøttet ‘position: fast’ CSS-egenskab.

Beyond the Horizontal Viewer

Der opstod problemer, da vi begyndte at stable sider oven på hinanden for at præsentere dem i en ny lodret visning.

Sider i lodret fremviser

I dette tilfælde skal faste widgets forblive på skærmen, mens deres side rulles. Men de skulle komme ud af visningen, når en ny side vises - ikke fra siden som i vandrette rulleprojekter, men fra bunden af ​​skærmen. Egenskaben 'position: fast' kunne ikke løse denne opgave: elementer er ikke længere ubetinget rettet langs sidens højde (lodret akse), men skal kontrollere, om der kommer en ny side og ændre deres tilstand i overensstemmelse hermed fra at være fastgjort til at være statisk.

For at løse dette problem måtte vi efterligne ‘position: sticky’ med vores egen implementering af javascript. Koden flytter sider lodret, når læseren ruller gennem dem og flytter faste widgets sammen med deres container.

Ulemperne dukkede uundgåeligt op med de nylige opdateringer i browsere. Da vi implementerede vores egen rulleopførsel med javascript var browsere ikke i stand til at forudsige placeringen af ​​elementerne og optimere gengivelsesprocessen. Hver indholdsbevægelse forårsagede fuld vinduesmaling: processen, der kræver større hukommelse og øger CPU- og GPU-belastninger markant. På sin side halterede animationer undertiden under rulle, fordi browsere ikke fyrede 'onscroll'-begivenheden på hver bevægelse. Det lignede springede rammer i en animationsfilm. Af alle browsere var Safari en total katastrofe: med hver opdatering gjorde Apple det mindre energiforbrugende ved kraftigt at begrænse de tilgængelige ressourcer.

‘Position: klistret’ kommer frem

Alt ændrede sig i marts 2017, da alle større desktop- og mobilbrowsere endelig tilføjede support til ‘position: sticky’ CSS-ejendom. Chrome var den sidste, der introducerede den i version 61 den 5. september 2017. Siden da blev opgaven til at fjerne faste elementer fra visningen sammen med deres beholder triviel.

Indfødt støtte til ‘position: sticky’ betyder, at udviklere ikke længere skal efterligne denne opførsel via langsomt javascript. Browsere ved bedst, hvilket indhold de skal anmode om, afhængigt af i hvilken retning siden rulles. Eller fjern fra sidehukommelsen de sideelementer, der ikke længere er synlige på en skærm. Det giver især værdi for mobile browsere: ressourcer er knappe, så det er den eneste måde for dem at kunne svare på kommandoer, selv når læseren ser meget lange sider. Og da Chrome 61 opdaterer de fleste af de nyeste Android-enheder ikke kun kan vises, men også naturligt understøtter vores Vertical Viewer.

Hurtigere lodret fremviser: hovedindstillingerne ændres

Vi så denne udfordring som en mulighed for grundlæggende at overveje implementeringen af ​​Viewer. Resultatet er vores nye hurtigere rullevisning - når tændt, tolker browseren rækkefølgen af ​​sider, som projektet består af som en naturligt høj HTML-sidekrop (som om sider følger 'flow', hvor alle HTML-elementer vises på en side ). På denne måde ser vores projekt med al dets komplicerede logik ud som en traditionel lang webside som enhver anden webside.

Adskil sider i lodret fremviser

Denne opdatering aktiverede hurtigere og mere jævn visningsydelse, især på sider med animerede og faste widgets.

Der er dog et par mindre ulemper. For det første understøtter hurtigere rulle ikke Slide-in-overgangen, når den er tændt. Vi forlod denne indstilling i indstillingerne, men må advare dig om, at den bruger den gamle implementering af Viewer med alle dens ulemper.

For det andet kunne animerede widgets - på bevægelse - der bevæger sig, når besøgende ruller, blive i nogle browsere. Det skyldes den grund, vi har beskrevet tidligere: overraskende kan browsere ikke skyde 'onscroll'-begivenheden samtidig med rullen. Det betyder i det væsentlige, at vi ikke kan køre scriptet, der flytter animerede widgets på hver rullebevægelse. Det gør især ondt, når du bruger ‘on scroll’ animationer til at låse en widget på en skærm, mens resten af ​​indholdet rulles. Heldigvis er der en løsning: Gør dine animerede elementer faste. I dette tilfælde vil alt se perfekt ud.

Readymag har altid bestræbt sig på at give den mest avancerede webteknologi i hænderne på designere. Du får måske en fornemmelse af, at det er en hård tilgang (og det er det faktisk!), Men kreativ frihed vil altid være vores prioriterede nr. 1.