? ????? HTML ? CSS? DOM ? CSSOM? ?? ???? ? ???? ?? ??? ???? ????? ???? ?? ??? ???? ??? ??? ???? ?????. 2. ??? ?????? ??? CSS? ???? ?? ? ?? JavaScript? ???? ?? ??? ???? ??????. 3. ??? ?? ?? ???? ??? ???? ?? ??/?? ??? ???? ?? ?? ????? ?????. 4. ? ?? ?? ??? ???? ??? ??? ???? ????? ??? ???? ???? ?? ??? ????? ??? ??? ????. 5. Transform and ????? ???? ???? ?????? ?????. 6. DevTools? ???? ???? ???? ??? ??? ???????. ?? ???? ??? ????? ??? ??? ????? ???? ??? ?????? ????.

? ???? ?? ???? ???? ??? ???? ?? ??? ????? ??? ??? ??? ???? ?? ?? ??? ???? ????. ????? ??? ??? ??? ???? ? ??? ???? ? ?? ????? ???? ? ??????. ??? ?? ??? ???? ?? ?? ? ??? ??? ?? ???? ?????.

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

?? ???? ????? ? ???? ???? ?? ?? ??? ????.

1. HTML? DOM?? ?? ?? (?? ?? ??)
2. CSSOM? CSS? ?? ?? (CSS ?? ??)
3. DOM? CSSOM? ?? ??? ??????
4. ???? (?? ??) : ??? ??? ??? ?????
5. ??? : ? ??? ??? ?? ??? ?????
6. ??? : ??? ?? ?? ????? ?????

? ??? ???? ??? ?? ??? ?? ???? ?? ?????.

1. HTML ? CSS? ?? ?? : ?? ?? ??

????? HTML? ?????? ???? ???? ???? ?? ?? ? DOM ?? ?? ???? ?????. ?? ?? ? ? CSS ??? ?? ?? ? ???? ?????.

CSS? ?? ??? ??? ???? CSSOM ? ?? ?????. DOM? ?? CSSOM? ?? ??????. ????? ??? ????? ?? ? ??? ???? ????? ????.

? ?? ? : ?? ??? ???? ??????. CSS ?? (? : print )?? media ??? ???? ????? ?? ??? ??? ??? ???? ?? ? ? ????. ?? ???? ?? ??? ??? CSS.

DOM? CSSOM? ?? ???? ????? ?? ?? (?? ?? ??? ?? ? ???)? ?????. script ??? ?? ??? ?? ??? ?? ?? ? ? ???? ??? ?????.

? ????? : ? ?? ??? JavaScript. HTML ?? ??? ???? ?? async ?? defer ??????.

2. ???? : ??? ??

?? ????? ??? ??? ??? ???? ??? ?? ????. ?? ??? ???? (?????? ?)???. ? ??? ???? ???? ??? ?? ?????.

? ??? ?? ? ???. ??? ??? ???? ??? ??? ? ??? ???????. ????? ????? ??? ?? ?? ??????.

• DOM ?? (? : ?? ??/??)
• ???? ??? ??? ??? ??? (? : width , margin , display )
• ?? ???? ??? ?? offsetHeight ?? getBoundingClientRect() ? ?? ??.

?? ?? : JavaScript?? ???? ??? ????? ???? ? ??? ??? ? ????. ??? ?? ??? ?????.

 div.style.height = div.offsetheight 10 'px'; // ????? ??????
div.style.width = div.offsetwidth 10 'px'; // ????? ?? ??????

? ?? : ??? ?? ???.

 const height = div.offsetheight; // ? ? ?????
div.style.height = ?? 10 'px';
div.style.width = height * 2 'px'; // ??? ?

3. ??? : ??? ?????

???? ? ????? ??? ?? ???? ?? ??? ?? ??? ?????. ??? ?? ????? ?????.

• ???
• ??? ??
• ???
• ??
• ???

??? ??? ??? ???? ?? ??? ??? ???. ????? ?? ???? ??? ??? ? ??? ????? ??????.

? ??? : will-change ?? transform: translateZ(0) ???? ?? ????? ??? ?? ??? ???? ?????? (??? ??????). ?? ?? ? ???? ?? ???? ?? ??? ????.

box-shadow ?? background-image ? ?? ???? ?? ??? ??????? ????. ???? transform ? opacity ??????. ????? ???? ?? ???.

4. ??? : ?? ???? ???????

?????, ????? ??? ???? ??? ??? ?? ???? ?? ?? ???? ?????. ? ??? ??? ?? GPU?? ????? ?? ????.

?? ????? ????? ???? ????? ??? ?????. ??? ??? transform ? opacity ???? ?????? ?? ????. ???? ? ??????.

? ?? ?? : left ?? top ?? ????? transform . ?? ??:

 / * ? ???? ? ??? ??? */
.Move {?? : 50px; }

/ * ? ???? ? ??? */
.move {transform : translatex (50px); }

DevTools (Chrome : Layers ? )? ???? ???? ???? ??? ????? ??? ? ????.

?? ?? ???? : ?? ?

??? ??? ??? ????? ???? ??? ??? ????.

• ?? ??? ?? ?? ??? :

  • CSS/JS? ??? ?? ?? ????
  • ??? ??? CSS
  • ? ?? JS? ??????

• ?? ??? ????? ????? .

  • ???? ?? ? ?? ???? ??? ?? ????
  • DOM ?????? requestAnimationFrame ??????

• ???? ?????? ??? :

  • transform ? opacity ??????
  • will-change: transform ?? ??? ??????

• ??? ?? ?? :

  • overflow: hidden
  • ?? ??? ??? ?????

• ????? ??? ???? ?????? .

  • ??? ???? ???? ?? ??????
  • ?? will-change ?? ????. ?? ???? ??? ? ????

??? ??? ??? ???? ?? ?? ???? ???? ?? ??? ??? ??? ?? ? ???? ???? ? ??????. ??? ???? ? ??? ????? ??? ????? ???? ? ??? ?? ??? ????? ????.

????? : DOM ??, ? ??? CSS ? ?????? ?? ?? ?? ??? ? ?? ?? ????.

??? ??? ??? ???? ???? ???? ???? ?????.

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