Բրաուզերի գլխավոր հոսքը թանկ ռեսուրս է. ինչպես ծախսել այն խնայողաբար

Ֆրոնտենդի օպտիմիզացիան սովորաբար կապում են ցանցային հարցումների, բանլի չափի և քեշավորման հետ։ Գլխավոր հոսքը հազվադեպ է հիշատակվում, քանի որ սովորական էկրաններում այն խնդիր չի դառնում։ Սակայն ինտենսիվ ինտերակտիվ էկրաններում ցանցում ու բանլում խնայած ոչինչ չի օգնի, եթե ձեր կոդը կատարող հոսքը արգելափակված է։ kciter.so բլոգի «The Browser's Main Thread Is Expensive» գրառումը նվիրված է հենց այս ռեսուրսին։

Մեկ հոսք, երկու աշխատանք

Գլխավոր հոսքը կատարում է JavaScript՝ ձեր կոդը, իրադարձությունների մշակիչները, թայմերները, ֆրեյմվորկի ներքին տրամաբանությունը, և նկարում էկրանը՝ ոճերի հաշվարկ, դասավորություն, նկարում։ Հարթ պատկերի համար կադրը պետք է ստեղծվի էկրանի թարմացման հաճախությամբ՝ 60Hz-ում մոտ 16,6 միլիվայրկյան, իսկ բրաուզերի ծախսը հանելուց հետո գործնական բյուջեն մոտ 10 մվ է։ JavaScript-ը հենվում է միահոսք իրադարձությունների ցիկլի վրա. քանի դեռ մեկ առաջադրանք ընթանում է, ուրիշ ոչինչ չի կարող տեղի ունենալ։ 200 մվ տևող ֆունկցիան այդ ընթացքում սառեցնում է նկարումը, անիմացիան և ներածումը։ 50 մվ-ից երկար առաջադրանքները համարվում են երկար, իսկ INP և TBT չափանիշները ըստ էության չափում են հոսքի արգելափակման տևողությունը։ Պատճառը հաճախ դանդաղ կոդը չէ՝ բավական է, որ կոդը զբաղեցնում է հոսքը։

Խնայողաբար ծախսելու չորս եղանակ

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

Խմբավորումը կրճատում է չափազանց հաճախ կրկնվող առաջադրանքները՝ debounce և throttle՝ սքրոլի ու ներածման իրադարձությունների համար, մեկ նկարում մեկ կադրում՝ կենդանի պանելների համար։ Առաջնահերթացումը որոշում է հերթականությունը. MessageChannel-ի վրա կառուցված հերթը թույլ է տալիս հենց նոր սեղմված լուսանկարի աշխատանքը առաջ անցնել ֆոնային նախադիտումներից։ Հետաձգումը հարցնում է՝ արդյոք աշխատանքը պետք է հիմա. կոդի բաժանումը սկզբնական բեռնման ժամանակ, IntersectionObserver՝ միայն էկրանին մոտ գրառումները կառուցելու համար, էկրանից դուրս անիմացիաների կանգնեցում։

Գլխավոր հոսքից դուրս

Որոշ աշխատանք կարելի է ամբողջությամբ փոխանցել։ transform-ի և opacity-ի անիմացիան մնում է կոմպոզիտորի հոսքում և հարթ է նույնիսկ JavaScript-ի զբաղվածության ժամանակ, իսկ top-ի կամ width-ի անիմացիան ամեն կադրում դասավորության վերահաշվարկ է պահանջում. FLIP տեխնիկան իրական դասավորության փոփոխությունը վերածում է transform-ի վրա հիմնված անիմացիայի։ web worker-ը կարող է կրել ծանր հաշվարկներ՝ վերլուծություն կամ պատկերների մշակում, սակայն DOM-ին հասանելիություն չունի և տվյալները փոխանակում է պատճենմամբ՝ բացառությամբ բուֆերի փոխանցման, երբ սեփականությունը փոխվում է գրեթե զրո ծախսով։

Աշխատանքը ընդհանրապես չկատարել

Ամենամեծ շահույթը հաճախ գալիս է աշխատանքի կրճատումից՝ հնացած գրառումների դեն նետում, երբ ներհոսքը գերազանցում է մշակման արագությունը, կուտակված թարմացումների միավորում վերջին արժեքի մեջ և կրկնվող հաշվարկների մեմոիզացիա։ Իրական ժամանակի հավելվածները՝ սթրիմինգային հարթակները, խմբագրիչները, քարտեզները, խաղերը, դանդաղում են հենց որ գլխավոր հոսքը ծանրաբեռնվում է։ Նախքան առաջադրանքն արագացնելը, արժե հարցնել՝ այս աշխատանքը պե՞տք է կատարվի՝ հիմա, այստեղ։