Кадом усулҳои оптимизатсияи рендеринг (рефлоу)ро медонӣ?

Оптимизатсияи рендеринг (ҳисоб кардани навъҳо ва тартиб додани онҳо) бо кам кардани ё нест кардани амалҳое, ки Layout-ро ба вуҷуд меоранд (тартиб ё ҳисоб кардани ҷойгиршавӣ ва андозаҳои унсурҳо), ба даст меояд. Ин амалҳо иборатанд аз:

• Тағйир додани хосиятҳои геометрӣ: width, height, left, top, margin, padding.
• Тағйир додани мундариҷа: илова/барҳам додани узвҳо, тағйир додани матн.
• Тағйир додани хосиятҳое, ки ба ҷараёни ҳуҷҷат таъсир мерасонанд: display, float, position.
• Гирифтани стилҳои ҳисобшуда ё андозаҳо: element.offsetWidth, getComputedStyle().
• Тағйир додани андозаи тирезаи браузер.

Роҳи беҳтарсозӣ:

1. Аз Layout-ҳои маҷбурӣ ва ҳамзамон дурӣ ҷуста бошед: Маълумотро дар бораи стилҳо/тартиб пеш аз тағйирот гиред, ки метавонанд Layout-ро ба вуҷуд оранд, ва пас ҳамаи тағйиротро дар як вақт иҷро кунед.
2. Истифодаи transform ва opacity: Ин хосиятҳо унсурро тағйир медиҳанд, бе таъсир ба геометрияи дигар унсурҳо, ва танҳо Composition (композиция) ва Paint (рисмкашӣ) мекунанд, на Layout.
3. Истифодаи will-change: Ин хосият браузерро огоҳ мекунад, ки унсур дар оянда тағйир меёбад, ва имкон медиҳад, ки пешакӣ оптимизатсия карда шавад (масалан, бо интиқоли унсур ба қабати GPU). Ин бояд бо ҳушёрӣ истифода шавад, зеро метавонад ёдгириро зиёд кунад.
4. Виртуализатсияи рӯйхатҳо: Танҳо унсурҳои рӯйхатро, ки ҳоло мебинед, рендер кунед, ки шумораи унсурҳоро дар DOM хеле кам мекунад.
5. Барҳам додани унсур аз ҷараён: Барои анимацияҳои мураккаб, ки талаб мекунанд тағйироти зуд-зуд дар хосиятҳои геометрӣ, мумкин аст, унсурро ба муддати кӯтоҳ аз ҷараёни оддӣ хориҷ кунед (масалан, бо position: absolute ё position: fixed), анимацияро иҷро кунед ва сипас онро баргардонед.
6. Debouncing ва throttling-ро дар рӯйдодҳо истифода баред: Фақат дар рӯйдодҳои, масалан, ҳаракат ё тағйироти андозаи тиреза, ки метавонанд Layout-ро ба вуҷуд оранд, маҳдуд кунед.

// Нусхаи Layout-и маҷбурӣ
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Ба Layout меорад
element.style.height = (height + 10) + 'px'; // Боз ҳам Layout-ро меорад

// Нусхаи оптимизатсияшуда (дар як вақт тағйирот)
const element = document.getElementById('myElement');
// Қиматро пеш аз тағйирот гиред
const height = element.offsetHeight; 
// Ҳама тағйиротро дар як вақт иҷро кунед
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Истифодаи transform ба ҷои left/top барои анимация */
.animated-element {
  transform: translateX(100px); /* Ба Composition меорад */
  /* Ҷои left: 100px; ки Layout ва Paint-ро ба вуҷуд меорад */
}

/* Истифодаи will-change */
.will-animate {
  will-change: transform, opacity; 
}