테크커런트

📖 본문1. 크리티컬 렌더링 패스란?브라우저가 HTML, CSS, JavaScript를 해석하고,**사용자가 볼 수 있는 화면(Pixel)**으로 만드는 전체 과정을 말합니다.즉, “코드를 → 화면”으로 바꾸는 여정이죠.2. 단계별 과정① HTML 파싱 → DOM 생성브라우저가 HTML 파일을 위에서부터 한 줄씩 읽음태그를 구조화하여 DOM(Document Object Model) 트리로 만듦② CSS 파싱 → CSSOM 생성 또는 태그의 CSS를 해석CSS 규칙을 트리 구조로 만들어 CSSOM 형성③ Render Tree 생성DOM + CSSOM 결합 → 렌더 트리(Render Tree) 생성실제 화면에 보여질 요소와 스타일 정보만 포함④ 레이아웃(Layout)각 요소의 크기와 위치 계산반응형이라면..

Computer Science/NetWork 2025. 8. 9. 21:44

프론트엔드 개발을 하다 보면 반드시 마주치는 두 가지 렌더링 방식, 바로 CSR(Client Side Rendering) 과 **SSR(Server Side Rendering)**입니다.각 방식은 성능, 사용자 경험, SEO 대응에 있어서 확연한 차이를 보입니다. 이 글에서는 CSR과 SSR의 특징과 차이점을 명확하게 정리해 드립니다.✅ CSR (Client Side Rendering) 이란?클라이언트에서 렌더링을 수행서버는 HTML 틀과 JavaScript만 내려주고,브라우저가 JS를 실행하여 실제 콘텐츠를 렌더링사용자 입장에서는 JS가 모두 실행되기 전까지 아무것도 보이지 않음📌 특징 요약서버는 HTML+JS 전달만 하고, 렌더링은 브라우저가 수행첫 화면 진입 시 빈 화면이 잠깐 보일 수 있음**S..

Computer Science/NetWork 2022. 10. 27. 21:09