목차
TagName
, Attribute
, AttributeValue
<meta>
, <script>
, <link>
, display: none;
등의 요소는 제외하고 구성됨width
, position
, float
등opacity
, color
, background-color
, visibility
등💡 computed style?
- CSS는 Cascading style sheet로, 선언 방식or위치에 따라 우선순위가 나뉜다.
- 우선순위(inline > internal > external)에 따라 적용된 최종 style을 computed style이라고 한다.
이러한 reflow, repaint는 이벤트가 일어나 화면이 변경되었을 때에도 발생한다.
코드와 함께 확인해보자.
let elStyle = document.body.style;
// dimension 상 변화 O + 화면상 변화 O => reflow + repaint
elStyle.padding = '15px 10px';
elStyle.border = '1px solid red';
elStyle.fontSize = '30px';
// dimension 상 변화 X + 화면상 변화 O => repaint only
elStyle.color = 'white';
elStyle.backgroundColor = 'black';
// element append : dimension상 변화 O + 화면상 변화 O => reflow + repaint
document.body.appendChild(document.createElement('H1'))
이와같이, DOM element의 구조적인 dimension 상 변화가 있다면 reflow, 화면상의 픽셀값이 변화하면 repaint가 일어나는 것을 확인할 수 있다.
그 외에도 JS에서 reflow/repaint 관련 syntax를 사용할 때에도 발생한다.
getComputedStyle()
, scroll()
, .focus()
, .style
reflow, repaint의 발생 빈도를 줄이면 아래의 것들이 개선될 수 있다.
const root = document.querySelector('#root');
// ex1. documentFragment 객체 사용하기
const fragment = new documentFragment();
fragment.append(document.createElement('h1'));
fragment.append(document.createElement('h2'));
fragment.append(document.createElement('h3'));
root.append(fragment);
두번째 예시는 ex1과 선언 방식만 다르고 거의 동일하다.
// ex2. createElement('fragment') 컴포넌트 활용하기
const fragment = document.createElement('fragment');
// ex1과 동일
fragment.append(document.createElement('h1'));
fragment.append(document.createElement('h2'));
fragment.append(document.createElement('h3'));
root.append(fragment); // ex1과 동일
세번째 예시는 ex1, ex2 비슷하지만, append할 요소들을 포괄하는 컴포넌트가 같이 추가된다는 차이점이 있다.
// ex3. fragment 사용 없이 가상 메모리 이용하기
const divEl = document.createElement('Div');
// ex1, ex2와 변수명만 다름
divEl.append(document.createElement('h1'));
divEl.append(document.createElement('h2'));
divEl.append(document.createElement('h3'));
root.append(divEl); // ex1, ex2와 변수명만 다름
같은 맥락으로, 변경사항이 여러번 발생하는 element라면 변수에 캐싱하는 것도 도움이 될것 같다.
class
, cssText
사용하기해당 게시글이 참고한 github documnet에 따르면, 다음과 같은 유의점이 기재되어있다.
${CSS_selector}
) : :even
, :has
, :gt
, :eq
피하기querySelectorAll
, Array.prototype.filter
등Render Tree 구성은 보여지는 노드들을 대상인 점을 이용한다.
기본적으로 보여지지 않는 element들에 대해서는 미리 display: none;
처리를 하거나, visible한 케이스를 분리해 주는 것도 도움이 될 것이다.
<style>
태그 사용하기position: absolute
, position: fixed
등을 활용하기 : 리소스 감소에 도움을 준다.