reflow, repaint를 피하거나 최소화
1. transition(CSS option)
성능 개선? 주제에 맞는 내용은 아니지만 부드러운 애니메이션을 구현하고 싶을때 참고
transform 속성은 reflow, repaint가 일어나지 않고 composite만 발생
(transform, opacity, cursor, orphans, perspective등도 Reflow, Repaint를 건너 뛴다,
원리는 브라우저에서 GPU를 사용해 하드웨어 가속하는 Update Layer Tree라는 내용 참고)
https://kyu9341.github.io/WEB/2021/02/03/WEB_GPU/
WEB - 하드웨어 가속 - kwon | kwon's Blog
하드웨어 가속 특정 작업을 CPU가 아닌 다른 특별한 장치를 통해 수행 속도를 높이는 것을 ‘하드웨어 가속(hardware accelerated)’이라 한다. 그래픽이나 사운드와 관련된 작업에 하드웨어 가속을 많
kyu9341.github.io
transition은 CSS 프로퍼티의 값이 변화할때 즉시 변화하는게 아니라
부드럽게 일정 시간에 걸쳐 일어나게 해준다
아래 예시 그림을 보자.
코드
<head>
<style>
.test-div {
width: 100px;
height: 100px;
background: red;
}
.test-div:hover {
border-radius: 50%;
background: blue;
}
</style>
</head>
<body>
<div class="test-div"></div>
</body>
네모에 마우스를 올리면 즉시 동그라미로 바뀐다.
그럼 transition 옵션을 부여한다면?
코드
<head>
<style>
.test-div2 {
width: 100px;
height: 100px;
background: red;
/* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
transition: all 2s;
}
.test-div2:hover {
border-radius: 50%;
background: blue;
}
</style>
</head>
<body>
<div class="test-div2"></div>
</body>transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다.
2. 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조 상 끝단에 위치한 노드에 추가
(부모가 바뀌면 자식에게도 영향을 준다?)
3. 애니메이션이 들어간 엘리먼트는 가급적 position: fixed 또는 position: absolute로 지정
애니메이션이 들어간 요소에 position: absolute 혹은 position: fixed 속성을 적용하면 다른 요소에는 영향을 끼치지 않으므로 페이지 전체가 아닌 해당 요소만 reflow가 발생
3. JS를 통해 스타일변화를 주어야 할 경우, 가급적 한번에 처리
var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].style.height = '80px';
div[i].style.backgroundColor = '#00f';
div[i].style.display = 'inline-block';
div[i].style.overflow = 'hidden';
div[i].style.fontSize = '40px';
div[i].style.color = '#fff';
}한번 style을 바꿀때마다 dom 조작이 일어나고 reflow-repaint가 일어난다.
즉, 순차적으로 dom 조작이 발생하는 식이다.
바꾸고 싶은 스타일을 담은 css class를 하나 만드는 식으로 구현하고, tag에 class를 붙이는 식으로 구현하자.
toggle이나 classList.add, classList.remove 등을 사용해서 js에서 class를 떼고 붙일 수 있다.
classList에 대한 내용)
https://hyunjungchoi.tistory.com/70
자바스크립트 classList를 써야하는 이유
~잠깐 사담~ 아직 공부한 지 얼마 안 됐지만, 자바스크립트는 너무 어렵다.ㅠㅠ 파이썬, 자바를 처음 배울때 보다 훨씬 어려움....ㅠㅠㅠㅠ 게다가 지금 챌린지 중인데, 잘하시는 분들 너무 많아
hyunjungchoi.tistory.com
혹은 cssText를 이용한다.
// Modal.jsuseEffect(() => {
document.body.style.cssText = `position: fixed; top: -${window.scrollY}px`
return () => {
const scrollY = document.body.style.top
document.body.style.cssText = `position: ""; top: "";`
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
}, [])
4. 인라인 스타일을 최대한 배제
3번 내용과 중복, reflow 비용을 줄이는 것 이외에 코드 가독성도 높일 수 있다.
5. 테이블 레이아웃을 피하는 것이 좋다.
테이블 값에 따라 넓이를 계산 -> 렌더링이 느려진다
만약 사용한다면 CSS 속성 table-layout:fixed를 사용하면 랜더링을 조금 더 빠르게 할 수 있다.
6. CSS 하위선택자는 필요한 만큼 정리
/* 잘못된 예 */
.reflow_box .reflow_list li .btn{
display:block;
}
/* 올바른 예 */
.reflow_list .btn {
display:block;
}불필요한 선택자는 성능 저하
7. will-change 사용
미리 변화가 예상되는 요소를 브라우저에게 알려주는 기능이라는데 실제로 써보진 않았다.
불필요한곳에 남용하면 오히려 성능 저하를 일으킬 수 있는 요소
8. transform: translateY()등 이용
이동 애니메이션시 left, right 보다는 transform 이용(GPU 가속)
reference
https://poiemaweb.com/css3-transition
CSS3 Transition | PoiemaWeb
트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티
poiemaweb.com
https://wit.nts-corp.com/2017/06/05/4571
CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) | WIT블로그
CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)
wit.nts-corp.com
효율적인 리액트 모달(react-modal) 만들기
안녕하세요.
medium.com
'Front-end > CSS' 카테고리의 다른 글
| font-family 상속 시키기 (0) | 2022.11.04 |
|---|---|
| css 챌린지 (0) | 2022.10.05 |
| [CSS] box-sizing (0) | 2022.07.11 |
| [CSS] Gap (0) | 2022.06.13 |
| loading spinner (2) | 2022.02.13 |