Как да ускорите уебсайта с Tag

"Предвиждайки"браузърите са бъдещето на високоскоростното сърфиране в интернет, ни носи ресурси, които искаме дори преди да знаем, че ги искаме. Днешните браузъри вече правя някои прогнози от време на време за ускоряване на извличането и представянето на документи. За да преминем към следващата стъпка, очакваме никой друг освен уеб разработчиците.

Разработчиците имат доста добра идея на как се управляват техните уебсайтове, и кои ресурсите се изискват най-често и по този начин те могат да предскажат някои бъдещи операции, които браузърите трябва да правят за сайтовете. Всичко, което е необходимо сега, е разработчиците да намерят начин препредайте ги прогнози за браузъри и използвайте ги добре. Това е мястото, където влизат някои специални "HTML връзки".

Опресняване на HTTP заявки

Преди да разгледате тези връзки, е време да обновите нашата памет за това как се случва типична заявка за изтегляне на файлове, изисквана от HTTP. Да кажем, че някой на име Джо иска да посети уебсайт.

Ето какво се случва след това:

1. Джо напише адреса на уебсайта в адресната лента на браузъра и натисна „Enter“.
2. След като получи този адрес, браузърът пита DNS сървър (комплименти от ISP) за IP адреса на адреса, даден от Joe.
3. DNS сървърът се задължава.
4. Сега, когато браузърът знае IP адреса, той изпраща съобщение (в диалект на TCP) на сървъра на уебсайта, като пита за връзка.
5. Ако сървърът е жив и здрав, той изпраща отговор, потвърждаващ заявката на браузъра и браузърът отговаря и потвърждава съобщението на сървъра. (Забележка: Да, това е изключително разводнена версия на TCP ръкостискане между клиент и сървър.)
6. Когато свършват ръкостисканията, между тях се установява връзка.
7. Сега браузърът променя стила си на диалект на HTTP и пита сървъра за уебсайта.
8. Сървърът, който знае началната страница на уебсайта, връща само това, което е получено от браузъра и е показано на Джо, който чака много търпеливо пред компютъра..

Преминава типично HTTP заявка всичко че (и още) да донесе документ чрез интернет. Така че ако някой от тези процеси може да се стартира, когато е възможно, ние можем намали времето, което трябва да изчакаме за доставката на ресурсите, които искаме.

Връзки в HTML връзка

W3C определя 4 връзки за HTML връзки (отн за връзка) DNS-предварително извличане, предварително свързване, предварително извличане, и изобрази предварително. Заедно те се наричат ​​(от W3C)Съвети за ресурсиСега ще видим какво могат да направят и където могат да бъдат използвани.

1. DNS Prefetch

В DNS предварителното извличане, Разрешаване на име на домейн (известен още като получаването на съответстващия IP адрес от DNS сървъра).

Да речем, че има страница с референции в уебсайт с много референтни връзки към неговия сестрински сайт. Когато потребителят посети страницата за справка, има висока вероятност потребителят ще навигира до сайта на сестрата. Така че ранно търсене в DNS за сестринския сайт може да намали времето, необходимо за отваряне на сайта (като по този начин подобрява потребителския опит).

Това намаляване на закъснението чрез предварително извличане на DNS може да се направи чрез добавяне на този код към референтната страница.

Когато браузърът обработи този код в референтната страница, той ще добави DNS търсенето на сестринския сайт към неговите опашки за задачи, а когато той е свободен от други задачи с висок приоритет в опашката, ще започне разрешаването на DNS на сестра сайт.

Така че, когато потребителят най-накрая кликне върху една от връзките, която ги отвежда до сестринския сайт, разрешаването на DNS на този сайт може вече да е приключило и браузърът може веднага да започне създаването на TCP-връзка клиент-сървър със сестринския сайт сървър, което прави зареждането на страницата по-бързо.

Тази функция е налична в почти всички модерни браузъри с изключение на Safari от март 2016 г..

2. Предварително свържете

Preconnect е стъпка напред от предварителното извличане на DNS, установява се връзка със сървъра, към която може да има заявка, изпратена по-късно в бъдеще.

W3C изброява идеалния случай за използване на preconnect: пренасочвания. Разработчиците използват пренасочвания по редица причини.

В този случай следващата заявка на браузъра (пренасочен сайт) е 100% предвидима, и може да бъдеш свързан, да се намали закъснението при навигация.

Представете си, че има страница с междинни сайтове, която пренасочва към "xyzsite", следната HTML връзка ще направи браузъра предварително свързан с xyzsite сървъра, когато стигне до страницата на посредника.

От март 2016 г. това се предлага в Chrome, Opera и Firefox.

3. Предварително изтегляне

с предварително извличане, за ресурс, браузърът започва да изпълнява DNS резолюция на името на домейна на ресурса, тогава изпълнява TCP връзка със сървъра на ресурса, прави HTTP заявка и накрая извлича и съхранява предварително извлечения ресурс в кеша на браузъра.

Ако сте сигурни за кои ресурси ще са нужни по-късно, това е ресурсът, който трябва предварително да се извлече предварително; в него се крие улова. Предварителното извличане изисква догадки, и ако погрешно предположите, може да забавите вместо да ускорите сайта си.

За онлайн книги, галерии или портфейли, ако е по-вероятно потребителят да премине към следващата страница, предварително извличане на ресурси като снимки, може значително да ускори нещата. Ето кода за това.

Предварителното извличане се поддържа в Chrome, Firefox и Opera.

4. Предварително изображение

Само за HTML страници може да се извърши предварителен запис. Предварително създадената HTML страница е извършено офлайн, и е боядисана на екрана, когато е действително необходима на потребителя. Оказване струва по-висока изчислителна работа и ресурс на паметта; плюс, за да се визуализира дадена страница, браузърът може да се нуждае от допълнителни ресурси (като изображения, добавени към страницата), което ще доведе до по-последователни искания от браузъра.

Така, изобрази предварително трябва да бъде използва се с повишено внимание, и не се използва прекомерно. Добавянето на следния код предварително ще отпечата страницата "За".

Prerender вече е наличен в Chrome, IE и Opera от март 2016 г..

Няколко неща, които трябва да се отбележат

(1) Нито един от горепосочените съвети за ресурси не гарантира изпълнението и завършването на различните етапи на заявката, за които е направено, защото когато браузърът вече е зает с обработката на заявките, необходими за операциите на текущата страница, в която се намира потребителят, извършването на тези оптимизации може да попречи на текущите задачи на потребителя.

Така че всичко е така поставени на опашка и изпълнени, когато браузърът се чувства достатъчно свободен да го направи.

Тези съвети за ресурси не е задължително да присъстват в страницата дори преди зареждането на страницата. Те могат да бъдат добавен по-късно от JavaScript, и намеците за ресурси ще свършат работата си както обикновено.

(2) W3C определя a Атрибут на HTML връзка Наречен вероятност за намек, PR (със стойност 0 до 1) за тези съвети за ресурси, които могат да се използват за осигуряване на вероятността за заявки, които ще бъдат направени в бъдеще. Все още не съм виждал този атрибут да се изпълнява от всеки браузър. Например, следният код посочва, че шансът за xyzsite с 80% ще бъде поискан в бъдеще и 30% за страницата за около.

Можем също да добавим опционалния атрибут crossorigin към подсказките за ресурси, за да информираме браузъра за удостоверението на CORS за свързаната заявка.