재미있는 기억만 남기자

# 유림

  • Q https://github.com/pul8219/TIL/issues/13#issuecomment-725801004

# el1

<div id='reflow-test1' style='background-color:red;' >hi</div>

el1.style.padding = "8px";
el1.style.width = "320px";
el1.style.height = "240px";
1
2
3
4
5

image

# e2

<div id='reflow-test2' style='background-color:red;'>hi</div>
const el2 = document.getElementById("reflow-test2");
el2.style = "padding: 8px; width: 320px; height: 240px;";
1
2
3

image

background-color :red 스타일이 적용되지 않는 이유는 https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/style 기존의 스타일을 덮어 썼기 때문입니다

그 결과 el2.style 의 객체는 아래와 같습니다. style 을 수정하면 cssText 도 변경 되어 집니다. 결과는 비슷하지만 기술적으로는 어떻게 구현이 되어있는지 잘모르겠네요 dom.style.cssText="..." 이 올바른 명세서의 표현이기 때문에 제 생각에는 파싱을 할 때 dom.style="..." 을 dom.style.cssText="..." 으로 바꾸어 주는 것이 아닐까 생각됩니다 image image

따라서 다음과 같이 사용한다면 background-color 를 유지할 수 있습니다

  el2.style = el2.style.cssText + "; padding: 8px; width: 320px; height: 240px";
1

# 성능

크롬 84 의 performance 메뉴에서 확인한 결과

# el1

image

위 이미지를 시간별로 확인을 해보면 image

image image

....

# el2

image

# el3

image

거의 비슷한 시간과 렌더링 과정을 가지는 것을 보아 엔진이 최적화를 하는 것 같습니다

크롬 84 기준.

의외로 첫 방법이 평균적으로 제일 빨랐습니다. 크롬에서 사용하는 엔진 동작을 잘 모르기 때문에 상세한 이유는 잘 모르겠네요

# 형욱

Repaint : 이 Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 렌더링 트리를 화면에 픽셀로 변환

중요) DOM이 화면을 변화시키는가? => 변화시킨다 => reflow 발생(Dom트리 변화=>CSSOM변화 =>Render tree 변화) => repaint를 통해 브라우저 출력

픽셀로 변환하는 것과 브라우저로 출력하는 행위는 다릅니다. 정확히 말하자면 repaint를 통해 브라우저 출력 하는 것이 아니라 Composite 이라는 합성 과정을 통해 브라우저에 출력하게 됩니다 image

← step17 →