오늘 또 새로운 정보를 알았다! (흥분)
회사의 다른 부서에서 사용중인 페이지가 너무 기니까 랙을 먹어
불편하다고 말이 나와 고민중에 옆 선배한테 물으니 CSS 가속화 작업을 한번 해보라고 하셨다!
CSS 가속화요...?😬
문제된 페이지는 sortable을 많이 사용한 페이지였다.
그렇다 보니 Reflow와 Repaint 작업이 많이 발생 할 수 밖에 없었다😫
Reflow와 Repaint를 모르고 계시다면 CSS랜더링에 관한 정보를 참고하시면 된다 :)
나는 위치가 이동될 수 있다고 미리 알려주는 css속성인 will-change를 걸어주었다.
will-change:top, left;
다른 필요 지식이 더 있지만 아래의 참고 블로그에 너무 잘 정리해주셔서 기타 필요한 상세 내용은 적지 않겠다.
꼭 참고 블로그를 읽어보길 바란다 :)
기타 상세 내용 ( CSS GPU )
참고1 - https://web-atelier.tistory.com/39
참고2 - https://wit.nts-corp.com/2017/08/31/4861
'웹 프로그래밍 > 공부일지' 카테고리의 다른 글
| [CSS] 물결이 차오르는 텍스트 ( 로딩 효과 ) (0) | 2020.08.05 |
|---|---|
| [JS] 달라진 텍스트 표시 라이브러리 (0) | 2020.06.17 |
| [Node.js / React.js ] 나 했다 도전! 리엑트 튜토리얼 (0) | 2020.05.20 |
| [ Node.js / Webpack ] 개발 환경 (0) | 2020.04.04 |
| [ HTML ] 비디오 태그 자동재생 관련 옵션 (0) | 2020.04.03 |