웹 성능 최적화에 필요한 브라우저의 모든 것

1. 웹 성능 최적화에 필요한
브라우저의 모든 것
이름: 이형욱
소속: NAVER

2. CONTENS
1. Summary of how browsers work
2. How the browser makes a frame?
3. VSync based browser processing
4. Rendering pipeline stage costs

3. 1.
Summary of how browsers work

4. 1.1 Summary of browsers main flows
HTML DOM
CSS CSSOM
Render
Tree
Layout PaintJS

5. 1.2 HTML Parser (1/3)
HTML 문서를 Parsing 하여 DOM Tree를 만드는 과정

6. 1.2 HTML Parser (2/3)
DOM: Document Object Model
• Document = HTML, well-formed XML
• Object Model = Data + Method
Standard way for accessing and manipulating documents.

7. 1.2 HTML Parser (3/3)
[Source: How WebKit Works By Adam Barth]

8. 1.3 Recalculate Style (1/2)
Parsing 된 CSS 결과(CSSOM)를 Render Tree에 적용하는 과정
• HTML은 단순 문서, 각 엘리먼트들의 렌더링에 관한 모든 정보는 CSS가 가지고 있음.
• CSS Paring 과정은 Dev Tools에는 표시되지 않음.

9. 1.3 Recalculate Style (2/2)
[Source: Critical Rendering Path By llya Grigorik]
CSSOM: CSS Object Model
• DOM과 비슷하게 CSS도 CSSOM이 있음
• CSS는 HTML Element의 스타일을 정의
• 외부 링크로 정의된 경우 렌더링이 블로킹 됨
• Cascade down 개념을 구현하기 위해 트리 구조

10. 1.4 Java Script Engine (1/2)
Java Script는 아래와 같이 다양한 경로를 통해서 실행이 됨.
• HTML Parsing, User Input, rAF, DOM Timer, …

11. 1.4 Java Script Engine (2/2)

12. 1.5 Render Tree (1/2)
• Render Tree = DOM Tree + CSSOM Tree
• DOM Tree와 Render Tree는 1:1 관계가 아님
• 화면에 보이는 요소들을 중심으로 구성

13. 1.5 Render Tree (2/2)
[Source: Critical Rendering Path By llya Grigorik]

14. 1.6 Layout (1/3)
Render Tree 노드(Box)들의 좌표를 계산하는 과정
• CSS 2.1 Box Model, Visual formatting model을 기반
• 박스의 크기와 위치를 계산하는 과정
• Global and incremental layout

15. 1.6 Layout (2/3)
Layout 알고리즘
• 각 박스의 넓이는 viewport (ICB)기준
• 각 박스의 높이는 contents (fonts)를 기준
• 윈도우 사이즈를 변경 하거나 폰트 변경 시
Global Layout 발생
• Dirty bit system으로 incremental layout

16. 1.6 Layout (3/3)
[Source: https://blog.4psa.com/css-display-and-the-basic-box-model]

17. 1.7 Paint
1024
768

18. 1.8 New version of browser’s main flow
JS
Recalc
Style
Layout
Update
Layer Tree
Paint Composite

19. 1.9 Update Layer Tree (1/2)
렌더링에 사용될 최종 Layer들을 계산 해서 생성 하는 과정

20. 1.9 Update Layer Tree (2/2)
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
Layer 생성 조건
1. It's the root object for the page.
2. CSS position properties (relative, absolute)
3. Has overflow, an alpha mask or reflection
4. CSS filter
5. CSS 3D Transform, Animations
6. <canvas>, <video>
7. will-change
8. Browser internal layers
Render Tree

21. 1.10 Composite Layers (1/2)
• Compositing은 레이어들을 합성하여 한장의 bitmap으로 만드는 과정
• Paint는 각 Layer 별로 Paint를 하며, Tiled Backing Store 기법을 사용함

22. 1.10 Composite Layers (2/2)

23. 2.
How the browser makes a frame?

24. 2.1 VSync Overview (1/2)
[Source: http://www.ntu.edu.sg/home/ehchua/programming/opengl/cg_basicstheory.html]
“60hz의 의미는 모니터가 16.6ms 단위로 Frame Buffer의 내용을 Fetch!”

25. 2.1 VSync Overview (2/2)
[Source: Google I/O 2012 For Butter or Worse]

26. 2.2 How the browser makes a frame?
JS
Recalc
Style
Layout
Update
Layer Tree
Paint Composite
16.6ms
VSync VSync

27. 2.3 Main Thread Rendering (1/2)

28. 2.3 Main Thread Rendering (2/2)
[Source: Chrome Graphics - BlinkOn 1]

29. 2.4 Multi Threads: Compositor Thread (1/2)
[Source: Chrome Graphics - BlinkOn 1]

30. 2.4 Multi Threads: Compositor Thread (2/2)
Scrolling
Animation
Pinch Zoom
[Source: Life of a pixel 2018 bit.ly/lifeofapixel ]

31. 2.5 Multi Threads: Raster Threads (1/3)
• 레코딩된 Graphics Command를 Raster Thread에서 Bitmap으로 만드는 과정
• Tile (256*256)단위로 Rasterization을 함.
• Image Decoding도 Raster thread에서 처리

32. 2.5 Multi Threads: Raster Threads (2/3)
SkPicture, SkPicturePlayBack:
Records and replay draw operations.
A modern 2D graphics library
[http://www.dorothybrowser.com/parallelizing-canvas-rendering/]

33. 2.5 Multi Threads: Raster Threads (3/3)
[Source: Chrome Graphics - BlinkOn 1]

34. 3.
VSync based browser processing

35. 3.1 Multi-process architecture
[Source: Chrome Graphics - BlinkOn 1]

36. 3.2 VSync aligned input handling (1/2)
Input이 VSync 보다 먼저 들어온 경우
Input이 VSync 이후에 들어온 경우
[Source: Improved vsync scheduling for Chrome on Android]

37. 3.1 VSync aligned input handling (2/2)
Browser
Renderer
Send Input Send VSync
Process input VSync Draw Composite
VSync VSync
[Source: Improved vsync scheduling for Chrome on Android]

38. 3.3 VSync aligned frame handling
[Source: https://docs.google.com/drawings/d/1bUukRm-DV34sM7rL2_bSdxaQkZVMQ_5vOa7nzDnmnx8/edit]

39. 3.4 VSync based browser processing
VSync VSync
Input
Task
Render
Frame
Idle GC
Task
Idle callback
Task
Input
Task
…
idle period
[Source: https://v8.dev/blog/free-garbage-collection]

40. 3.5 whale://tracing (1/3)

41. 3.5 whale://tracing (2/3)

42. 3.5 whale://tracing (3/3)

43. 4.
Rendering pipeline stage costs

44. 4.1 Pipeline stage costs (1/2)
JS Layout Paint Composite
전체 파이프라인 중에서 어디를 수정하는 것인지를 아는 것이 중요
• Layout: width, height, font, …
• Paint: color, background, …
• Composite: opacity, transform, …
[Source: The Pursuit of 60fps Everywhere]

45. 4.1 Pipeline stage costs (2/2)
*http://csstriggers.com/

46. 4.2 Pipeline Stage Costs: Layout
JS Layout Paint Composite
• 대략 1000개 정도의 DOM Elements가 효율적
• 애니메이션은 transform이나 web animations
[Source: The Pursuit of 60fps Everywhere]

47. 4.3 Pipeline Stage Costs: Paint
JS Layout Paint Composite
• GPU Rasterization을 사용하면 대략 10배 정도 빨라짐
• <meta name="viewport" content="width=device-width, minimum-scale=1.0">
[Source: The Pursuit of 60fps Everywhere]

48. 4.4 Pipeline Stage Costs: Composite
JS Layout Paint Composite
• Layer가 많아지면 메모리를 많이 사용하고 더 느려질 수 있음
• 대략 30개 정도의 layer가 효율적
[Source: The Pursuit of 60fps Everywhere]

49. 4.5 Pipeline Stage Costs: 16.6ms
JS Layout Paint Composite
VSync VSync
16.6ms

50. Q & A

51. Thank you