掌控chrome主要介面功能
掌控各個tab的畫面呈現
UI thread
enter
Search Query ?
url ?
url
Network thread
res
UI thread
Render Process
IPC
Main thread
Commit
The main one!!
1. HTML text string
DOM tree
2. Sub-resource loading
Main
Preload Scanner
<script async src="https://............"></script>
<script defer src="https://ㄅㄅㄅㄅㄅㄅㄅ"></script>
Generate the Render Tree
Render Tree
Layout Tree
Calculate x, y coordinates & bounding boxes information!!
Main
DOM上有
DOM上無
從頭到尾給他畫起來!!
z-index??
Generate paint record:painting order
Paint Record
Main
Naive Rastering
Raster
Thread
Main
Layer Tree
Paint Record
Main
commit
Compositor
rasterize
order
Raster
GPU
Display on screen