웹 성능을 최적화하는 기본적인 방법

브라우저가 는 처음에 HTML을 파싱해서 DOMtree를 만들고, CSS를 파싱해서 CSSOM tree를 만든다.

그리고 DOMtree와 CSSOMtree가 합쳐져서 Render tree를 만든다.

여기서 Rendertree는 DOMtree와 항상 일치하지는 않는다. Rendertree는 시각적 측면에서 화면을 올바른 순서대로 그리는것이 목적이기 때문이다.

예를 들어 display:none의 경우에는 Rendertree에서 제외된다. 이 이후에 레이아웃을 그리는 리플로우와 페인트작업을 하는 리페인트 단계를 거치는데 만약 리플로우나 리페인트를 할 필요가 없다면 이 단계는 넘겨질 수 있다.

따라서 성능면에서 가장 이상적인 것은 두 단계 모두 제외되는것이다.

또한 리플로우는 전체 픽셀을 다시 계산해야 하기때문에

웬만하면 리페인트속성으로 스타일을 작성하는것이 성능면에서 좋다.

결론 : 리플로우 속성 대신 되도록 리페인트 속성을 사용하자.

​

성능 최적화 하기

1. 비슷한 형태의 작업끼리 그룹을 묶어 실행되도록 순서를 변경

2. 리플로우와 리페인트가 일어날 수 있는 작업은 실행 사이클 안에서 실행하도록 처리

3. display사용한다.:값을 여러번 변경해야하는 경우 초반에 display:none으로 보이지 않게하고 마지막에 display:block으로 한다(리플로우 발생이 두번으로 줄어듬)

4. 위의 3번과 비슷한 방법인데 값을 여러번 변경해야하는 노드를 복제한 후 복제된 노드에 작업을 실행시킨다 그리고 작업이 모두 완료된 후에 기존 노드에 복제노드의 값을 넣어준다 (리플로우 발생이 두번으로 줄어듬)

5. createDocumentFragment()메서드 사용

6. 자주 사용하는 메소드의 값은 변수에 저장

7. 요소의 개수가 많아지면 CSS규칙을 생성(요소의 개수가 적을때는 각각접근해 처리하는 방식이 더 빠름)

8. 사용하지 않는CSS제거하기 (구글 크롬 라이트하우스에서 확인 가능)

9. 스타일 작성은 간결하게 복잡한 셀렉터 사용은 거슬러 올라가는 시간을 소요하기때문에 간결하게 사용하는 것이 좋다.(부모요소는 되도록 뺀다. )

10. DOMtree는 되도록 얕게 하는것이 빠르다.

11. 애니메이션은 되도록 css로 구현

12. 애니메이션을 구현할때 가능한 transform으로 구현(리페인트와 리플로우 둘 다 발생시키지 않음)

13. 애니메이션을 구현할때 position 을 absolute나 fixed로 설정하면 주면요소에 영향을 주지 않음

14. 높이가 모두 다른 여러개의 콘텐츠가 있을때 부모의 높이를 고정하여 사용(자식의 높이를 변경하면 부모의 엘리먼트도 영향을 받기때문)

15.여러개의 엘리먼트가 인라인으로 놓여있을때 앞의 엘리먼트의 width값이 변경되면 이후의 엘리먼트들의 위치 변경이 일어나므로 유의

​

​

​

리플로우를 발생시키는 속성	리페인트를 발생시키는 속성
position width / height margin / padding display top / left / right / bottom box-sizing border-color text-align border / border-width font-family float font-size font-weight line-height vertical-align white-space word-wrap text-overflow text-shadow	color / border-style visibility background background-color background-image background-position background-repeat background-size text-decoration outline outline-style outline-color outline-width border-radius box-shadow