DOM? ?? ??? ?? ??? ? ?? ??? ?? ??? ??? ?? ?????. ??? ??? ??? ????. 1. ??? ? ? ?? ?? ?? ????. 2. ?? ?? ? ?? ??; 3. ??? ???? ?? ?? ?? ??? ??? ??????. 4. ???? ??? ??? ???? ?? ? ??? ??????. 5. ??? ?? ?? requestAnimationFrame? ???? ??? ??? ????????.

DOM? ?? ???? ?? ?? ?? ??????? ?? ?? ??? ?? ? ? ?? ??? ??? ? ????. ? ?? ?? ??? ????. ??? DOM ??? ??? ? ??? ???? JavaScript ??? ??? ???? ?????. ?? ??? ? ??? ????? ?? ?? (Repaint) ? Repaint (Repaint)? ??? ? ? ??? ??? ??? ?? ????.

DOM ??? ????? ?? ?? ?? ??? ??? ?? ??? ???? ?? ?? ????? ??? ????.

DOM ?? ?? ????

DOM ??? ?? JS ?? ??, ?? offsetWidth ?? getBoundingClientRect() ? ?? ??? ?? ? ?? ????. ? ??? "??"??? ????? ???? ?? ???? ?? ?? ????? ?????.

?? ? ?? :

• ?? ? ????? ?? ???? ? ?? ????.
• DOM???? ????? ?? ?? JS? ??? ??? ??????.
• ?? ?? ? ?? : ?? ?? ???? ?? ?? ??? ??? ???? ????? DOM? ???? ???.

?? ??:

 const elements = document.querySelectorall ( '. item');
TotalHeight = 0???;

?? .foreach (el => {
  TotalHeight = el.offSetheight; // ? ?? ????});

??? ? ??? ??? ?? DOM ??? ??????

DOM? ?? ? ??? ???? ??? ? ? ????. 5 ? ???? ???? ????? 5 ?? ???? ?? ? ? ????. ??? ???? ??? ?? ? ?????.

??? ?? :

• ?? ?? (DocumentFragment)? ???? ?? ??? ??????.
• ??? ?? ?? ?? ? ? ?? ? ??????.
• ?? DOM ?? Framework (? : React)? ???? ???? ?? ????????.

?? ??:

 const fragment = document.createDocumentFragment ();
for (i = 0; i <100; i) {
  const div = document.createelement ( &#39;div&#39;);
  div.textContent = &#39;??&#39;i;
  Fragment.AppendChild (div);
}
document.body.appendChild (??); // ???? ? ?? ??????

???? ??? ????? (???? ???)

?? ???? ??? ???? DOM ??? ????? ?? ?? ????.

???? ?? ?? ?? :

 for (i = 0; i <eifts.length; i) {
  ?? [i] .style.width = container.offsetwidth &#39;px&#39;; // ?? ??? ??? ??}}

??? ?? :

• ?? offsetwidth? ?? ??????.
• ?? ?? ??? ???? ?????.

?? ??? ??? ???? ??? ??????

???? ??? ?? ??? ???? ?? React? ?? ? VUE? ?? ? ???? ?? ?? ?? ??? ????? ???, ?? ?? ??? ??? DOM? ???? ? ????.

??? ??? ?? ???? ?? requestAnimationFrame ???? ???? ??? ????? ??? ?? ???? ???? ??? ??? (? : ?? ??, ???)?? DOM ?? ???? ?? ? ? ????.

????? ?? DOM ??? ?? ? ?? ? ? ??? ??? ?? ??? ??? ?? ?????. "?? ? ?? ? ??, ??? ????, ???? ??"? ???? ? ??? ????? ???? ? ????. ??? ??? ??? ????? ??? ?? ??????.

? ??? DOM ??? ???? ??? ??? ? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!