Critical Rendering Path

참고

크리티컬 렌더링 패스는 브라우저가 html,css,js를 가져와 화면에 실제픽셀로 변환하는 과정이다. 최적화가 잘되어있으면 패이지가 빠르게 로딩된다.

DOM - (JS) - CSS - Render Tree - layout - paint
  1. Begin constructing the DOM by parsing HTML
  2. Request CSS & JS resources
  3. Parse Css and construct the CSSOM tree , Execute js
  4. Merge DOM and CSSOM into the Render Tree
  5. Run layout, paint

HTML을 가져와 DOM을 만들고 CSS를 가져와 CSSOM을 만든다. 둘을 묶어 Render Tree를 만들고 레이아웃 단계를 거쳐 모든것이 페이지의 어느위치에 갈것인지 알린다. 마지막으로 실제화면에 픽셀을 표현한다.(Paint)

DOM

HTML표준안은 받은 데이터 처리방식에 대한 일련의 규칙을 포함하고 있다. (<tag>) 브라우저는 태그를 만날때마다 토큰을 만든다. 이러한 과정을 tokenizer 라고한다. 이 과정중에 토큰을 node객체로 바꿔주는 과정이 존재한다. 이 노드들이 관계를보여준다.(body는 html의 자식) 모든 토큰을 받아들이면 node들로 이루어진 관계트리가 완성되고 이것을 DOM이라고 한다. 이때 노드들은 속성(`attribute`)을 가지고 있다. (img노드는 src속성을 가지고 있다.) DOM은 HTML마크업의 모든부분에 대한 표현이다.

Dev Tool - Performance(Timeline)

구글에서 검색을 이용할때 사용자의 입력을 받는 header부분은 미리 렌더링 되지만, 검색내용을 받는 부분은 입력을 받기전에는 렌더되지 않는다. 이렇게 부분적으로 랜더하는것은 최적화에 상당히 도움이 된다.

크롬 개발자도구의 performance를 활용하면 랜더과정(Send Request 부터 Parse HTML을 넘어 Composite Layers까지)을 아주 자세히 관찰할 수 있다.

Layout

메타태그(<meta>)에서 뷰포트(viewport)가 장치사이즈로 지정되어있는 경우, 뷰포트가 바뀌면 레이아웃 단계를 다시실행한다. 즉 브라우저 크기를 조정하거나, 핸드폰을 가로로 돌리면 레이아웃 단계가 다시 실행된다.

Paint

픽셀을 그려내는 과정이다. 그려내는 범위가 클수록 많은 시간이 걸린다.(width,height값에 영향을 받게된다.)

results matching ""

    No results matching ""