ბრაუზერის მთავარი ნაკადი ძვირი რესურსია — და ის გონივრულად უნდა დაიხარჯოს

ფრონტენდის ოპტიმიზაცია, როგორც წესი, ქსელურ მოთხოვნებს, ბანდლის ზომასა და ქეშირებას ნიშნავს. მთავარი ნაკადი იშვიათად მოიხსენიება, სანამ ეკრანზე ინტერაქცია ინტენსიური არ ხდება. kciter.so-ს ბლოგის სტატია „The Browser's Main Thread Is Expensive“ სწორედ ამ რესურსს ეძღვნება: რაც არ უნდა დაზოგოთ ქსელსა და ბანდლზე, ეკრანი გაიყინება, როგორც კი ნაკადი დაიბლოკება.

ერთი ნაკადი, ორი საქმე

მთავარი ნაკადი JavaScript-ს ასრულებს — კოდი, ივენთების დამმუშავებლები, ტაიმერები, ფრეიმვორკის შიდა ლოგიკა — და ეკრანს ხატავს: სტილების გამოთვლა, განლაგება, ხატვა. 60Hz-ის ეკრანზე კადრზე დაახლოებით 16,6 მილიწამი მოდის, ბრაუზერის ხარჯის გამოკლებით კი პრაქტიკული ბიუჯეტი დაახლოებით 10 მილიწამია. JavaScript ერთნაკადიან ივენთ ლუპს ეყრდნობა: სანამ ერთი დავალება მიმდინარეობს, სხვა ვერაფერი ხდება. 50 მილიწამზე ხანგრძლივს გრძელ დავალებად მიიჩნევენ, მეტრიკები INP და TBT კი სწორედ ნაკადის დაბლოკვის დროს ზომავს. მიზეზი ხშირად ნელი კოდი არ არის — საკმარისია, რომ კოდი ნაკადს იკავებს.

ოთხი ხერხი გონივრული ხარჯვისთვის

სტატია ტექნიკებს ოთხ ჯგუფად ყოფს: გაყოფა, დაჯგუფება, პრიორიტეტიზაცია და გადავადება. გაყოფა გრძელ სამუშაოს ნაწილებად ჭრის და მათ შორის ნაკადს ათავისუფლებს — მაგალითად, ყოველი 20 ჩატის შეტყობინების შემდეგ ან კადრზე 5 მილიწამიანი ბიუჯეტით. გათავისუფლება სამუშაოს არ აჩქარებს: ის ქმნის შუალედებს, რომლებშიც ბრაუზერი შეყვანასა და ხატვას ასწრებს.

დაჯგუფება ზედმეტად ხშირ დავალებებს ამცირებს — debounce და throttle scroll-ისა და input-ის ივენთებისთვის, ერთი ხატვა კადრზე requestAnimationFrame-ით ცოცხალი დაფებისთვის. პრიორიტეტიზაცია რიგითობას წყვეტს: MessageChannel-ზე აგებული რიგი საშუალებას იძლევა, ახლახან დაკლიკებული ფოტოს სამუშაო ფონურ დამუშავებას გაუსწროს. გადავადება კითხულობს, საჭიროა თუ არა სამუშაო ახლა: კოდის დაყოფა საწყის ჩატვირთვაზე, IntersectionObserver მხოლოდ ეკრანთან ახლოს მყოფი პოსტების ასაგებად, ეკრანს მიღმა ანიმაციების გაჩერება.

მთავარი ნაკადის გარეთ

ნაწილი სამუშაოს სრულად გადაცემაც შეიძლება. transform-ისა და opacity-ის ანიმაცია კომპოზიტორის ნაკადზე რჩება და გლუვია მაშინაც, როცა JavaScript დაკავებულია, top-ის ან width-ის ანიმაცია კი ყოველ კადრზე განლაგებას აიძულებს; FLIP ხერხი რეალურ ცვლილებას transform-ზე დაფუძნებულ ანიმაციად აქცევს. web worker-ს მძიმე გამოთვლები გადაეცემა, თუმცა ის DOM-ს ვერ ეხება და მონაცემებს კოპირებით ცვლის — გარდა იმ შემთხვევისა, როცა ბუფერი გადაეცემა და მფლობელობა თითქმის ნულოვანი ღირებულებით იცვლის მფლობელს.

სამუშაოს საერთოდ არშესრულება

ყველაზე დიდი მოგება ხშირად სამუშაოს აღმოფხვრიდან მოდის: მოძველებული ჩანაწერების გადაგდება, როცა შემოსვლის სიჩქარე დამუშავებას აღემატება, დაგროვილი განახლებების ბოლო მნიშვნელობად შერწყმა და განმეორებითი გამოთვლების მემოიზაცია. სტატიის დასკვნა მარტივია: სანამ დავალების დაჩქარებას შეუდგებით, ჰკითხეთ — ეს სამუშაო საერთოდ უნდა შესრულდეს, ახლა, აქ?