Ռեսուրսների առաջնահերթ խորհուրդներ՝ Prefertch, Preload և Preconnect
Չորս տեսակի ռեսուրսների առաջնահերթ խորհուրդներ
- Նախաբեռնել
Այս տեխնիկան օգտագործվում է զննարկիչին հրահանգելու նախապես ներբեռնել նշված ռեսուրսները, ինչպիսիք են 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">
Ամփոփում
Եզրափակելով, համարձակվելով ուսումնասիրել այս արդյունավետության բարձրացման ռազմավարությունները, դուք հնարավորություն ունեք զգալի և նկատելի բարելավումներ բերելու օգտատիրոջ փորձի մեջ: Օգտագործողի վրա կենտրոնացած մտածելակերպը, որն առաջնահերթություն է տալիս օգտատիրոջ կարիքներին և ակնկալիքներին, կծառայի որպես ձեր առաջնորդող սկզբունքը, երբ որոշում եք, թե ինչպես և երբ կիրառել նախաբեռնման, նախնական առբերման և նախապատկերման տեխնիկան:
Ընդգրկելով այս առաջադեմ տեխնիկան՝ նախաբեռնում, նախնական ներբեռնում և նախապատկերում, կարող է իսկապես փոխակերպել ձեր վեբ կատարողականությունը և օգտագործողի փորձը: Այս մոտեցումներն օգտագործում են ժամանակակից բրաուզերների և ցանցերի ուժը՝ օպտիմալացնելու ռեսուրսների առբերման և մատուցման եղանակը: Արդյունքը՝ էջի ավելի արագ բեռնում, նվազեցված ուշացումներ և ընդհանուր առմամբ ավելի պատասխանատու և գոհացուցիչ օգտատերերի փորձ: