성장을 향한 작은 몸부림의 흔적들
태그 목록
- 전체보기(186)
- React(48)
- 독서(32)
- Rust(23)
- beyond js(18)
- nextjs(16)
- dante(16)
- typescript(15)
- next.js(11)
- nextjs13(10)
- 서평(9)
- functional programming(8)
- kotlin(8)
- JavaScript(7)
- redux(5)
- next.js13(5)
- 아키텍쳐(4)
- html(4)
- SSR(3)
- vanilla-extract(3)
- 쉽게 말하는(3)
- css-in-ts(3)
- js(3)
- 회고(3)
- CSS(3)
- DDD(3)
- 타입스크립트(3)
- aws(3)
- 별 건 아니지만(3)
- test(3)
- 브라우저(2)
- SolidJS(2)
- react-query(2)
- 스프린트(2)
- React18(2)
- 클린 소프트웨어(2)
- 애자일(2)
- webpack(2)
- jest(2)
- reducer(2)
- frontend(2)
- svelte(2)
- e2e(2)
- 기술면접(2)
- ts(2)
- master course(2)
- 생각(2)
- SOLID(2)
- hook(2)
- rust professionals(2)
- cypress(2)
- 테스트(1)
- next13(1)
- ssh(1)
- ec2(1)
- 2022(1)
- ts 5.2(1)
- Nginx(1)
- next(1)
- useImperativeHandle(1)
- sapper(1)
- webkit(1)
- htmx(1)
- 아키텍처(1)
- DOCTYPE(1)
- apple vision(1)
- 인터뷰(1)
- Jotai(1)
- WWDC(1)
- useReducer(1)
- useRef(1)
- postcss(1)
- 기술(1)
- 협업(1)
- CSR(1)
- typescript5(1)
- 책(1)
- svelte4(1)
- code splitting(1)
- Vercel(1)
- github(1)
- 객체지향(1)
- seo(1)
- useEvent(1)
- 저예산 러스트(1)
- svg(1)
- styled component(1)
- Remix(1)
- WWDC2023(1)
- useTransition(1)
- mobx(1)
- Suspense(1)
- audio(1)
- 도커(1)
- OS(1)
- git(1)
- 디자인패턴(1)
- sentry(1)
- 함수형(1)
- Fiber(1)
- virtual DOM(1)
- web(1)
- component(1)
- app router(1)
- 웹 렌더링(1)
- Bun(1)
- npm(1)
- react season component(1)
- react dom(1)
- nextjs master course(1)
- 101(1)
- CRA(1)
- panda.css(1)
- island architecture(1)
- 함수형 프로그래밍(1)
- optimize(1)
- 사이드 프로젝트(1)
- 별 거 아니지만(1)
- AB테스트(1)
- using(1)
- 프론트엔드(1)
- chatGPT(1)
- panda(1)
- ts5.0(1)
- 기술 면접(1)
- bun1.0(1)
- useEffect(1)
- useState(1)
- useSyncExternalStore(1)
- decorator(1)
- async(1)
- node.js(1)
- DesignPattern(1)
- 네트워크(1)
- VDOM(1)
- critical path(1)
- book(1)
전체보기 (186)React(48)독서(32)Rust(23)beyond js(18)nextjs(16)dante(16)typescript(15)next.js(11)nextjs13(10)서평(9)functional programming(8)kotlin(8)JavaScript(7)redux(5)next.js13(5)아키텍쳐(4)html(4)SSR(3)vanilla-extract(3)쉽게 말하는(3)css-in-ts(3)js(3)회고(3)CSS(3)DDD(3)타입스크립트(3)aws(3)별 건 아니지만(3)test(3)브라우저(2)SolidJS(2)react-query(2)스프린트(2)React18(2)클린 소프트웨어(2)애자일(2)webpack(2)jest(2)reducer(2)frontend(2)svelte(2)e2e(2)기술면접(2)ts(2)master course(2)생각(2)SOLID(2)hook(2)rust professionals(2)cypress(2)테스트(1)next13(1)ssh(1)ec2(1)2022(1)ts 5.2(1)Nginx(1)next(1)useImperativeHandle(1)sapper(1)webkit(1)htmx(1)아키텍처(1)DOCTYPE(1)apple vision(1)인터뷰(1)Jotai(1)WWDC(1)useReducer(1)useRef(1)postcss(1)기술(1)협업(1)CSR(1)typescript5(1)책(1)svelte4(1)code splitting(1)Vercel(1)github(1)객체지향(1)seo(1)useEvent(1)저예산 러스트(1)svg(1)styled component(1)Remix(1)WWDC2023(1)useTransition(1)mobx(1)Suspense(1)audio(1)도커(1)OS(1)git(1)디자인패턴(1)sentry(1)함수형(1)Fiber(1)virtual DOM(1)web(1)component(1)app router(1)웹 렌더링(1)Bun(1)npm(1)react season component(1)react dom(1)nextjs master course(1)101(1)CRA(1)panda.css(1)island architecture(1)함수형 프로그래밍(1)optimize(1)사이드 프로젝트(1)별 거 아니지만(1)AB테스트(1)using(1)프론트엔드(1)chatGPT(1)panda(1)ts5.0(1)기술 면접(1)bun1.0(1)useEffect(1)useState(1)useSyncExternalStore(1)decorator(1)async(1)node.js(1)DesignPattern(1)네트워크(1)VDOM(1)critical path(1)book(1)
html 101 - 웹 렌더링
주요 렌더링 과정 Critical Rendering Path (주요 렌더링 과정)은 브라우저가 서버에서 웹 페이지를 다운로드 받아 사용자에게 픽셀로 나타내기까지의 과정을 말합니다. 렌더링 과정을 상세히 알고 있으면 서비스가 사용자에게 전달되기까지 어느 부분에서 시간이 많이 걸리는지 분석하기가 용이하며 성능 향상도 시킬 수 있습니다. HTML 다운로드에서 DOM 생성까지 변환 브라우저가 인터넷이나 디스크에서 HTML의 원시 바이트를 읽어와서, 해당 파일에 지정된 인코딩에 따라 개별 문자로 변환합니다. 3C 62 6F 64 79 ... => ...hello 토큰화 브라우저가 문자열을 W3C HTML 표준에 지정된 고유 토큰으로 변환합니다. (꺽쇠 괄호로 묶인 문자열) 각 토큰은 특별한 의미와 고유한 규칙을 가집니다. `StartTag:html StartTag:head ...
2020년 4월 19일
·
0개의 댓글·
1