Всяко изобразяване на уеб страница може основно да бъде изобразено с помощта на следната диаграма

В горната диаграма можем ясно да видим, че изчислението на оформлението и рисуването са две ключови стъпки и по-нататъшното актуализиране на този DOM, тази две стъпки се изпълняват отново, което се нарича пребоядисване и преформатиране

И така, нека разберем механизма за пребоядисване и преформатиране

Преформатиране: „Преформатиране“ в обектния модел на документа (DOM) се отнася до процеса на изчисляване на оформлението на уеб страница. така че всеки път, когато променим съдържанието, стила или преоразмеряването, механизмът за преформатиране на прозореца е важен за преизчисляване на позицията на възела на уеб страницата.
Този процес е скъп от изчислителна гледна точка, особено когато оформлението е по-сложно.

Прерисуване:„Прерисуването“ в обектния модел на документа (DOM) се отнася до процеса на актуализиране на визуалното представяне на уеб страницата. За разлика от преформатирането, което включва преизчисляване на оформлението на страницата, пребоядисването само актуализира визуалния вид на засегнатите елементи. Този процес обикновено е по-бърз от преформатирането и често се използва за оптимизиране на производителността.

Повторно боядисване се случва, когато всяко действие промени външния вид на елементите, което засяга видимостта, но не променя оформлението

Нека разберем кога механизмът за пребоядисване и кога ще се задейства с примери.

  1. когато променим CSS свойството като visibility: none
    това няма да промени оформлението на dom, тогава ще се задейства механизмът за пребоядисване, но когато се покажат CSS свойства като
    : нямазадействапреизчисляването на позицията на възлите и след това се задейства механизмът за пребоядисване.
  2. когато променим размера на шрифта, той променя геометрията на съдържанието, така че директно да повлияе на оформлението, следователно ще се задейства механизмът за преформатиране.
  3. Добавянето на възела или премахването на възела от DOM ще повлияе на позицията на другите възли, така че е необходимо преизчисляване, така че ще се използва механизъм за прерисуване.

Как да оптимизирате механизма за преформатиране и пребоядисване

  1. Минимизиране на промените в стила: Пребоядисванията се задействат, когато стиловете на даден елемент се променят, така че минимизирането на промените в стила може да помогне за намаляване на броя на прерисувания. Опитайте се да консолидирате промените в стила в една операция или намалете честотата на промените.
  2. Избягвайте принудителното преформатиране: Преформатирането се задейства, когато оформлението на елемент се промени и може да бъде скъпо. Принудително преформатиране възниква, когато браузърът трябва да преизчисли оформлението на цялата страница. Избягвайте принудително преформатиране чрез групиране на промени в оформлението, избягвайте четене на свойствата на оформлението в цикъл (с помощта на Фрагмент на документа) и използвайте CSS трансформации вместо промяна на позицията на елемент.
  3. Намалете броя на възлите: Колкото по-голямо е DOM дървото, толкова повече работа трябва да свърши браузърът по време на оформлението и рисуването. Опитайте се да намалите броя на възлите в дървото, като опростите маркирането, комбинирате подобни елементи или премахнете ненужните елементи.
  4. Използвайте свойството will-change: Свойството will-change CSS може да се използва за информиране на браузъра, че даден елемент ще се промени в бъдеще, което позволява на браузъра да оптимизира процеса на прерисуване и преформатиране. Това свойство може да се използва за указване на промени в позицията, непрозрачността или трансформацията на елемент.

Angular управлява преформатиране и пребоядисване чрез своя механизъм за откриване на промени. Когато настъпи промяна в приложение на Angular, Angular задейства откриване на промени, което инициира процес на оценка на обвързванията и актуализиране на изгледа. Той също така приема OnPush откриване на промени, което намалява броя на компонентите, които трябва да бъдат проверени за промени, освен това също използва зона, която капсулира приложението и му позволява да наблюдава асинхронни операции като HTTP заявки и таймери. Зоната гарантира, че откриването на промяна се задейства само когато е необходимо, намалявайки броя на прерисувания и преформатиране.

От друга страна, React използва виртуален DOM, за да оптимизира броя на преформатиране и пребоядисване. React изпълнява процес, наречен съгласуване, който сравнява текущия виртуален DOM с предишния виртуален DOM и изчислява минималния набор от промени, необходими за актуализиране на изгледа.