둘의 비용을 비교하는 것은 쉽지 않을 것 같아요 다만 reflow 가 발생하면 repaint 는 무조건 발생합니다 (반면 repaint 발생해도, reflow 는 발생하지 않는 경우도 있음) 따라서 최대한 reflow 를 발생시키지 않는 것이 repaint 를 발생시키지 않는 것보다 더욱 렌더링 비용을 절약하는 방법입니다
스크립트를 만나기 전이라도 position 과 transform 사이에서의 선택은 렌더링 성능에 영향을 줍니다 transform 은 position 과 다르게 layer 를 새롭게 생성하기 때문입니다 그 결과 다른 layer 에서 렌더링 후 composite 하게 되므로 렌더링 성능이 개선됩니다
![[10분 테코톡] 콤피의 CSS를 통한 브라우저 렌더링 최적화](http://i.ytimg.com/vi/TZz9VHjJzMk/mqdefault.jpg)
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
확실히 첫번째 봤을 때보다 한 번 더 보니까 머리에 더 잘 들어오네요 감사합니다
두번 들으니까 이제 이해가 되기 시작합니다 좋은 강의 감사드립니다
감사합니다!
너무 잘봤습니다
선생님 좋은 강의 정말 감사드립니다.
혹시 repaint와 reflow둘중 어떤것이 일반적으로 더 비용이 많이 드나요?
둘의 비용을 비교하는 것은 쉽지 않을 것 같아요
다만 reflow 가 발생하면 repaint 는 무조건 발생합니다
(반면 repaint 발생해도, reflow 는 발생하지 않는 경우도 있음)
따라서 최대한 reflow 를 발생시키지 않는 것이
repaint 를 발생시키지 않는 것보다
더욱 렌더링 비용을 절약하는 방법입니다
선생님 강의 잘 들었습니다~ 한가지 궁금한게 있는데요 ..!
그럼 스크립트를 만나기 전, dom 과 cssom 이 완성되고 어태치 후 배치와 페인트가 일어나는 과정에서는 position과 transform이 성능상 상관 없는걸까요 ?
스크립트가 없거나 스크립트로 리플로우 리페인트 일어나기 전에요~~
스크립트를 만나기 전이라도 position 과 transform 사이에서의 선택은 렌더링 성능에 영향을 줍니다
transform 은 position 과 다르게 layer 를 새롭게 생성하기 때문입니다 그 결과 다른 layer 에서 렌더링 후 composite 하게 되므로 렌더링 성능이 개선됩니다