blob: ea769590987babe44f19a3320f4c83d499910d7f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
---
breadcrumbs:
- - /developers
- For Developers
- - /developers/design-documents
- Design Documents
page_name: rendering-architecture-diagrams
title: Rendering Architecture Diagrams
---
The following sequence diagrams illustrate various aspects of Chromium's
rendering architecture. The first picture below shows how Javascript and CSS
animations are scheduled using the requestAnimationFrame callback mechanism.
[<img alt="image"
src="/developers/design-documents/rendering-architecture-diagrams/chromium-request-anim-frame.png"
height=300
width=400>](/developers/design-documents/rendering-architecture-diagrams/chromium-request-anim-frame.png)
After the Javascript callback is executed or the CSS animations have been
updated, the web contents view generally needs to be redrawn. The following
(simplified) diagrams show the code execution flow during a repaint in the
non-composited software rendering, composited software rendering and (threaded)
composited GPU rendering modes. Note that the newer [multithreaded ("impl-side")
rasterization mode](/developers/design-documents/impl-side-painting) is not
shown below.
<table>
<tr>
<td>Non-composited SW rendering</td>
<td> Composited SW rendering</td>
<td> Composited GPU rendering</td>
</tr>
<tr>
<td><a
href="/developers/design-documents/rendering-architecture-diagrams/chromium-non-composited-sw-rendering.png"><img
alt="image"
src="/developers/design-documents/rendering-architecture-diagrams/chromium-non-composited-sw-rendering.png"
height=165 width=200></a></td>
<td><a
href="/developers/design-documents/rendering-architecture-diagrams/chromium-composited-sw-rendering.png"><img
alt="image"
src="/developers/design-documents/rendering-architecture-diagrams/chromium-composited-sw-rendering.png"
height=400 width=243></a></td>
<td><a
href="/developers/design-documents/rendering-architecture-diagrams/chromium-composited-hw-rendering.png"><img
alt="image"
src="/developers/design-documents/rendering-architecture-diagrams/chromium-composited-hw-rendering.png"
height=400 width=245></a></td>
</tr>
</table>
|
