Share
În acest tutorial vă vom arăta cum să îmbunătățiți performanța paginilor dvs. web utilizând in-view.js. Această bibliotecă JavaScript raportează înapoi când ceva a fost derulat în fereastra de vizualizare și ne va ajuta să încărcăm dinamic imaginile noastre așa cum sunt necesare.
Performanța web contează, mai ales dacă site-ul dvs. web vizează țările în curs de dezvoltare în care conexiunile sunt lente și planurile de date sunt scumpe. Câteva sarcini de bază pe care le implicăm în mod obișnuit pentru a îmbunătăți performanța site-urilor noastre includ minifierea fișierelor JavaScript și foi de stiluri, "gzipping" active, comprimarea dimensiunilor imaginilor, după care suntem destul de mult setați. Dar noi suntem?
Timpul de încărcare a paginii și cronologia inspectorului de browserExemplul inspectorului de mai sus arată o încărcare a unei singure pagini în 24 de imagini dintr-un port de vizualizare cu dimensiune mobilă la o viteză regulată 3G. Și după cum vedem, încărcarea paginii este completă la aproximativ unsprezece secunde! Acest lucru este foarte lent, având în vedere că avem de-a face cu o pagină simplă, cu doar câteva imagini și o foaie de stil. Pagina nu este încă poluată cu anunțuri și nici cu scripturi de urmărire, care de obicei adaugă balast suplimentar la pagină.
De asemenea, merită ținut cont de faptul că aceasta este doar o emulație. Nu ia în calcul nici configurația serverului, latența și alte obstacole tehnice. Performanța ar putea fi mai gravă în realitate.
Deci, cum putem îmbunătăți performanța încărcării paginii?
În primul rând, avem o serie de imagini. Motivul pentru care pagina noastră se încarcă încet se datorează faptului că toate imaginile inundă împreună la încărcarea inițială a paginii. Dacă priviți mai îndeaproape imaginea anterioară, veți vedea că acest lucru nu se întâmplă în paralel: câteva imagini încep să se încarce numai după ce sunt redate altele, ceea ce împrăștie pagina în ansamblu.
Dacă avem un număr mare de imagini pe o singură pagină, putem lua în considerare încărcarea acestor imagini asincronă și numai atunci când utilizatorul are nevoie de ele. Acest lucru permite browserului să finalizeze încărcarea paginii vizibile fără a fi nevoie să aștepte ca toate imaginile să fie redate, salvând în final lățimea de bandă a utilizatorului.
Pentru a continua, luați index-starter.html din repo. Există, de asemenea, un css / styles-starter.css însoțitor, pe care îl puteți folosi de asemenea.
Pentru a începe, trebuie să înlocuim sursele de imagine cu o imagine foarte mică, preferabil codată în baza64 pentru a evita orice alte solicitări HTTP. Utilizăm această imagine ca substituent înainte de a afișa imaginea reală. Acestea fiind spuse, trebuie să stocăm, de asemenea, sursa de imagine reală într-un atribut personalizat numit date-src.
După ce ați făcut acest lucru și ați refăcut pagina, ar trebui să găsiți că imaginile sunt în prezent goale și dimensiunile lor nu sunt neapărat cele pe care ar trebui să le aibă imaginile finale.
Deci, să rezolvăm stilurile.
Imaginile pe care dorim să le folosim sunt setate la 800 x 550 pixeli. Vom împărți înălțimea imaginii (800px) de la lățimea imaginii (500px), și să înmulțească acest lucru cu 100%. Utilizați rezultatul pentru a seta padding top a pseudo-elementului containerului de imagine. În cele din urmă, trebuie să setăm poziția imaginii la absolut și setați înălțimea maximă la 100%, astfel încât nu va susține înălțimea.
figura poziție: relativă; figura img top: 0; stânga: 0; poziția: absolută; max-înălțime: 100%; cifră: înainte de padding-top: 69.25%; // (554/800) * 100%
În acest moment, dimensiunile imaginii ar trebui să fie corecte. Cu toate acestea, sursa reală a imaginii se află încă într-un atribut personalizat, astfel încât browserul să nu poată prelua încă nicio imagine.
Imaginea este la raportul corespunzător, dar imaginea este încă încărcată.Pasul următor va fi adăugarea unui JavaScript care va încărca imaginea.
În primul rând, trebuie să încărcăm in-view.js pe pagină. Așa cum am menționat, această bibliotecă ușoară (care nu depinde de jQuery sau de o bibliotecă de bază, cum ar fi Waypoints) detectează dacă un element este în interiorul sau în afara ferestrei de vizualizare a browserului.
Acum creați un nou fișier JavaScript în care vom scrie JavaScript și vom încărca după in-view.js, după cum urmează:
Biblioteca in-view.js expune in vedere() funcție care ia un selector ca argument. În acest caz, vom trece figura element; elementul care împrăștie imaginile. Motivul pentru care selectăm elementul de înfășurare este că vom adăuga câteva clase pentru a efectua tranziții de stil - acest lucru este mai ușor de făcut atunci când clasa se află pe elementul de înfășurare, mai degrabă decât imaginea în sine, prin urmare:
Inview ( 'figura')
Apoi, folosim .pe() metoda de a lega elementul cu introduce pentru a verifica dacă elementul se află în fereastra de vizualizare. În plus, in-view.js expune și Ieșire eveniment care face opusul; acest lucru detectează când elementul nu se află în fereastra de vizualizare.
Accentsconagua
inView ("figura") .on ('introduce', funcția (figura) var img = figure.querySelector ('img'); // 1 if ('undefined' == typeof img.dataset.src) / 2 figura.classList.add ('is-loading'); // 3 // 4 newImg = new Image (); newImg.src = img.dataset.src; newImg.addEventListener (' Figura 6: setTimeout (functie () figure.classList.remove ('is-load'); figura.classList.add ('este incarcata') ;, 300););); introduce evenimentul va declanșa o funcție care va face următoarele:
figura.date-src atribut.se incarca la ambalaj, figura, element.date-src atribut.se incarca clasa cu este încărcat- clasă.După cum puteți vedea din codul de mai sus, am introdus două clase noi se incarca, și este încărcat-. Noi folosim se incarca pentru a adăuga o animație în timp ce imaginea se încarcă. Apoi folosim este încărcat- clasa, după cum sugerează și numele, să adauge efectul de tranziție la imagine atunci când imaginea a fost complet încărcată.
figure.is-încărcat img animation: fadeIn 0.38s linear 1s forward; figure.is-încărcare poziție: relativă; figure.is-încărcare: după content: "; afișare: bloc; culoare: #ddd; font-size: 30px; text-indent: -9999em; : 50%; marja: auto; poziția: absolută; top: 50%; stânga: 50%; marginea-stânga: -0.5em; infinit ușurință @frame cheie de încărcare 0% transform: rotate (0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; 5%, 95% box-shadow: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; 10%, 59% box-shadow: 0 -0,83em 0 -0,4em, -0,087em -0,825em 0 -0.42em, -0.173m -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; 20% box-shadow: 0 -0.83em 0 -0,4em, -0,338em -0,758em 0 -0,42em, -0,555em -0,617em 0 -0,44em, -0,671em -0,488em 0 -0,46em, -0,749em -0,34em 0 -0,477em; 38 % box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0. 74em 0 -0,42em, -0,645em -0,522em 0 -0,44em, -0,775em -0,297em 0 -0,46em, -0,82em -0,09em 0 -0,477em; 100% transform: rotate (360deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; @frame-cheie fadeIn 0% opacity: 0; 100% opacitate: 1;
Speranța pentru cele mai bune, dar plănuiți pentru cel mai rău. Deci, doar în cazul în care JavaScript este cumva dezactivat (un caz rar, dar perfect posibil), trebuie să asigurăm că imaginea va fi încă afișată. Folosește element cu sursa de imagine îndreptată imediat spre sursa reală de imagine.
Suntem cu toții pregătiți! Actualizați pagina și, dacă examinăm cronologia de rețea din DevTools, putem vedea că viteza paginii este acum îmbunătățită semnificativ, deoarece încărcăm doar ceea ce este vizibil pentru utilizatori.
Mai repede!Încărcarea paginii este acum completă în numai 1.95s la viteza obișnuită 3G; mai mult de o îmbunătățire a vitezei de 500%!
În acest tutorial, am analizat modul de îmbunătățire a încărcării paginii prin redarea imaginilor numai atunci când utilizatorul le vede. Această metodă este popular cunoscută sub numele de "leneș de încărcare" și poate ajuta performanța site-ului dvs. enorm.
Există multe biblioteci JavaScript și pluginuri jQuery care fac acest lucru, deci de ce optați pentru in-view.js? Personal, in-view.js a fost genul de script pe care l-am căutat, deoarece nu încearcă să facă prea mult. Se ocupă doar de un lucru și o face bine. Acest tip de bibliotecă oferă mai mult control și o mai mare flexibilitate.
De exemplu, nu numai că putem folosi in-view.js pentru a efectua încărcare leneșă, dar putem, de asemenea, să o folosim pentru lucruri precum parcurgerea infinită, afișând probabil un formular de abonare plutitor când utilizatorul ajunge la sfârșitul paginii o privire la demo pentru a vedea că în acțiune), sau pentru a crea o cronologie verticală fără a fi nevoie să trageți încă o altă bibliotecă JavaScript. Spuneți-ne cum îl folosiți!
Formular abonat plutitor, animat în vizualizare odată ce utilizatorul ajunge la sfârșitul paginii