Facts

• 프로그래머스 level2 위장 문제를 풀었다.
• 인공지능 시험 공부를 하였다.
• 우아한 테크의 10분 테크토크 브라우저 렌더링 영상을 보았다.

Feelings

• 습득해야 할 개발 지식들이 너무 많다.. 열심히 공부해야겠다.
• 내일이면 시험이 끝나지만 해야할 일이 산더미다. 정신 차려야 겠다.

Findings

• 웹 브라우저의 구조
  • user interface: 웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스이다.
  • rendering engine: HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진이다.
  • browser engine: 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진이다.
  • networking: 각종 네트워크 요청을 수행하는 네트워킹 파트이다.
  • ui backend: 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트이다.
  • data persistence: local storage나 cookie와 같이 보조 기억장치에 데이터를 저장하는 파트이다.
  • javascript interpreter: 자바스크립트 코드를 실행하는 인터프리터이다. chrome의 경우에는 v8 엔진이 자바스크립트를 바이트코드(bytecode)로 컴파일하고 실행하는 방식을 사용한다. v8 엔진은 ECMAScript 3rd Edition 구격의 C++로 작성되었다.

• 웹 브라우저마다 렌더링 엔진은 다르다. 모든 렌더링 엔진은 기본적으로 웹 표준을 준수하고 있으면서도 조금씩 다르게 동작하는 부분이 있다.

• 렌더링 엔진의 동작 과정(chrome 기준)
  • critical rendering path를 거쳐 동작
  • critical rendering path: DOM Tree, CSSOM Tree 생성 -> Render Tree 생성 -> Render Tree 배치(Layout 과정) -> Render Tree 그리기(Paint 과정)
• 사용자 동작으로 javascript가 실행되어 css가 변경되거나 애니메이션 재생이 일어나는 경우
  • 다시 Layout이 발생하는 경우(주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀌었을 때 다시 발생)
    • Javascript -> Style -> Layout -> Paint -> Composite
  • Paint부터 다시 발생되는 경우(주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생)
    • Javascript -> Style -> Paint -> Composite (Layout 과정이 일어나지 않음)
  • 레이어의 합성만 다시 발생하는 경우
    • Javascript -> Style -> Composite (Layout, Paint 과정을 수행하지 않기 때문에 성능상을 가장 큰 이점을 가짐)
• 같은 애니메이션을 나타내는 여러 스타일에 대해서 스타일의 속성을 left속성 말고 transform 속성을 주게 되면 애니메이션이 실행될 때 레이어의 합성 과정만 일어나기 때문에 transform 속성을 사용하여 애니메이션 렌더링 성능을 최적화 할 수 있다(애니메이션이 더 부드럽게 재생됨).

Future Action Plans

• 테크영상 꾸준히 시청하기
• 시험 끝나고 종강까지 남은 약 5일동안 계획 철저히 세워서 실천하기

Feedback

• 식곤증을 물리치자.