More Related Content
What's hot
What's hot (20)
Similar to [125]웹 성능 최적화에 필요한 브라우저의 모든 것
Similar to [125]웹 성능 최적화에 필요한 브라우저의 모든 것 (20)
More from NAVER D2
More from NAVER D2 (20)
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
- 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]
- 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]
- 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