Så snabba på webbplatsen med Tagg

"förutse"webbläsare är framtiden för toppfart Internet surfing, vilket ger oss resurser vi vill ha även innan vi vet att vi vill ha dem. Dagens webbläsare redan göra några förutsägelser då och då för att påskynda hämtning och återgivning av dokument. För att ta det här till nästa steg ser vi ingen annan än webbutvecklare.

Utvecklare har en ganska bra idé av hur deras webbplatser navigeras, och som resurser begärs oftast och därmed kan de förutsäga vissa framtida operationer som webbläsare ska göra för webbplatser. Allt som behövs nu är för utvecklare att hitta ett sätt att relä dessa förutsägelser till webbläsare och sätt dem till god användning. Här kommer några speciella "HTML-länkar" in.

En uppdatering på HTTP-förfrågningar

Innan vi tittar på dessa länkar, är det dags att uppdatera vårt minne om hur en typisk HTTP-efterfrågad filhämtningsoperation händer. Låt oss säga att någon som heter Joe vill besöka en webbplats.

Här är vad som händer nästa:

1. Joe skriver webbplatsens personligt återkallbara adress i en webbläsarens adressfält och trycker på "Enter".
2. När den fått den adressen frågar webbläsaren en DNS-server (komplimanger av ISP) för IP-adressen till adressen från Joe.
3. DNS-servern är skyldig.
4. Nu när webbläsaren känner till IP-adressen skickar den ett meddelande (i TCP dialekt) till webbplatsens server och ber om en anslutning.
5. Om servern lever och skickar det ett svar som bekräftar webbläsarens begäran och webbläsaren svarar och bekräftar serverns meddelande. (Notera: Ja, det här är en extremt uppvattad version av ett TCP-handslag mellan en klient och en server.)
6. När handslagen är sluta etableras en anslutning mellan de två.
7. Nu ändrar webbläsaren sin dialektstil till HTTP och frågar servern för webbplatsen.
8. Servern, som känner till hemsidan på webbplatsen, returnerar precis det, som mottas av webbläsaren och visas till Joe som väntar mycket tålmodigt framför datorn.

En typisk HTTP-förfrågan går igenom Allt det (och mer) att hämta ett dokument via Internet. Så om någon av dessa processer kan hoppas om när det är möjligt, vi kan minska tiden vi måste vänta på leveransen av de resurser vi vill ha.

HTML Link Relationships

W3C specificerar 4 HTML-länkrelationer (rel för förhållande) heter dns-prefetch, preconnect, prefetch, och prerender. Tillsammans kallas de (av W3C) "Resurs tips". Nu ska vi se vad de kan göra och där de kan användas.

1. DNS Prefetch

I DNS prefetch, den domännamnsupplösning (även om den matchande IP-adressen från DNS-servern) är klar före tidpunkten.

Låt oss säga att det finns en referenssida på en webbplats med många referenslänkar till sin systersida. När en användare besöker referenssidan finns det a hög sannolikhet att användaren kommer att navigera till systersidan. Så, en tidig DNS-sökning för systerwebbplatsen kan minska tiden som krävs för att öppna webbplatsen (därigenom förbättra användarupplevelsen).

Detta latensminskning via DNS-förhämtning kan göras genom att lägga till den här koden på referenssidan.

När en webbläsare behandlar den här koden på referenssidan, lägger den till DNS-uppslaget på systersidan till dess uppgiftsköer, och när den är fri från andra prioriterade uppgifter i kön startar den DNS-upplösningen av systersida.

Så när en användare äntligen klickar på en av länkarna som tar dem till systersidan kan DNS-upplösningen på den webbplatsen redan ha slutförts och webbläsaren kan omedelbart starta upprättandet av klient-serverns TCP-anslutning med systersidan server, vilket gör att sidan laddas snabbare.

Den här funktionen är tillgänglig i nästan alla moderna webbläsare utom Safari från och med mars 2016.

2. Förbinda

Förbindelse är ett steg längre från DNS prefetch, det etablerar en anslutning till servern som det kan finnas en förfrågan skickad senare i framtiden.

W3C listar ett idealiskt användningsfall för förkoppling: omdirigeringar. Utvecklare använder omdirigeringar av ett antal skäl.

I det här fallet är en webbläsares nästa begäran (omdirigerad webbplats) 100% förutsägbar, och kan vara förkopplad till, till minska navigations latens.

Tänk dig att det finns en mellanliggande webbplats som omdirigerar till "xyzsite", kommer följande HTML-länk att göra webbläsaren förkopplad med xyzsite-servern när den kommer till den mellanliggande sidan.

Från och med mars 2016 är det tillgängligt i Chrome, Opera och Firefox.

3. Förhämta

Med prefetch, för en resurs, webbläsaren börjar implementera DNS-upplösningen av resursens domännamn, sedan utför en TCP-anslutning med resursens server, gör HTTP-förfrågan, och slutligen hämtar och lagrar den författade resursen i webbläsarens cache.

Om du är säker på vilka resurser som behövs senare, är det resursen som ska föregås på förhand där ligger fångsten. Förhämtning tar gissningar, och om du gissar felaktigt kan du faktiskt sakta ner istället för att påskynda din webbplats.

För online-böcker, gallerier eller portföljer, om användaren är mest sannolikt att bläddra till nästa sida, förfetchning av resurser som bilder, kan påskynda sakerna betydligt. Här är koden för att göra det.

Förhämtning stöds i Chrome, Firefox och Opera.

4. Prerender

Endast för HTML-sidor kan prerendering göras. En prerendered HTML-sida är gjorda offline, och är målade på skärmen när den faktiskt behövs av användaren. Tolkning kostar ett högre beräkningsarbete och minnesresurs; plus, för att göra en sida kan webbläsaren behöva extra resurser (som bilder som läggs till på sidan) som kommer att leda till mer efterföljande förfrågningar via webbläsare.

Så, prerender måste vara används med försiktighet, och inte överanvänds. Lägga till följande kod kommer att prerendera sidan om "Om".

Prerender är redan tillgänglig i Chrome, IE och Opera från och med mars 2016.

Några saker att notera

(1) Inget av de ovannämnda resursanvisningarna garanterar genomförandet och slutförandet av de olika stadierna av begäran som det gjordes för eftersom när webbläsaren redan är upptagen behandlar de begäranden som behövs för operationerna på den aktuella sidan användaren är i, utför dessa optimeringar kan hindra användarens aktuella uppgifter.

Så är allting köas och körs när webbläsaren känner sig tillräckligt fri för att göra det.

Dessa resursanvisningar behöver inte nödvändigtvis vara närvarande på sidan även innan sidan laddas. De kan vara lagt till senare av JavaScript, och resursanvisningarna kommer att göra sitt jobb som vanligt.

(2) W3C anger a HTML-länkattribut kallad antydnings sannolikhet, pr (med värdet 0 till 1) för dessa resursanvisningar, som kan användas för att ge sannolikheten för förfrågningar som kommer att göras i framtiden. Jag har inte sett att detta attribut implementeras av någon webbläsare ändå. Som ett exempel anger följande kod att det finns en 80% chans att xyzsite kommer att begäras i framtiden och 30% för den ungefärliga sidan.

Vi kan också lägga till det frivilliga crossoriginattributet till resursanvisningarna för att informera webbläsaren om den länkade förfrågans CORS-behörighet.