![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/L65qa/btr2ZB4Iwy6/gXlJkK69ll7sHTCuFZ6x11/img.png)
브라우저 원리 HTML parsing → Dom 생성 CSS parsing → CSSOM 생성 DOM + CSSOM → render tree 셍성 layout → 위치와 크기를 계산한다 paint → 화면상에 실제 픽셀로 변환하여 레이어를 만든다, 색 채워넣기 composite → 레이어를 합성하여 실제 화면에 나타낸다. Reflow, Repaint layout 과정과 paint과정이 자주 일어나게 되면 웹성능이 저하된다. layout과 print 과정을 피하는 방법에 대해 알아보자. Reflow 정의 기존의 엘리멘트의 크기나 위치가 변경되는 경우 DOM 과정부터 모든과정을 다시 계산하는 과정 성능을 가장 떨어트리게 되는 부분이며 성능최적화가 가장 많이 일어나는 곳이다. width, height, fon..
프론트엔드
2023. 3. 9. 18:25
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- useCallback과 useMemo 사용
- storybook react is not defiend 해결
- react suspense
- 에러핸들링
- 미로탈출 명령어
- 자바스크립트
- 백준 1600번
- nextjs errorboundary
- javascript
- nextjs 에러핸들링
- 가장 긴 짝수 연속한 부분 수열
- 서비스 디자인 패턴
- React useCallback
- 표현 가능한 이진트리
- nestjs 배포하기
- 불량 사용자 자바스크립트
- 선언적 UI
- 서버사이드 error handling
- serverless 배포
- storybook scss이슈
- 관심사 분리하기
- storybook scss import
- serverless nestjs
- 1600 파이썬
- node 버전 마이그레이션
- CSS
- node version yarn berry
- 백준 22862
- suspense 장점
- React useMemo
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함