2024. 12. 31. 15:03ㆍBackup
https://www.perplexity.ai/search/beuraujeoga-hwamyeoneul-geurin-scPvgEegSjC4SQDjv397ZQ#1
https://f-lab.kr/insight/understanding-browser-rendering-process-20240711
https://d5br5.dev/blog/deep_dive/browser-paint
https://web.dev/articles/howbrowserswork?hl=ko
브라우저의 작동 방식 | Articles | web.dev
이 페이지는 Cloud Translation API를 통해 번역되었습니다. 브라우저의 작동 방식 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 최신 웹브라우저의 비하인드 스
web.dev
https://web.dev/articles/critical-rendering-path/constructing-the-object-model?hl=ko
객체 모델 생성 | Articles | web.dev
브라우저가 DOM 및 CSSOM 트리를 생성하는 방법에 대해 알아봅니다.
web.dev
https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko
렌더링 트리 생성, 레이아웃 및 페인트 | Articles | web.dev
주요 렌더링 경로에서 중요한 한 가지 단계는 렌더링 트리를 생성하고, 레이아웃 작업을 실행하여 이 트리에서 페이지를 생성하고, 결과 페이지의 픽셀을 화면에 칠하는 것입니다.
web.dev
https://html.spec.whatwg.org/multipage/parsing.html
1. 네트워크 요청
브라우저 렌더링 과정의 첫 번째 단계는 네트워크 요청입니다. 사용자가 URL을 입력하면 브라우저는 해당 URL에 대한 HTTP 요청을 서버로 보냅니다. 서버는 요청을 받아 HTML 파일을 응답으로 보냅니다.
이 과정에서 중요한 개념 중 하나는 DNS(Domain Name System)입니다. 왜냐하면 브라우저가 URL을 IP 주소로 변환하기 위해 DNS 서버에 쿼리를 보내기 때문입니다. DNS 서버는 도메인 이름을 IP 주소로 변환하여 브라우저에 반환합니다.
또한, CDN(Content Delivery Network)도 중요한 역할을 합니다. CDN은 서버가 멀리 있을 때 응답 시간을 줄이기 위해 캐시 서버를 사용합니다. 유저가 요청을 보내면 CDN에 캐시된 데이터가 있으면 빠르게 응답을 받을 수 있습니다.
네트워크 요청 단계에서 중요한 또 다른 개념은 HTTP와 HTTPS의 차이입니다. HTTPS는 HTTP에 보안 계층을 추가한 프로토콜로, 데이터 전송 중에 암호화를 제공합니다. 왜냐하면 보안이 중요한 웹 애플리케이션에서는 HTTPS를 사용하는 것이 필수적이기 때문입니다.
2. HTML 파싱 및 DOM트리 생성
HTML 파싱 과정에서 브라우저는 HTML 태그를 읽고, 이를 DOM 트리의 노드로 변환합니다. 이 과정은 순차적으로 이루어지며, 브라우저는 HTML 문서를 위에서 아래로 읽어 내려갑니다.
~ HTML 파싱 중에 브라우저는 외부 리소스(예: CSS 파일, 자바스크립트 파일)를 만나면 이를 다운로드하고, 파싱을 일시 중지 ~
3. CSS 파싱 및 CSSOM 트리 생성
브라우저가 CSS 파일을 다운로드하면, 이를 파싱하여 CSSOM 트리를 생성
4. JavaScript 실행
자바스크립트 파일을 효율적으로 로드하기 위해 defer와 async 속성을 사용할 수 있습니다. defer 속성은 HTML 파싱이 완료된 후 자바스크립트를 실행하며, async 속성은 자바스크립트를 비동기적으로 로드하여 실행
5. 렌더 트리 생성
6. 레이아웃 (Layout) 계산
페인팅 과정에서 브라우저는 효율성을 높이기 위해 레이아웃을 나눠서 작업합니다. 이 과정은 레이아웃 스레싱(layout thrashing)을 방지하기 위해 중요합니다. 왜냐하면 레이아웃 스레싱은 성능 저하를 초래할 수 있기 때문
7. 페인트 (Paint)
페인팅이 완료되면, 브라우저는 합성(compositing) 단계를 수행합니다. 합성은 여러 레이어를 결합하여 최종적으로 화면에 렌더링하는 과정입니다. 이 과정은 GPU를 활용하여 성능을 최적화
8. 컴포지팅 (Compositing)
합성 과정에서 중요한 개념 중 하나는 레이지 로딩(lazy loading)입니다. 레이지 로딩은 필요한 리소스를 나중에 로드하여 초기 로딩 시간을 줄이는 기술입니다. 왜냐하면 초기 로딩 시간을 줄이면 사용자 경험이 향상되기 때문입니다.
또한, 강제 동기 레이아웃(forced synchronous layout)도 중요한 개념입니다. 강제 동기 레이아웃은 자바스크립트 코드가 DOM 트리나 CSSOM 트리에 영향을 미칠 때 발생합니다. 이 과정은 성능 저하를 초래할 수 있으므로 주의가 필요
repaint / reflow(더욱 지양 )
무엇이 Reflow를 유발시키는가?
특정 엘리먼트에 스타일변화가 발생했을 때, 그 개체가 가진 자식요소에 대한 레이아웃 재정리를 위해 Reflow가 실행된다. 설령 그 변화가 그 자식요소 및 페이지에는 아무 영향을 미치지 않을지라도, 기계는 이를 미리 알고있지 못한다. 따라서 작은 변화에도 자식개체는 물론, 페이지 전체에 Reflow가 실행된다. Mozilla에 따르면 다음의 케이스에서 Reflow가 발생한다고 한다.
- 윈도우 리사이징
- 폰트의 변화
- 스타일 추가 또는 제거 내용 변화 (인풋박스에 텍스트 입력 등..)
- :hover와 같은 CSS Pseudo Class
- 클래스 Attribute의 동적 변화
- JS를 통한 DOM 동적 변화 엘리먼트에 대한 offsetWidth / offsetHeight (화면에서 보여지는 좌표) 계산시
- 스타일 Attribute 동적변화
Reflow를 피하거나 그 영향을 최소화하는 방법 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조 상 끝단에 위치한 노드에 주어라.
인라인 스타일을 최대한 배제하라.
애니메이션이 들어간 엘리먼트는 가급적 position:fixed 또는 position:absolute 로 지정 퀄리티와 퍼포먼스 사이에서 타협하라
테이블 레이아웃을 피하라
IE의 경우, CSS에서의 JS표현식을 피하라.
JS를 통해 스타일변화를 주어야 할 경우, 가급적 한번에 처리하라. CSS Rules는 필요한 만큼만 정리하라.
position:relative 사용 시 주의하자
| React | Next.js | |
| 초기 요청 처리 | 서버는 최소한의 HTML을 클라이언트에 전송 이 HTML에는 JavaScript 번들에 대한 링크가 포함 |
서버는 완전히 렌더링된 HTML을 클라이언트에 전송 |
| JavaScript 로딩 | 클라이언트는 전체 JavaScript 번들을 다운로드하고 실행 | 필요한 JavaScript만 로드 |
| 컴포넌트 렌더링 | 모든 컴포넌트는 클라이언트 측에서 렌더링됩니다(CSR) | 컴포넌트는 서버에서 미리 렌더링될 수 있으며(SSR/SSG), 클라이언트에서 하이드레이션됩니다. 또한 클라이언트 사이드 렌더링도 지원 |
| 데이터 페칭 | 일반적으로 컴포넌트가 마운트된 후 useEffect 훅을 사용하여 클라이언트 측에서 데이터를 가져옴 | getServerSideProps, getStaticProps, 또는 새로운 App Router의 서버 컴포넌트를 사용하여 서버 측에서 데이터를 미리 가져올 수 있음 |
| 라우팅 | 클라이언트 사이드 라우팅을 위해 React Router와 같은 추가 라이브러리가 필요 | 파일 시스템 기반의 라우팅을 제공하며, 페이지 간 전환을 자동으로 최적화 |
| 성능 최적화 | 개발자가 수동으로 최적화 작업을 수행해야 합니다(예: 코드 분할, 레이지 로딩) | 자동 이미지 최적화, 폰트 최적화, 스크립트 최적화 등 다양한 성능 최적화 기능을 기본적으로 제공 |
| 스타일링 | CSS-in-JS, CSS 모듈, 일반 CSS 등 다양한 방식을 사용할 수 있음. | React와 동일한 스타일링 옵션을 제공하면서도, CSS 모듈과 Sass를 기본적으로 지원합니다. 또한 styled-jsx를 내장하고 있어 컴포넌트 범위의 CSS https://nextjs.org/docs/app/building-your-application/styling/css-in-js |
| 빌드 프로세스 | 일반적으로 Create React App 또는 사용자 정의 웹팩 설정을 사용하여 정적 파일을 생성 | 개발 서버와 프로덕션 빌드를 위한 통합 솔루션을 제공합니다. SSR, SSG, ISR(Incremental Static Regeneration) 등 다양한 렌더링 전략을 지원 |
| SEO 및 초기 로드 성능 | CSR로 인해 SEO와 초기 로드 성능에 제한 | SSR과 SSG를 통해 더 나은 SEO와 초기 로드 성능을 제공 |
| 서버 기능 |
별도로 구현 | 풀스택 애플리케이션 개발을 지원 |
뜬금없지만 컴포지팅 과정 중 브라우저에 의해 호출되는 프로세스와 별개로 WebGPU API를 활용하는
https://doc.babylonjs.com/setup/starterHTML/
- 시각적 업데이트에 setTimeout 또는 setInterval을 피하고 대신 항상 requestAnimationFrame을 사용합니다.
- 메인 스레드를 벗어나 오래 실행되는 JavaScript를 Web Workers로 이전합니다.
- 마이크로 작업을 사용하여 여러 프레임에서 DOM을 변경합니다.
- Chrome DevTools의 Timeline 및 JavaScript 프로파일러를 사용하여 JavaScript의 영향을 평가합니다.
https://web.dev/articles/optimize-javascript-execution?hl=ko#summary
'Backup' 카테고리의 다른 글
| 소스맵과 sentry (0) | 2024.08.27 |
|---|---|
| vue official extension || prevent autocomplete in visual studio code (1) | 2024.07.15 |
| vscode extensions (0) | 2024.07.03 |
| vue.js 반복문 사용시 | slot (0) | 2024.06.28 |
| vuevuevue (2) | 2024.06.23 |