Ռեսուրսների առաջնահերթ խորհուրդներ՝ Prefertch, Preload և Preconnect

Չորս տեսակի ռեսուրսների առաջնահերթ խորհուրդներ

  1. Նախաբեռնել

Այս տեխնիկան օգտագործվում է զննարկիչին հրահանգելու նախապես ներբեռնել նշված ռեսուրսները, ինչպիսիք են JS-ը, պատկերները և այլն, երբ պրոցեսորը և ցանցի թողունակությունը անգործուն են: Այդ ռեսուրսներն այնուհետև պահվում են զննարկչի տեղական քեշում: Այս ակտիվ մոտեցումը նվազեցնում է այս ռեսուրսների հետագա բեռնման ժամանակները՝ ի վերջո բարձրացնելով օգտվողի փորձը:

Դա իրականացնելու համար դուք կարող եք սահմանել HTML «link» թեգի «rel» հատկանիշը «prefetch» ​​և նշել ռեսուրսի URL-ը, օգտագործելով «href» հատկանիշը, այսպես.

<link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" />

Երբ այս թեգը ավելացվի DOM-ին, այն գործարկում է նշված URL-ի հարցումը: Պատասխանը պահվում է նախնական առբերման քեշում՝ առանց ռեսուրսի վերլուծության կամ կատարման:

Ռեսուրսների լայն տեսականի կարելի է նախօրոք առբերել, այդ թվում՝ JS, CSS, պատկերի տարբեր ձևաչափեր, աուդիո ֆայլեր, WASM ֆայլեր, տառատեսակների ֆայլեր և նույնիսկ հենց HTML փաստաթուղթը: Երբ հարցումը մուտք է գործում նախնական առբերման քեշ, դուք կտեսնեք հստակ «Ցանց» պիտակը մշակողի գործիքների ներդիրի սյունակում՝ «Չափը (նախաբեռնել քեշը):»

crossoriginՀատկանիշը բրաուզերի նույն ծագման քաղաքականության մի մասն է և օգտագործվում է ճշտելու համար, թե արդյոք թույլատրել է արդյոք թիրախային ռեսուրսների բեռնումը ռեժիմով, ինչպիսիք են հղումը, սցենարը և img-ը տարրերի համար:

Լռելյայնորեն, որոշ ստատիկ ռեսուրսներ, ինչպիսիք են JS սկրիպտները և պատկերները, չեն սահմանափակվում նույն ծագման քաղաքականությամբ, և երրորդ կողմի JS ֆայլերը և պատկերային ֆայլերը կարող են բեռնվել ցանկացած խաչաձեւ տիրույթի անունից:

Նման կանոններն ունեն անվտանգության ակնհայտ ռիսկեր, ինչպիսիք են.

Երրորդ կողմի JS ֆայլը կարող է մուտք գործել առաջին կողմի կայքի սխալի համատեքստ և դրանով իսկ ստանալ ներքին տեղեկատվություն:

cookiesԵրրորդ կողմի JS ֆայլերի և պատկերային ֆայլերի սկզբնաղբյուր սերվերը կարող է օգտատիրոջ մասին տեղեկություն ստանալ SSL ձեռքսեղմման ստուգման և այլ միջոցների միջոցով հարցումների գործընթացում:

Անվտանգության այս ռիսկերը մեղմելու համար բրաուզերները ներկայացրել են crossoriginատրիբուտներ, որոնք կարող են օգտագործվել սկրիպտի, img-ի և հղման պիտակների վրա: Այս թեգերով բեռնված ռեսուրսների համար՝

Առանց crossorigin հատկանիշի, JavaScript-ի սխալի համատեքստը ստանալու հնարավորություն չկա:

կկազմավորվի crossoriginայնպես, որ "anonymous"JavaScript-ի սխալի համատեքստը հասանելի լինի, բայց քուքիները կամ օգտվողի այլ հավատարմագրերը չեն փոխանցվի SSL-ի ձեռքսեղմման փուլի հարցում:

Հարցման SSL ձեռքսեղմման փուլում crossoriginկսահմանվի "use-credentials"կամ մուտք գործեք JavaScript-ի սխալի համատեքստը, կամ կրեք թխուկներ կամ օգտվողի հավատարմագրեր:

Բացի այդ, Chrome բրաուզերի HTTP քեշը և համապատասխան Prefetch և Preconnect ռեսուրսների առաջնահերթության հուշումները նույնպես կազդեն crossoriginհատկանիշների վրա:

Խաչաձեւ տիրույթի ռեսուրսների համար ռեսուրսի առաջնահերթության հուշումը նույնպես պետք է սահմանվի խաչաձեւ տիրույթի, այսինքն՝ crossorigin="anonymous", օրինակ՝<link rel="prefetch" href="https://github.com/JuniorTour/juniortour.js" crossorigin="anonymous" />

Արդյոք ռեսուրսը խաչաձև տիրույթ է, կարելի է որոշել՝ հիմնվելով Sec-Fetch-Mode դիտարկիչին ավտոմատ կերպով կցված հարցման վերնագրի վրա:

Արժեքը no-cors է, ինչը ցույց է տալիս, որ ռեսուրսների բեռնման ընթացիկ ռեժիմը ոչ միջդոմենային ռեսուրսների համօգտագործման ռեժիմ է: Համապատասխան ռեսուրսների առաջնահերթության հուշումը «չի» պետք է սահմանվի խաչաձև տիրույթի crossorigin="anonymous":

Արժեքը cors է, ինչը ցույց է տալիս, որ ռեսուրսների բեռնման ընթացիկ ռեժիմը է միջդոմենային ռեսուրսների համօգտագործման ռեժիմ է: Համապատասխան ռեսուրսի առաջնահերթության հուշումը «պետք է» սահմանվի խաչաձև տիրույթի crossorigin="anonymous"ի վրա:

2. Նախաբեռնում

Ի տարբերություն նախնական առբերման, նախաբեռնումն օգտագործվում է «ընթացիկ» էջում ռեսուրսների բեռնման առաջնահերթությունը մեծացնելու համար, որպեսզի ապահովվի, որ հիմնական ռեսուրսները առաջինը բեռնված են:

Նախաբեռնման ամենատարածված օգտագործումն այն է, որ տառատեսակի ֆայլերը նվազեցնեն տեքստի տառատեսակի թարթումը, որը առաջանում է տառատեսակի դանդաղ բեռնման պատճառով: Օրինակ՝<link rel="preload" as="font" href="/main.woff" />

Կիրառվող ակնարկներով ռեսուրսները preload սովորաբար առաջինը բեռնվում են ավելի բարձր առաջնահերթությամբ վեբ էջում: Օրինակ՝ ստորև նկարում՝ nato-sans.woff2հարցում, Priorityսյունակի արժեքը High է, իսկ բեռնման կարգը զիջում է Documentին:

as հատկանիշը պարտադիր է և ծառայում է որպես տարբեր ռեսուրսների տեսակների առաջնահերթության հիմք, երբ link տարրն ունի rel="preload" հատկանիշ: Դուք կարող եք գտնել այս հատկանիշի կամընտիր արժեքների համապարփակ ցանկը MDN վեբ փաստաթղթերում «հղման հատկանիշը որպես» վերնագրով բաժնում:

3. Նախապես միացնել

Օգտագործվում է թիրախային տիրույթի անվան հետ նախապես ձեռք սեղմելու, DNS հասցեավորումն ավարտելու և TCP և TLS հղումներ հաստատելու համար:

Այն օգտագործելու հատուկ ձևն է սահմանել linkի պիտակի հատկանիշը և սահմանել հատկանիշը թիրախային «տիրույթի անուն», օրինակ .relpreconnecthref<link rel="preconnect" href="https://github.com" />

Օպտիմիզացման էֆեկտն է նվազեցնել կապի ժամանակը և բարելավել օգտվողի փորձը, երբ հետագայում մուտք գործեք թիրախային տիրույթի անունը՝ լրացնելով DNS հասցեավորումը, հաստատելով TCP հղումները և նախապես լրացնելով TLS ձեռքսեղմումները:

Ծանուցում! Խստորեն խորհուրդ է տրվում օպտիմիզացնել միայն «կարևոր տիրույթի անունները»Preconnect, իսկ թիվը չպետք է գերազանցի 6-ը:

Քանի որ Preconnect ուժի մեջ մտնելուց հետո ցանցային կապը նպատակային տիրույթի անվան հետ կպահպանվի առնվազն 10 վայրկյան՝ զբաղեցնելով սարքի ցանցը և հիշողության ռեսուրսները և նույնիսկ խոչընդոտելով այլ ռեսուրսների բեռնմանը:

4.DNS նախնական առբերում

Ի տարբերություն վերը նշված նախնական ներբեռնման, DNS նախաբեռնումն օգտագործվում է նախօրոք թիրախային տիրույթի անվան վրա DNS լուծումը կատարելու, տիրույթի անվանը համապատասխան IP հասցեն քեշավորելու համար՝ ֆայլի ռեսուրսները քեշավորելու փոխարեն, ինչպիսին է prefetch-ը:

Այն օգտագործելու հատուկ ձևն է՝ պիտակի link հատկանիշը դնել dns-prefetch և հատկանիշի արժեքը սահմանել 'target domain name', օրինակ՝ .relhref<link rel="dns-prefetch" href="https://github.com" />

Օպտիմալացման էֆեկտը նպատակային տիրույթի անվան IP հասցեն նախօրոք լուծելն է, դրանով իսկ նվազեցնելով ռեսուրսների հետագա ժամանակատար բեռնումը թիրախային տիրույթի անունից, արագացնելով էջի բեռնումը և բարելավելով օգտվողների փորձը:

Ընդհանուր առմամբ, DNS լուծումը հաճախ տևում է տասնյակ կամ նույնիսկ հարյուրավոր միլիվայրկյաններ, ինչը ուղղակիորեն ազդում է ռեսուրսների բեռնման ժամանակի վրա:

2022-ի սկզբին Chrome 102-ն ավելացրել է fetch-priority հատկանիշը, որը կարող է օգտագործվել ռեսուրսների բեռնման առաջնահերթությունը ավելի մանրակրկիտ վերահսկելու համար: Այն դեռ փորձնական փուլում է և ապագայում կարող է բարելավվել։ Օրինակները հետևյալն են.

<img src="important.jpg" fetchpriority="high">
<img src="small-avatar.jpg" fetchpriority="low">
<script src="low-priority.js" fetchpriority="low"></script>
// Only effective for preload link tags
<link href="main.css" rel="preload" as="image" fetchpriority="high">

Ամփոփում

Եզրափակելով, համարձակվելով ուսումնասիրել այս արդյունավետության բարձրացման ռազմավարությունները, դուք հնարավորություն ունեք զգալի և նկատելի բարելավումներ բերելու օգտատիրոջ փորձի մեջ: Օգտագործողի վրա կենտրոնացած մտածելակերպը, որն առաջնահերթություն է տալիս օգտատիրոջ կարիքներին և ակնկալիքներին, կծառայի որպես ձեր առաջնորդող սկզբունքը, երբ որոշում եք, թե ինչպես և երբ կիրառել նախաբեռնման, նախնական առբերման և նախապատկերման տեխնիկան:

Ընդգրկելով այս առաջադեմ տեխնիկան՝ նախաբեռնում, նախնական ներբեռնում և նախապատկերում, կարող է իսկապես փոխակերպել ձեր վեբ կատարողականությունը և օգտագործողի փորձը: Այս մոտեցումներն օգտագործում են ժամանակակից բրաուզերների և ցանցերի ուժը՝ օպտիմալացնելու ռեսուրսների առբերման և մատուցման եղանակը: Արդյունքը՝ էջի ավելի արագ բեռնում, նվազեցված ուշացումներ և ընդհանուր առմամբ ավելի պատասխանատու և գոհացուցիչ օգտատերերի փորձ: