Այս հոդվածում մենք կանդրադառնանք վեբ միջերեսի հետ կապված արդյունավետության թեմաներին: Որպես front-end (FE) ծրագրավորողներ, երբեմն մենք չենք մտածում կատարողականի մասին այնպես, ինչպես պետք է, այնպես որ հրամայական է հիշել այս թեմաները, երբ մենք գրում ենք որոշ կոդ: Թեև մենք խոսելու ենք վանիլային JS-ի մասին, բացահայտված հասկացությունները կիրառվում են յուրաքանչյուր JS շրջանակի համար, քանի որ JS-ը մեր օրերում օգտագործվող ամենահայտնի շրջանակների առանցքն է:

Համակարգչային գրաֆիկայի ներկայացման գործընթացը

Նախ, մենք պետք է հասկանանք, թե ինչպես է մշակվում բովանդակությունը մեր էկրաններին հայտնվելու համար: Այս հոդվածը հնարավորինս պարզ պահելու համար, եկեք ասենք, որ այն ձևը, որով բովանդակությունը ներկվում է մեր էկրաններին, հետևում է համակարգչային գրաֆիկայի խողովակաշարին, որն ունի հետևյալ տեսքը.

Ես շատ չեմ խորասուզվի այս գործընթացի մեջ, բայց կարևոր է հիշել հայեցակարգը. Հնարավոր է, որ դա հիմա շատ իմաստալից չէ, բայց դա կլինի, քանի որ մենք շարժվում ենք հոդվածում: Պարզ աշխարհում այս գործընթացի մեծ մասը կառավարվում է մեր GPU-ների կողմից: Ըստ էության, համակարգիչը սկզբում եռանկյունների ձևով կետեր (գագաթներ) է կազմում, հետո այդ կետերը կապում է գծերով, իսկ դրանից հետո ներսի տարածքը նկարում է; Երբ դա արվի, այն կարող է նկարել յուրաքանչյուր պիքսել, և երբ այդ գործընթացը ավարտվի, մենք վերջապես ստանում ենք մեր էկրանին ցուցադրվող արդյունքը:

Վեբ մատուցման գործընթացը

Մենք հենց նոր տեսանք, թե ինչպես ենք մենք ստանում գրաֆիկական պատկերներ մեր էկրաններին և ինչպես են աշխատում արտապատկերման շարժիչների մեծ մասը, բայց հիմա մենք պետք է հասկանանք, թե ինչպես է աշխատում արտապատկերման գործընթացըհամացանցում: Մեր կայքերը միշտ պարունակում են HTML, CSS և JS ֆայլեր: Այսպիսով, գործընթացը նման է հետևյալին.

  • Վեբ էջը բեռնելիս սերվերը (բայթերի տեսքով) ուղարկում է պահանջվող ֆայլերը վեբ հաճախորդին:
  • Բրաուզերի շարժիչը այս բայթերը փոխակերպում է նիշերի՝ ըստ ֆայլի նշված կոդավորման: Այդ առանձին նիշերը վերածվում են նշանների, հանգույցների և, վերջապես, օբյեկտի մոդելի:
  • Բրաուզերը հանգույցները վերածում է ծառի կառուցվածքի; մենք սա գիտենք որպես DOM: DOM-ը փաստաթղթի օբյեկտի մոդելն է, տրամաբանական ծառ, որը հեշտացնում է մեր կյանքը, երբ մենք ցանկանում ենք շահարկել մեր վեբը JS-ից:
  • Բրաուզերը նաև վերլուծում է CSS կոդը CSSOM-ի (CSS Object Model):

Հավանաբար դուք արդեն տեսել եք DOM կառուցվածքը, բայց CSSOM-ն այսպիսի տեսք ունի.

Նախորդ պատկերը ցույց է տալիս, թե ինչպես է մեր CSS կոդը կապվում հանգույցի հետ. այս կառուցվածքը շատ նման է DOM ծառին: Ըստ էության, CSSOM-ը ծառ է, որտեղ յուրաքանչյուր հանգույց ունի մեր CSS հատկությունները: Կոնկրետությունը նույնպես էական է այս կետում, քանի որ այս պահին մեր CSS-ի բոլոր վերադրումները դիտարկվում են նաև մեր հանգույցների ներսում:

Այժմ, երբ մենք ավելի լավ պատկերացում ունենք, կարող ենք անցնել հաջորդ թեմային:

Բնական ռենդերային պիքսելային խողովակաշար

Այս հոդվածի հետ կապված իմ հիմնական նպատակն այն է, որ դուք՝ ընթերցողս, հասկանաք, որ սա ամենակարևոր հայեցակարգն է FE մշակողների համար կատարողականի առումով: Եթե ​​դուք ընդունեք այս հասկացությունները որպես մշակող, դուք միշտ կիմանաք, թե երբ եք խախտում բնական ռենդերների պիքսելային խողովակաշարը:

Պատկերում մենք կարող ենք տեսնել հինգ տարբեր փուլեր: Յուրաքանչյուր փուլում մենք կարող ենք ակամայից խցանումներ մտցնել մատուցման գործընթացում: Եվ նորից կուզենայի նշել ռաստերիզացիա. Նախ, եկեք գնանք և բացենք ձեր DevTools-ը փորձնական էջում և անցնենք Performance ներդիր և ակտիվացնենք screenshots տարբերակը այսպես.

Վերևի նկարում կարող եք տեսնել, որ կարող եք սկսել պրոֆիլավորումը՝ սեղմելով «վերբեռնել» սլաքը: Դա կսկսի ձեր կայքի կատարողականի ձայնագրությունը: Կատարման ձայնագրությունը հիմնականում կայքի կատարողականի պրոֆիլն է. այն կպարունակի այն ամենը, ինչ կատարվում է հիմնական թեմայում, սքրինշոթներ, վեբ աշխատողներ, FPS և այլ հետաքրքիր բաներ:

Երբ տեսնում եք ներկ(տես սքրինշոթը հետևյալ պատկերի վերևի աջ անկյունից)էջում,պետք է հիշեք, որ ռաստերացումը >կատարվում է. Դա պայմանավորված է նրանով, որ բովանդակությունը էկրանին նկարելու համար (ինչպես տեսանք համակարգչային գրաֆիկական խողովակաշարում), շարժիչը պետք է առաջադրանք ստեղծի ոչ ոքի, այնուհետև լրացնի պիքսելները:

Ստորև բերված պատկերը ցույց է տալիս վեբկայքի կատարողականի ամբողջական հաշվետվությունը (կարող եք ավելին իմանալ այս մասին այստեղ), ներառյալ FPS տեղեկատվությունը, ցանցի հարցումները, հիշողության արտահոսքը և մեծ և այլն:

Խաղում ենք բնական ռենդեր պիքսելային խողովակաշարի հետ

Թույլ տուր բացատրեմ. JavaScript-ի կոդը DOM-ի կամ CSS-ի որոշ անցումներ շահարկելու համար, դուք կարող եք էջի վերահոսում առաջացնել: Ամեն անգամ, երբ դուք փոխում եք որևէ տարրի երկրաչափության հետ կապված ինչ-որ բան, դուք նորից կգործարկեք բնական ռենդերային խողովակաշարը:

Ենթադրենք, որ դուք փոխում եք տարրի լայնությունը, այնուհետև փոխում եք երկրաչափությունը: Թզննարկիչի շարժիչը կվերահաշվարկի և կստուգի, թե արդյոք այլ տարրերի վրա ազդում են, ինչը կառաջացնի վերամշակում:

Բոլոր տուժած տարրերը պետք է վերաներկվեն. դրանից հետո նրանք նորից կանցնեն կոմպոզիտային փուլ։

Եթե ​​դուք փոխում եք որոշ հատկություն՝ կապված ներկման գործընթացի հետ, օրինակ՝ տարրի ֆոնի գույնը, ապա դուք սկսում եք միայն ներկման փուլը և բաց թողնելով դասավորության փուլը.

Եվ վերջապես, եթե դուք փոխեք ձեր շերտերի կազմը, ապա դուք միայն կգործարկեք այդ փուլը: Դուք կարող եք գործարկել Composite շերտը՝ փոխելով z-index-ը JS-ով կամ օգտագործելով CSS: Բացի այդ, դուք կարող եք փոխել ձեր շերտերի բաղադրությունը՝ օգտագործելով translateZ ձեր փոխակերպման հատկությունը:

Սա մատուցման ամենաթեթև փորձն է, բայց դա չի նշանակում, որ անհնար է խնդիրներ ունենալ. երբեմն, դուք կարող եք առաջացնել շերտի պայթյուն» (եթե դուք անընդհատ շերտեր եք դնում), և ոչ ոք դա չի ուզում:

Կարևոր է նշել, որ շերտի պայթյուն առաջացնելը շատ հազվադեպ է, քանի որ բրաուզերների «շերտի ճզմում» (կարդացեք շերտի պայթյունի հղումը) գործընթացը փորձում է խուսափել դրանից: Բայց եկեք դա պահենք կատարման մասին մեր հաջորդ հոդվածի համար:

Դասերի փոփոխությունը, որոնք անտեսում են (և անընդհատ թարմացնում են) այլ ոճերը կարող ենառաջացնել ձեր վեբ կայքի նոր հոսք և նաև դասավորության աղբարկղ: Բացի այդ, զգույշ եղեք, երբ կատարում եք ենթածառի հանգույցի փոփոխությունները:

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

Եզրակացություն

Հետևյալ հոդվածներում մենք ավելի շատ կխոսենք վերահոսքի մասին, բայց առայժմ ես կթվարկեմ որոշ բաներ, որոնք կարող են առաջացնել ձեր կայքի վերահոսքը.

  • Դասերի, տարրերի կամ ոճերի ավելացում կամ հեռացում
  • Տեսադաշտի կողմնորոշման փոփոխություն
  • Չափի կամ դիրքերի հաշվարկ կամ փոփոխություն (զգույշ եղեքgetBoundingClientRect-ի հետ, քանի որ այս բնիկ API-ն համաժամանակյա հաշվարկում է տարրերի չափը)

Երբ ցանկանում եք մի քանի հանգույց ավելացնել ձեր DOM-ին՝ օգտագործելով JS, հիշեք այս հոդվածում քննարկված հասկացությունները: Դուք հավանաբար մտածում եք այն մասին, թե ինչպես է այս ամենը թվում կոդի վրա, և ճշմարտությունն այն է, որ ամեն ինչ պարզ է, երբ մենք խոսում ենք կատարողականի մասին, բայց դա չի նշանակում «հեշտ»: Բայց մի անհանգստացեք; Ես նախատեսում եմ վերանայել այն ամենը, ինչ կապված է Front-end Performance-ի հետ հաջորդ հոդվածներում: Հետագա գլուխներում մենք կքննարկենք հետևյալը.

  • DevTools, կատարողականի պրոֆիլավորող և JavaScript պրոֆիլավորող
  • Ցանցային գործընթացներ
  • Կատարման թեստ
  • Դասավորության շեղում (իրական աշխարհի օրինակներ)
  • Հիշողության և պրոցեսորի արտահոսք

Եթե ​​ցանկանում եք սուզվել բացահայտված թեմաների մեջ, ապա կարող եք դիտել այս հղումները.