瀏覽器算繪 - ［▌▣］

瀏覽器算繪

https://www.youtube.com/watch?v=SmE4OwHztCc

2025-01-12 【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025年始】

2019-03-16 ブラウザレンダリング入門〜知ることで見える世界〜

2022-07-04 Web ブラウザのレンダリングの仕組みを理解する

code:How is browser rendering content(mermaid)

graph TD

AUser Interface

BBrowser engine

CRendering engine

EJavaScript Interpreter

GData Persistence

A-->B

B-->C

C-->D

C-->E

C-->F

B-->G

A-->F

2024-10-22 レンダリングを探訪する

table:引擎

瀏覽器瀏覽器算繪引擎 JavaScript引擎

Chrome、Edge、Opera Blink V8

Safari、iOS WebKit JavaScriptCore

Firefox Gecko SpiderMonkey

瀏覽器算繪

WebKit

code:WebKit(mermaid)

graph TD

DOM{DOM}

HTML((HTML))

HTML_PARSERHTML Parser

DOM_TREE/DOM Tree/

STYLE_SHEETS(((Style Sheets)))

CSS_PARSERCSS Parser

STYLE_RULES/Style Rules/

ATTACHMENTAttachment

LAYOUTLayout

RENDER_TREE/Render Tree/

PAINTINGPainting

DISPLAY>Display]

HTML-->HTML_PARSER

HTML_PARSER-->DOM_TREE

DOM-->DOM_TREE

DOM_TREE-->ATTACHMENT

STYLE_SHEETS-->CSS_PARSER

CSS_PARSER-->STYLE_RULES

STYLE_RULES-->ATTACHMENT

ATTACHMENT-->RENDER_TREE

LAYOUT-->RENDER_TREE

RENDER_TREE-->LAYOUT

RENDER_TREE-->PAINTING

PAINTING-->DISPLAY

Gecko

2025-10-07 Inside a 16.67 Millisecond Frame - Kool Codez

每個幀內發生的事

1. 執行JavaScript

2. 計算樣式

3. 重新排版

reflow

4. 重新繪製畫面

repaint

5. 合成畫面

癥結點

Scripting time

JavaScript執行佔用的時間

會觸發reflow的屬性

例如top、left、width、height、margin等屬性

會觸發repaint的屬性

例如background-color、box-shadow、border-radius等屬性

由GPU處理的屬性則可掠過reflow與repaint

例如transform或opacity

範例

使用top與left，和使用transform與opacity

只要關掉陰影，即使是未經最佳化的版本都有不錯的效能

除非在數量大幅增加時

額外說明

position: absolute能夠減少算繪負擔，因為每個元素是獨立的

觀測

除了觀察動畫效果，你可以開啟DevTools，使用裡頭的FPS meter監控

Cmd+Shift+P

關聯項目