Welcome to the blog

Posts

My thoughts and ideas

  • position aboslute의 blink layout 분석

    CSS 스타일로 position을 absolute로 설정하고 offset 설정할 때 이 offset은 과연 어디서 설정해줄까?라는 궁금증으로 Blink Rendering Engine을 분석해봤다.

    Position absolute의 top 오프셋과 BlockLayoutAlgorithm의 관점

    • 예를 들어, top offset 값을 100px로 준다면, 이 100px은 과연 어디서 오프셋을 설정해줄까??
    • BlockLayoutAlgorithm의 FinishLayout에서 NGOutofFlowLayoutPart의 Run 수행
    • Run 수행 중 자식들 중 position이 absolute인(outofflow 특성을 가진) 자식들이 있으면 candidates에 등록되어 있음
    • Candidates를 가지고 NGOutOfFlowLayoutPart::LayoutCandidates...
  • z-index 분석

    Renderer Process

    • 렌더링 프로세스는 브라우저 탭 안에서 일어나는 모든 일을 담당한다.
    • 렌더러 프로세스 안에는 메인 스레드가 우리가 구현한 대부분의 코드를 처리하고, 워커, 컴포지터, 래스터 스레드도 존재한다.
    • 렌더러 프로세스의 핵심 역할은 HTML, CSS, 그리고 자바스크립트를 사용자가 interation 할 수 있는 웹피이지로 만드는 것이다.
    • 브라우저 렌더링 파이프 라인
    • 파싱(메인 스레드) : DOM과 CSSOM을 통해 렌더 트리를...