Cum de a accelera site-ul cu Tag

"prevăzând"browserele sunt viitorul navigării pe Internet de mare viteză, aducând resursele pe care le dorim chiar înainte să știm că le vrem. Browser-urile de astăzi deja face niste predicții din când în când, pentru a accelera preluarea și redarea documentelor. Pentru a face acest lucru la pasul următor, nu ne uităm la nimeni altul decât dezvoltatorii web.

Dezvoltatorii au idee destul de bună de modul în care site-urile lor sunt navigate, și care resursele sunt solicitate cel mai des și, prin urmare, pot prezice unele operații viitoare pe care browserele ar trebui să le facă pentru site-uri. Tot ce este necesar acum este pentru dezvoltatori să găsească o modalitate de a retransmiterea acestora predicții la browsere și puneți-le în uz. Aici intră anumite "link-uri HTML" speciale.

O actualizare a cererilor HTTP

Înainte de a arunca o privire la aceste link-uri, este timpul să reîmprospătăm memoria noastră cu privire la modul în care se întâmplă o operație tipică de preluare de fișiere HTTP solicitată. Să spunem că cineva pe nume Joe vrea să viziteze un site Web.

Iată ce se întâmplă în continuare:

1. Joe tipărește adresa umană recallabilă a site-ului într-o bară de adrese a browserului și apasă "Enter".
2. Odată ce a primit adresa respectivă, browserul solicită un server DNS (complimente de ISP) pentru adresa IP a adresei date de Joe.
3. Serverul DNS este obligatoriu.
4. Acum, când browserul cunoaște adresa IP, trimite un mesaj (în dialectul TCP) către serverul site-ului, solicitând o conexiune.
5. Dacă serverul este viu și bine, acesta trimite un răspuns confirmând cererea browserului, iar browserul răspunde și recunoaște mesajul serverului. (Notă: Da, aceasta este o versiune extrem de udată a unei strânse handshake TCP între un client și un server.)
6. Când se termină strângerea de mâini, se stabilește o legătură între cele două.
7. Acum, browserul își modifică stilul de dialect la HTTP și solicită serverul pentru site.
8. Serverul, cunoscând pagina de pornire a site-ului, returnează exact ceea ce este primit de browser și arătat lui Joe, care așteaptă foarte răbdător în fața calculatorului.

Apare o solicitare tipică HTTP toate (și mai mult) să aducă un document prin Internet. Deci, dacă oricare dintre aceste procese poate fi jumpstarted când este posibil, noi putem reducerea timpului în care trebuie să așteptăm livrarea resurselor pe care le dorim.

Link-uri HTML Link

W3C specifică 4 legături HTML (rel pentru relație) numit dns-prefetch, conectare anticipată, prefetch, și prerender. Împreună, ei sunt chemați (de către W3C)Sugestii privind resursele"Acum, vom vedea ce pot face și unde pot fi folosite.

1. Prefetch DNS

În prefetch DNS, nume de domeniu rezoluție (aka obținerea adresei IP corespunzătoare de la serverul DNS) se face înainte.

Să presupunem că există o pagină de referință într-un site web cu o mulțime de link-uri de referință către site-ul său surori. Atunci când un utilizator vizitează pagina de referință, există a probabilitate mare că utilizatorul va naviga pe site-ul surorii. Deci, un căutare timpurie DNS pentru site-ul sursă poate reduce timpul necesar pentru a deschide site-ul (îmbunătățind astfel experiența utilizatorului).

Acest reducerea latenței prin prelevarea DNS se poate face prin adăugarea acestui cod la pagina de referință.

Atunci când un browser procesează acest cod în pagina de referință, va adăuga căutarea DNS a site-ului sursă la cozile de sarcini și atunci când nu este disponibilă în alte activități cu prioritate ridicată în coadă, va porni rezoluția DNS a site-ul sora.

Deci, atunci când un utilizator dă clic în cele din urmă pe unul dintre legăturile pe care le duce pe site-ul surorii, rezoluția DNS a acelui site ar fi putut fi deja finalizată, iar browserul poate începe imediat stabilirea conexiunii TCP client-server cu site-ul sursă server, făcând încărcarea mai rapidă a paginii.

Această caracteristică este disponibilă în aproape toate browserele moderne, cu excepția Safari în martie 2016.

2. Preîncărcați

Preconnect este un pas mai departe de prefetch-ul DNS, stabileste o conexiune cu serverul la care poate fi trimisa o cerere mai tarziu in viitor.

W3C enumeră un caz ideal de utilizare pentru preconnect: redirecționări. Dezvoltatorii utilizează redirecționări din mai multe motive.

În acest caz, următoarea solicitare a browserului (site redirecționat) este 100% previzibilă, si poate să fie preconcernat, la reduceți latența navigației.

Imaginați-vă că există o pagină de site intermediar care redirecționează către "xyzsite", următorul link HTML va face browserul să se conecteze cu serverul xyzsite, atunci când ajunge la pagina intermediară respectivă.

Începând cu martie 2016, acest lucru este disponibil în Chrome, Opera și Firefox.

3. Prefetch

Cu prefetch, pentru o resursă, browserul începe implementarea rezoluției DNS a numelui de domeniu al resurselor, atunci efectuează o conexiune TCP cu serverul resursei, face cererea HTTP, și în cele din urmă preia și stochează resursa prestabilită în memoria cache a browserului.

Dacă sunteți sigur de resursele care vor fi necesare mai târziu, aceasta este resursa de prefetch în prealabil; acolo este captura. Preluarea ia presupuneri, și dacă ați ghici în mod greșit, ați putea încetini de fapt, în loc să accelerați site-ul.

Pentru cărți online, galerii sau portofolii, în cazul în care utilizatorul este cel mai probabil să navigheze către pagina următoare, preîncărcarea resurselor, cum ar fi imagini, poate accelera semnificativ lucrurile. Iată codul pentru a face asta.

Prefetch este acceptat în Chrome, Firefox și Opera.

4. Predare

Doar pentru paginile HTML se poate face preîncărcare. O pagină HTML pre-promulgată este făcut offline, și este pictat pe ecran atunci când este de fapt necesar de către utilizator. Redare costă o muncă de calcul și o resursă de memorie mai mare; plus, pentru a face o pagină, browserul ar putea avea nevoie de resurse suplimentare (cum ar fi imaginile adăugate la pagină), ceea ce va duce la solicitări mai consecvente de către browser.

Asa de, prerender trebuie sa fie folosit cu prudență, și nu prea folosit. Adăugarea următorului cod va preda pagina "Despre" în prealabil.

Prerender este deja disponibil în Chrome, IE și Opera începând din martie 2016.

Câteva lucruri de notat

(1) Niciuna dintre sugestiile de resurse menționate anterior nu garantează executarea și completarea diferitelor etape ale cererii, pentru că atunci când browserul este deja ocupat pentru procesarea cererilor necesare pentru operațiile paginii curente în care se află utilizatorul, efectuând aceste optimizări poate împiedica sarcinile curente ale utilizatorului.

Deci, totul este în așteptare și executate atunci când browserul se simte suficient de liber pentru a face acest lucru.

Aceste sugestii privind resursele nu trebuie neapărat să fie prezente în pagină chiar înainte de încărcarea paginii. Ei pot fi adaugat mai tarziu de JavaScript, iar sugestiile despre resurse vor face treaba ca de obicei.

(2) W3C specifică a Atributul Link HTML denumit hint probabilitate, relatii cu publicul (cu valoarea 0 la 1) pentru aceste sugestii de resurse, care pot fi folosite pentru a furniza probabilitatea ca cererile să se facă în viitor. Nu am văzut încă acest atribut implementat de vreun browser. De exemplu, următorul cod afirmă că există o șansă de 80% xyzsite care va fi solicitată în viitor și 30% pentru pagina aproximativă.

De asemenea, putem adăuga atributul opțional crossorigin referitor la resursă, pentru a informa browserul despre acreditările CORS ale solicitării legate.