티스토리 뷰
🚀 개요
[패스트캠퍼스X야놀자 FE 부트캠프] HTML/CSS/JS 리팩토링1 - Intersection Observer
🚀 개요 야놀자 X 패스트캠퍼스 프론트엔드 개발 부트캠프에서 이전 토스 클론 코딩하여 배포한 것을 멘토님과 피어리뷰를 통하여피드백을 받고 이를 리팩토링 할 시간과 기회를 얻게 됐다. 성
koeyhhh.tistory.com
멘토님과 동료님들의 피드백을 확인할 수 있다. 성능 측면에선 크게 두가지 피드백을 받았다.
1. 기존 scroll 이벤트들이 등록되다보니 메모리 누수가 발생할 가능성이 높고 성능 저하가 일어난다. => CSS나 JS 내장 애니메이션을 통하여 개선하는 것이 좋아보인다.
2. Opacity가 0 <=> 1로 바뀌는 부분에서 Reflow가 발생할 수 있다. Repaint와 Reflow 에 대해서 고민할 필요가 있다 => 브라우저의 렌더링 원리와 Opacity 와 관련된 링크 첨부
이번엔 두번째 피드백에 대해서 살펴보자. Opacity가 0, 1로 바뀔 경우 Reflow가 발생할 여지가 있다. 결과적으로 말하면, 내 작업물에서는 Opacity가 변경 될 때, Reflow가 발생하지 않았다. 이번엔 리팩토링이라고 하기엔 뭐하지만, 대신에 브라우저 렌더링 과정과 여기에서 어떤 부분에 조심해야한다고 멘토님이 얘기해주셨는지 확인해보자.
KDT0_ChoiWuHyeok 토스 홈페이지 클론 코딩 제출 by TaePoong719 · Pull Request #10 · KDT1-FE/Y_FE_HTML_CSS
🎃토스 홈페이지 클론 코딩 🐶개요 간결하면서 전달력이 좋고 예쁜 UI를 가지고 있고 레거시가 적어보이는 웹사이트를 골랐습니다. 타 웹사이트보다 요소와 이벤트의 양이 훨씬 많음에도, 도
github.com
😛 브라우저 구성
브라우저는 User Interface와 Browser Engine, Rendering Engine, 네트워크 모듈, JS 엔진, 데이터 영역 등으로 이루어져있다.
사용자 인터페이스는 우리가 브라우져상 볼 수 있는 주소표시줄, 뒤로가기 등의 GUI부분을 포함한다. 사용자가 컨트롤 할 수 있는 부분을 의미한다.
브라우져 엔진은 브라우저 프로그램의 중추이다. Data Storage 를 참조할 수 있고 사용자가 주소창에 입력한 값을 렌더링 엔진에게 전달하여준다.
렌더링 엔진은 html, css 등을 파싱하고 합쳐서 렌더트리를 구성하고 이를 화면에 출력하는 역할을 수행한다. safari 브라우져는 웹킷, chrome은 블링크, firefox는 Gecko 엔진을 사용한다.
네트워크 모듈은 랜더링 엔진으로부터 HTTP 요청을 받아 서버에게 요청하고, 리소스를 받아 렌더링엔진에게 돌려주는 역할을 한다.
🧐 브라우저 렌더링 과정 (Reflow와 Repaint 포함)
렌더링 엔진에서 HTML, CSS가 파싱되고 합쳐진다고 했는데 간단하게 순서를 나눠보면 다음과 같이 진행된다.
1. HTML 을 다운 받아 파싱한다. 파싱하던 중 script태그나 link 태그를 만날 경우 파싱을 중단하고 리소스를 요청한다.
2. HTML 파싱이 완료되면, DOM Tree를 구축한다. img 태그 같은 경우는 파싱되지 않는다.
3. CSS 파싱을 완료하고 CSSOM Tree를 구축한다
4. DOM Tree와 CSOM Tree를 합쳐 렌더트리를 구축한다. (Display: none 같은 경우 DOM Tree에 존재하지만, 렌더트리에 존재하지 않는다.) 렌더트리에는 실제 화면이 나타나는 요소만 의미한다.
5. Layout 단계 : 렌더트리의 요소들이 어떻게 보여질 지 계산된다.
6. Painting 단계 : 계산된 결과물을 화면에 그린다.
7. 화면에 HTML이 나타난다.
재렌더링 시 발생되는 Reflow와 Repaint 단계는 각각 다음과 같다. Reflow는 5,6,7 단계가 반복되는 것이고, Repainting 단계는 6,7 단계가 반복되는 것을 의미한다.
아래는 Reflow를 발생시키는 DOM API이다.
`
Element
| clientHeight | clientLeft | clientTop | clientWidth |
| focus | getBoundingClientRect | getClientRects | innerText |
| offsetHeight | offsetLeft | offsetParent | offsetTop |
| offsetWidth | outerText | scrollByLines | scrollByPages |
| scrollHeight | scrollIntoView | scrollIntoViewIfNeeded | scrollLeft |
| scrollTop | scrollWidth |
MouseEvent
| layerX | layerY | offsetX | offsetY |
Window
| getComputedStyle | scrollBy | scrollTo | scrollX |
| scrollY |
Frame, Document & Image
| height | width |
😵 Opacity가 Reflow를 일으키는 경우
Opacity같은 경우 Reflow가 아니라 Repaint를 일으키는 CSS 속성이라고 알려져 있다. 이와 관련된 자세한 정보는 CSS Trigegers 페이지에 나와있다. 내 경우 F12 성능 측정으로 확인해 본 결과 크롬브라우져에선 Layout 과정이 일어나지 않았고, Repainting 과정만 발생하였다. 실제로 Opacity 만 변경하였지만, Reflow 가 일어난 경우가 있었고, 아래분이 트러블 슈팅 과정을 자세히 설명해 주셔서 나도 이에 대해 깊게 공부할 기회를 얻게 됐다.
Render 트리가 만들어지고, 이를 바탕으로 화면에 표현될 Layer가 구성되는데, 3차원 개념을 도입하기 위해 Painting Layer로 Contex Layer를 쌓는다. 이떄 Painting Layer 에서 GPU로 처리해야하는 층이 있으면 Graphics Layer 를 구성한다.
아래는 Painting Layer 의 트리거 조건이다.
1. 문서의 루트요소인 <html>
2. position이 absolute 또는 relative이고, z-index가 auto가 아닐때.
3. position이 fixed 또는 sticky인 요소
4. 플렉스(flexbox) 컨테이너의 자식 요소 중 z-index가 auto가 아닐때.
5. 그리드(grid) 컨테이너의 자식 요소 중 z-index가 auto가 아닐때.
6. opacity가 1보다 작을 때
7. mix-blend-mode가 normal이 아닐 때.
8. 다음 속성 중 하나라도 none이 아닐 때 : transform, filter, perspective, clip-path, mask
9. isolation이 isolate일 때.
10. -webkit-overflow-scrolling이 touch일 때.
11. will-change의 값으로 초기값이 아닐 때 새로운 Stacking Context를 생성하는 속성을 지정했을 경우
12. contain이 layout, paint 또는 둘 중 하나를 포함하는 값(strict, content등)인 경우
13. 화면에 보이지 않지만 층을 이룰 때
6번을 살펴보면, opacity 에 1을 준 경우와, opacity에 1을 제외한 수를 준 경우에는 다른 Painting Layer를 만들게 된다. 그러다보니, Opacity가 0.3 <=> 1로 바뀔 경우, Reflow가 발생하는 것이다.
https://blinders.tistory.com/93
[CSS] opacity는 reflow가 발생 안 한다구요...? 정말??
0. 왜 이 포스팅을 쓰게되었는지에 대하여. 이 포스팅은 계획에 없던 포스팅이다. 사실 CSS Triggers에 대한 포스팅은 저번 포스팅으로 끝내려고 했었다. 근데 왜 또, 포스팅을 작성하고 있냐...면,
blinders.tistory.com
💡마치며
CSS Triggers를 잘 참고하여 Reflow와 Repaint에 대한 속성을 익혀, 되도록이면 Repaint 속성을 지양하며 사용을 하되, 어쩔 수 없이 Reflow 속성을 사용하여야 하는 경우에는 이를 인지하고 있는 것이 중요하다. 이전 블로그 글에서 getBoundingClientRect() 메소드를 열개 가까운 스크롤 이벤트에 사용을 하였는데, 이는 수 초만에 수 천,만 번의 Reflow를 불러일으켜 큰 성능 저하를 일으켰을 것이라고 유추할 수 있었다.
또한 브라우저 렌더링 과정을 익히게 됐고, 브라우져상 3차원을 나타내다보니 Paint Layer를 층으로 쌓게 됐고, 이에 따른 Layer를 합치고 분해하는 과정이 발생하였는데, 분명 Repaint 과정을 기대한 속성에서도 얘기치 못하게 Layering 에 의해 Reflow가 발생하는 상황도 알게 됐다.
이에 따라 성능 측정시 디버깅 방식도 익혔으며, 개발 환경에서도 앞으로 이 상황을 생각하며 렌더링 성능 향상에 기여할 수 있도록 꾸준히 노력해야겠다.
참조
https://dkrnfls.tistory.com/306
브라우저 구성, CRP, reflow, repaint, DOM, layout thrashing, requestAnimationFrame 🌱
reflow는 레이아웃 -> 페인트 -> 합성 이 이루어지는 것을 말하고 repaint는 페인트 -> 합성이 이루어지는 것을 말합니다. 레이아웃 단계에서 노드 들이 ViewPort(뷰포트) 내에 위치하는 위치를 계산하게
dkrnfls.tistory.com
CSS Triggers List - What Kind of Changes You Can Make
Check out our ultimate list of CSS triggers and learn which changes you can make on your website and it will affect your properties.
csstriggers.com
Reflow와 Repaint에 대하여
내가 자주 헷갈리는 개념인 reflow와 repaint에 대해서 공부한 내용을 정리해 보려고 한다. 브라우저 렌더링 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는
devowen.com
https://blinders.tistory.com/93
[CSS] opacity는 reflow가 발생 안 한다구요...? 정말??
0. 왜 이 포스팅을 쓰게되었는지에 대하여. 이 포스팅은 계획에 없던 포스팅이다. 사실 CSS Triggers에 대한 포스팅은 저번 포스팅으로 끝내려고 했었다. 근데 왜 또, 포스팅을 작성하고 있냐...면,
blinders.tistory.com
#패스트캠퍼스 #부트캠프 #프론트엔드개발자 #국비지원취업 #국비지원
'웹 개발' 카테고리의 다른 글
| [프론트엔드 CI/CD 적용] React 프로젝트, Github Actions, Netlify 이용한 CI/CD 자동화 적용기 (2) | 2023.10.05 |
|---|---|
| [리팩토링/성능개선] 스켈레톤 UI 적용하기 JS과제 리팩토링 (0) | 2023.08.28 |
| [리팩토링 / 성능개선] 리팩토링(Intersection Observer) (2) | 2023.08.07 |
| [HTML/CSS/Vanilla JS] 스크롤 애니메이션 (2) | 2023.07.27 |
| [React TS + CSS] 클릭시 퍼지는 버튼 메뉴 만들기 (0) | 2023.02.12 |
- Total
- Today
- Yesterday
- 부트캠프
- Not Working
- 인프콘 2023
- 사이드프로젝트
- next 14
- 리뷰
- 패스트캠퍼스
- kpt
- FE
- 로딩성능
- 개발자 회고
- Github Actions
- no found
- ci/cd
- Tailwind CSS
- 깃허브 사용법
- 모노레포
- 이미지최적화
- 프론트엔드 성능
- Vercel
- netlify
- 깃허브
- 국비지원취업
- 성능 개선
- FE 주니어
- JavaScript
- 국비지원
- RARS
- 성능 측정
- 프론트엔드개발자
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |