šŸ“–

šŸ“šćƒ–ćƒ©ć‚¦ć‚¶ć®ä»•ēµ„ćæć‚’å­¦ć¶

2021/05/29ć«å…¬é–‹ćƒ»ē“„17,600å­—ćƒ»3ä»¶ć®ć‚³ćƒ”ćƒ³ćƒˆ

Photo by Remotar Jobs on Unsplash
Photo by Remotar Jobs on Unsplash

Webćƒ•ćƒ­ćƒ³ćƒˆć‚Øćƒ³ć‚øćƒ‹ć‚¢ćŸć‚‹ć‚‚ć®ć€ćƒ–ćƒ©ć‚¦ć‚¶ć®ä»•ēµ„ćæć«čˆˆå‘³ć‚’ęŒć¤ć®ćÆč‡Ŗē„¶ć®ę‘‚ē†ć§ć™ć€‚ęœ¬čؘäŗ‹ć§ćÆ态ē§ćŒćƒ–ćƒ©ć‚¦ć‚¶ć®ä»•ēµ„ćæć‚’å­¦ć‚“ć§ć„ćéŽēØ‹ć‚’å‚™åæ˜éŒ²ćØć—ć¦ę®‹ć—ć¾ć™ć€‚

ćæ悓ćŖå¤§å„½ćChrome

Webćƒ•ćƒ­ćƒ³ćƒˆć‚Øćƒ³ć‚øćƒ‹ć‚¢ć«ę„›ć•ć‚Œć¦ć„ć‚‹ćƒ–ćƒ©ć‚¦ć‚¶ćØ恄恈恰态IEChrome恧恙悈恭怂
ćƒ–ćƒ©ć‚¦ć‚¶ć§HTML,CSS,JSć®å‹•ä½œē¢ŗčŖć™ć‚‹ć®ćÆ态ꗄåøøčŒ¶é£Æäŗ‹ć§ć™ć€‚
ćƒ–ćƒ©ć‚¦ć‚¶ć«ć‚ˆć£ć¦å‹•ä½œćŒē•°ćŖ悋恓ćØćÆ态Webćƒ•ćƒ­ćƒ³ćƒˆć‚Øćƒ³ć‚øćƒ‹ć‚¢ćŖ悉å‘ØēŸ„恮äŗ‹å®Ÿć§ć™ć€‚
恘悃恂态ćŖć‚“ć§å‹•ä½œćŒé•ć†ć®ć‹ćØ恄恆ćØ态

  • ć€Œćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć‚Øćƒ³ć‚øćƒ³ćŒé•ć†ć‹ć‚‰ć€œć€
  • 怌Javascriptć‚Øćƒ³ć‚øćƒ³ćŒé•ć†ć‹ć‚‰ć€œć€

恐悉恄ćÆēŸ„ć£ć¦ć„ć‚‹ć‚“ć˜ć‚ƒćŖ恄恋ćŖćØę€ć„ć¾ć™ć€‚
ć˜ć‚ƒć‚ć€ćć®ćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć‚Øćƒ³ć‚øćƒ³ć£ć¦ć©ć†ć„ć†ä»•ēµ„ćæć§å‹•ć„ć¦ć„ć‚‹ć®ć§ć—ć‚‡ć†ć‹ć€‚
갗恫ćŖć‚Šć¾ć™ć‚ˆć­ć€‚

Chromium恫恤恄恦

Chromiumć‚‚ć€ćŸć¶ć‚“ć”å­˜ć˜ć®ę–¹å¤šć„ć®ć‹ćŖćØę€ć„ć¾ć™ć®ć§ć€ē°”å˜ć«čŖ¬ę˜Žć—ć¾ć™ć€‚

ChromiumćÆ态ć‚Ŗćƒ¼ćƒ—ćƒ³ć‚½ćƒ¼ć‚¹ć®ćƒ—ćƒ­ć‚ø悧ć‚Æćƒˆåć§ć‚ć‚Šć€ćƒ–ćƒ©ć‚¦ć‚¶åć§ć‚‚ć‚ć‚Šć¾ć™ć€‚
ChromećÆ态Chromiumć‚’å…ƒć«é–‹ē™ŗć•ć‚Œć¦ć„ć¾ć™ć€‚
č©³ć—ć„čŖ¬ę˜ŽćÆChromium - Wikić‚’č¦‹ć¦ćć ć•ć„ć€‚

ć‚Ŗćƒ¼ćƒ—ćƒ³ć‚½ćƒ¼ć‚¹ć£ć¦ć“ćØćÆć€ć‚½ćƒ¼ć‚¹ć‚³ćƒ¼ćƒ‰ćŒčŖ°ć§ć‚‚čŖ­ć‚ć”ć‚ƒć†ć£ć¦ć“ćØ恧恙悈恭怂
ć ć£ćŸć‚‰ć€ćƒ–ćƒ©ć‚¦ć‚¶ć®å‹•ä½œć‚’ēŸ„悋恓ćØćŒć§ćć”ć‚ƒć†ć˜ć‚ƒćŖ恄恧恙恋ļ¼
ć‚ćƒ¼ć„ļ¼šŸ˜Ž

Chromium恮ćƒŖćƒćƒ¼ć‚¹ć‚Øćƒ³ć‚øćƒ‹ć‚¢ćƒŖćƒ³ć‚°

恧ćÆć•ć£ććć€Chromiumć®ć‚½ćƒ¼ć‚¹ć‚³ćƒ¼ćƒ‰ć‚’č¦‹ć¦ć„ćć¾ć—ć‚‡ć†ć€‚

恓悌恧恙怂

chromium/src
chromium/src - source.chromium.org

Chromium - Wikić«ć‚ˆć‚Œć°ć€Chromiumć®ć‚½ćƒ¼ć‚¹ć‚³ćƒ¼ćƒ‰ćÆē“„3,500äø‡č”Œć‚ć‚‹ćć†ć§ć™ć€‚
恗恋悂态č؀čŖžćÆC++怂ē§ćÆć‚ć¾ć‚Šćć‚Œć‚’č©³ć—ććŖ恄恮恧恙šŸ˜žć€‚

å®Ÿéš›ć«ć‚½ćƒ¼ć‚¹ć‚³ćƒ¼ćƒ‰ć‚’ćƒ­ćƒ¼ć‚«ćƒ«ćƒžć‚·ćƒ³(Macbook Air)ćø惁悧惃ć‚Æć‚¢ć‚¦ćƒˆć—ć€ćƒ“ćƒ«ćƒ‰ć‚’ć—ć¦ćæć¾ć—ćŸć€‚
ćƒžć‚·ćƒ³ćŒč²§å¼±ć ćØć„ć†ć®ć‚‚ć‚ć‚‹ć‚“ć§ć™ćŒć€ćƒ“ćƒ«ćƒ‰ć«åŠę—„ćć‚‰ć„ć‹ć‹ć£ć¦ć—ć¾ć„ć¾ć—ćŸć€‚ćƒ˜ćƒˆćƒ˜ćƒˆć§ć™ć€‚
ć“ć‚Œć˜ć‚ƒć‚ć•ć™ćŒć«ć€ę‰‹č»½ć«ćƒ–ćƒ©ć‚¦ć‚¶ć®å‹•ä½œē¢ŗčŖćÆć§ććć†ć«ćŖ恄恧恙怂

ćƒ–ćƒ©ć‚¦ć‚¶ć®ä»•ēµ„ćæč³‡ę–™ć‚’čŖ­ć‚€

ć”ć‚‡ć£ćØč¶£å‘ć‚’å¤‰ćˆć¦ć€ę¬”ć®ć‚ˆć†ćŖč³‡ę–™ć‚’čŖ­ć‚€ć“ćØć«ć—ć¾ć—ćŸć€‚

恧ćÆć€ć•ć£ććč¦‹ć¦ć„ćć¾ć™ć€‚
ęœ€åˆć«ē›®ć«ć¤ćć®ćŒć€ćƒ–ćƒ©ć‚¦ć‚¶ć®äø»ćŖę§‹ęˆč¦ē“ ć§ć™ć€‚

ćƒ–ćƒ©ć‚¦ć‚¶ć®äø»ćŖę§‹ęˆč¦ē“ 
ćƒ–ćƒ©ć‚¦ć‚¶ć®äø»ćŖę§‹ęˆč¦ē“  - www.html5rocks.com

ę§‹ęˆč¦ē“ ć®å†…ć€ćƒ¦ćƒ¼ć‚¶ćƒ¼ć‚¤ćƒ³ć‚æćƒ¼ćƒ•ć‚§ćƒ¼ć‚¹ć€ćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³ć€ćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć‚Øćƒ³ć‚øćƒ³ć«ē€ē›®ć—ć¾ć™ć€‚
ćć‚Œćžć‚Œć€ę¬”ć®å½¹å‰²ćŒć‚ć‚Šć¾ć™ć€‚

  • ćƒ¦ćƒ¼ć‚¶ćƒ¼ć‚¤ćƒ³ć‚æćƒ¼ćƒ•ć‚§ćƒ¼ć‚¹
    • ć‚¢ćƒ‰ćƒ¬ć‚¹ćƒćƒ¼ć‚„ęˆ»ć‚‹/é€²ć‚€ćƒœć‚æćƒ³ć®ć‚ˆć†ćŖUIć‚’ę‹…å½“
  • ćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³
    • UIćØćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć‚Øćƒ³ć‚øćƒ³ć®é–“ć®å‡¦ē†ć‚’ę•“ē†
  • ćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć‚Øćƒ³ć‚øćƒ³
    • č¦ę±‚ć•ć‚ŒćŸć‚³ćƒ³ćƒ†ćƒ³ćƒ„(HTMLćŖ恩)恮č”Øē¤ŗć‚’ę‹…å½“

恔ćŖćæ恫态Chromiumć®ćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć‚Øćƒ³ć‚øćƒ³ć«ćÆ态webkit悒ä½æć£ć¦ć„ć¾ć—ćŸćŒć€blinkć«å¤‰ć‚ć‚Šć¾ć—ćŸć€‚

ćƒ–ćƒ©ć‚¦ć‚¶ć®åŸŗęœ¬ēš„ćŖćƒ•ćƒ­ćƒ¼ćÆć€ę¬”ć®å›³ć®é€šć‚Šć§ć™ć€‚

ćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć®åŸŗęœ¬ēš„ćŖćƒ•ćƒ­ćƒ¼
ćƒ¬ćƒ³ćƒ€ćƒŖćƒ³ć‚°ć®åŸŗęœ¬ēš„ćŖćƒ•ćƒ­ćƒ¼ - www.html5rocks.com

Webkitć®ćƒ”ć‚¤ćƒ³ćƒ•ćƒ­ćƒ¼
Webkitć®ćƒ”ć‚¤ćƒ³ćƒ•ćƒ­ćƒ¼ - www.html5rocks.com

  1. Parsing HTML to construct the DOM tree
  2. Render tree construction
  3. Layout of the render tree
  4. Painting the render tree

ćć‚Œćžć‚Œč¦‹ć¦ć„ćć¾ć™ć€‚


ā‘  Parsing HTML to construct the DOM tree

1ćÆ态HTMLć‚’ćƒ¬ć‚­ć‚µ(å­—å„č§£ęž. ex:flex)ćƒ»ćƒ‘ćƒ¼ć‚µ(ę§‹ę–‡č§£ęž. ex:bison)悒ä½æć£ć¦DOM惄ćƒŖćƒ¼ć‚’ę§‹ēÆ‰ć—ć¾ć™ć€‚

ćƒ¬ć‚­ć‚µć§ćÆć€ć‚¹ćƒ†ćƒ¼ćƒˆćƒžć‚·ćƒ³ć«ć‚ˆć£ć¦čŖ­ćæč¾¼ćæēŠ¶ę…‹ć‚’ē®”ē†ć—ć¤ć¤ćƒˆćƒ¼ć‚Æćƒ³ć‚’č­˜åˆ„ć—ć¾ć™ć€‚ē©ŗē™½ćØć‹ć‚³ćƒ”ćƒ³ćƒˆćŖ恩ćÆå‰Šé™¤ć•ć‚Œć¾ć™ć€‚

ćƒ¬ć‚­ć‚µć‹ć‚‰č­˜åˆ„ć•ć‚ŒćŸćƒˆćƒ¼ć‚Æćƒ³ć‚’ćƒ‘ćƒ¼ć‚µć«ęø”ć—ć€ę§‹ę–‡č§£ęžć—ć¦ć„ćć¾ć™ć€‚
HTMLćÆDTDļ¼ˆDocument Type Definitionļ¼‰ć§ę–‡č„ˆč‡Ŗē”±ę–‡ę³•ćŖćŸć‚ć€ę©Ÿę¢°ēš„ć«č§£ęžć§ćć¾ć™ć€‚
恟恠态HTMLćÆåƛ大ćŖä»•ę§˜ć§ć€ę¬”ć®ć‚ˆć†ćŖ惑ć‚æćƒ¼ćƒ³ć‚‚čØ±å®¹ć™ć‚‹ć‚ˆć†ć«ćŖć£ć¦ć„ć¾ć™ć€‚

  • <br>ć®ä»£ć‚ć‚Šć®</br>
  • čæ·å­ć®ćƒ†ćƒ¼ćƒ–ćƒ«
  • å…„ć‚Œå­ć®ćƒ•ć‚©ćƒ¼ćƒ č¦ē“ 
  • 귱恙恎悋ć‚æć‚°éšŽå±¤
  • 配ē½®ć«čŖ¤ć‚Šć®ć‚ć‚‹ html ć¾ćŸćÆ body ēµ‚äŗ†ć‚æ悰

ćƒ‘ćƒ¼ć‚µć‹ć‚‰DOMļ¼ˆDocument Object Modelļ¼‰ć‚’꧋ēÆ‰ć—ć¾ć™ć€‚
DOMćÆć€ć“ć‚Œć¾ć§ć®å˜ćŖć‚‹ćƒ†ć‚­ć‚¹ćƒˆć‹ć‚‰ć€API悒ꌁ恟恛恟ć‚Ŗ惖ć‚ø悧ć‚Æćƒˆćƒ¢ćƒ‡ćƒ«ć‚’ä½œć‚‹ć“ćØ恧态
仄降ćÆDOM悒ä½æć£ć¦å‡¦ē†ć—ć‚„ć™ććŖć‚Šć¾ć™ć€‚

ć‚µćƒ³ćƒ—ćƒ« ćƒžćƒ¼ć‚Æć‚¢ćƒƒćƒ—ć®DOM惄ćƒŖćƒ¼
ć‚µćƒ³ćƒ—ćƒ« ćƒžćƒ¼ć‚Æć‚¢ćƒƒćƒ—ć®DOM惄ćƒŖćƒ¼ - www.html5rocks.com

ć“ć‚Œć¾ć§ćÆHTMLć®č©±ć‚’ć—ć¦ć„ć¾ć—ćŸćŒć€HTMLćØäø¦č”Œć—恦CSSć‚‚åŒę§˜ć«å‡¦ē†ć—ć¦ć„ććƒ¬ćƒ³ćƒ€ćƒ¼ć‚Ŗ惖ć‚ø悧ć‚Æ惈ćØ恄恆ć‚Ŗ惖ć‚ø悧ć‚Æćƒˆć‚’ä½œć£ć¦ć„ćć¾ć™ć€‚ć“ć‚ŒćÆć€ć‚¹ć‚æć‚¤ćƒ«ęƒ…å ±ć‚’ä»˜äøŽć—ćŸć‚Ŗ惖ć‚ø悧ć‚Æ惈恫ćŖć‚Šć¾ć™ć€‚
åŸŗęœ¬ēš„恫态CSSćØHTMLćÆäŗ’恄恫ē‹¬ē«‹ć—恦恄悋恮恧态äø¦åˆ—処ē†ćŒåÆčƒ½ć§ć™ć€‚ä¾‹ćˆć°ć€CSSć‚’å‡¦ē†ć—ćŸć“ćØ恧态HTMLćŒå¤‰åŒ–ć™ć‚‹ć“ćØćÆćŖ恄ćÆ恚恧恙怂

CSSć®č§£ęž
CSSć®č§£ęž - www.html5rocks.com

恟恠态JavascriptćÆč©±ćŒé•ć†ć®ć§ć€Javascript恌čŖ­ćæč¾¼ć¾ć‚ŒćŸę™‚ē‚¹ć§HTMLć®ćƒ‘ćƒ¼ć‚¹ć‚’äø­ę–­ć—恦Javascriptć®ćƒ‘ćƒ¼ć‚¹ćŒé–‹å§‹ć•ć‚Œć¾ć™ć€‚
ć¾ćŸć€JavascriptćŒć€ć¾ć čŖ­ćæč¾¼ć¾ć‚Œć¦ć„ćŖć„ć‚¹ć‚æć‚¤ćƒ«ć‚·ćƒ¼ćƒˆć®å½±éŸæć‚’å—ć‘ćć†ćŖē‰¹å®šć®ć‚¹ć‚æć‚¤ćƒ«ćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć«ć‚¢ć‚Æć‚»ć‚¹ć—ćŸå “åˆć€JavascriptćÆ惖惭惃ć‚Æć•ć‚Œć¾ć™ć€‚


ā‘” Render tree construction

ā‘ ć®DOMćØćƒ¬ćƒ³ćƒ€ćƒ¼ć‚Ŗ惖ć‚ø悧ć‚Æćƒˆć‹ć‚‰ć€ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼ć‚’ę§‹ēÆ‰ć—ć¾ć™ć€‚
DOMćØćƒ¬ćƒ³ćƒ€ćƒ¼ć‚Ŗ惖ć‚ø悧ć‚Æ惈ćÆ态1åƾ1ćØ恄恆čØ³ć§ćÆćŖćć€ä¾‹ćˆć°head要ē“ ć‚„态display:none;恮要ē“ ć‚‚ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼ć«å«ć¾ć‚Œć¾ć›ć‚“ć€‚
ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼ć®ę›“ę–°ćÆ态DOM惄ćƒŖćƒ¼ćŒę›“ę–°ć•ć‚Œć‚‹åŗ¦ć«č”Œć‚ć‚Œć¾ć™ć€‚

ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼ćØåƾåæœć™ć‚‹DOM惄ćƒŖćƒ¼
ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼ćØåƾåæœć™ć‚‹DOM惄ćƒŖćƒ¼ - www.html5rocks.com

ćƒ¬ćƒ³ćƒ€ćƒ¼ć‚Ŗ惖ć‚ø悧ć‚Æćƒˆć‹ć‚‰ć‚¹ć‚æć‚¤ćƒ«ć‚’č؈ē®—ć™ć‚‹ć®ć§ć™ćŒć€ć”ć‚‡ć£ćØ複雑恧恙怂
č©³ć—ććÆć€ć‚¹ć‚æć‚¤ćƒ«ć®č؈ē®—ć‚’č¦‹ć¦ćć ć•ć„ć€‚


ā‘¢ Layout of the render tree

ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼ć‹ć‚‰ć€ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆęƒ…å ±ć‚’č؈ē®—ć—ć¦ć„ćć¾ć™ć€‚
ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆęƒ…å ±ćØćÆć€ä½ē½®(x,y)ćØ悵悤ć‚ŗ(width,height)恧恙怂

ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼ć®ćƒ«ćƒ¼ćƒˆć‹ć‚‰å†åø°ēš„ć«ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆęƒ…å ±ć‚’č؈ē®—(layoutćƒ”ć‚½ćƒƒćƒ‰)ć—ć¦ć„ćć¾ć™ć€‚

  1. č¦Ŗćƒ¬ćƒ³ćƒ€ćƒ©ćƒ¼ćŒč‡Ŗčŗ«ć®å¹…ć‚’ę±ŗå®šć—ć¾ć™ć€‚
  2. č¦ŖćŒå­ć‚’ē¢ŗčŖć—恦态
    1. å­ćƒ¬ćƒ³ćƒ€ćƒ©ćƒ¼ć‚’é…ē½®ć—ć¾ć™ļ¼ˆxćØy悒čØ­å®šć—ć¾ć™ļ¼‰ć€‚
    2. åæ…要ćŖ堓合ćÆå­ć®layoutćƒ”ć‚½ćƒƒćƒ‰ć‚’å‘¼ć³å‡ŗć—ć¾ć™ć€‚ć“ć‚Œć«ć‚ˆć‚Šć€å­ć®é«˜ć•ć‚’č؈ē®—ć—ć¾ć™ć€‚
  3. č¦ŖćÆå­ć®é«˜ć•ć®ē“Æē©ć€ćƒžćƒ¼ć‚øćƒ³ć®é«˜ć•ć€ćƒ‘ćƒ‡ć‚£ćƒ³ć‚°ć‚’ä½æē”Ø恗恦态č‡Ŗčŗ«ć®é«˜ć•ć‚’čØ­å®šć—ć¾ć™ć€‚ć“ć®é«˜ć•ćÆč¦Ŗćƒ¬ćƒ³ćƒ€ćƒ©ćƒ¼ć®ć•ć‚‰ć«č¦Ŗć«ć‚ˆć£ć¦ä½æē”Øć•ć‚Œć¾ć™ć€‚

ā€» ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆå‡¦ē† å‚č€ƒ

CSS惜惃ć‚Æć‚¹ćƒ¢ćƒ‡ćƒ«ć®å›³ć‚’å‚č€ƒć¾ć§ć«å…±ęœ‰ć—ć¦ćŠćć¾ć™ć€‚

CSS åŸŗęœ¬ćƒœćƒƒć‚Æć‚¹ćƒ¢ćƒ‡ćƒ«
CSS åŸŗęœ¬ćƒœćƒƒć‚Æć‚¹ćƒ¢ćƒ‡ćƒ« - developer.mozilla.org


ā‘£ Painting the render tree

悈恆悄恏ꏏē”»ć—ć¾ć™ć€‚
ć©ć“ć«ęē”»ć™ć‚‹ć‹ćØ恄恆配ē½®ę–¹ę³•ć«ć¤ć„ć¦č€ƒćˆć‚‹ć“ćØ恫ćŖć‚Šć¾ć™ć€‚
å¤§ććåˆ†ć‘ć¦ć€3ć¤ć«åˆ†ć‹ć‚Œć¾ć™ć€‚

  • 通åøø
    • ć‚Ŗ惖ć‚ø悧ć‚Æ惈ćÆćƒ‰ć‚­ćƒ„ćƒ”ćƒ³ćƒˆå†…ć®å “ę‰€ć«å¾“ć£ć¦é…ē½®ć•ć‚Œć¾ć™ć€‚ć¤ć¾ć‚Šć€ćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼å†…ć®å “ę‰€ćÆDOM惄ćƒŖćƒ¼å†…ć®å “ę‰€ćØåŒę§˜ć«ćŖ悊态惜惃ć‚Æć‚¹ć®ēØ®é”žć‚„åÆøę³•ć«å¾“ć£ć¦ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆć•ć‚Œć¾ć™ć€‚
      • position:static,relative
  • ćƒ•ćƒ­ćƒ¼ćƒˆ
    • ć‚Ŗ惖ć‚ø悧ć‚Æ惈ćÆęœ€åˆć«é€šåøøć®ćƒ•ćƒ­ćƒ¼ć®ć‚ˆć†ć«ćƒ¬ć‚¤ć‚¢ć‚¦ćƒˆć•ć‚Œć¦ć‹ć‚‰ć€å·¦å³ć®ć§ćć‚‹ć ć‘é ćć«ē§»å‹•ć•ć‚Œć¾ć™ć€‚
      • float:right,left
  • ēµ¶åƾ
    • ć‚Ŗ惖ć‚ø悧ć‚Æ惈ćÆćƒ¬ćƒ³ćƒ€ćƒ¼ćƒ„ćƒŖćƒ¼å†…ć§DOM惄ćƒŖćƒ¼ćØćÆē•°ćŖć‚‹å “ę‰€ć«é…ē½®ć•ć‚Œć¾ć™ć€‚
      • position:absolute,fixed

ā€» 配ē½®ę–¹ę³•

配ē½®ę–¹ę³•ćŒåˆ†ć‹ć‚Œć°ć€ä»Šåŗ¦ćÆꏏē”»ć™ć‚‹å½¢ć«ć¤ć„ć¦č€ƒćˆć¾ć™ć€‚ćƒ–ćƒ­ćƒƒć‚Æ惜惃ć‚Æć‚¹ćØć‚¤ćƒ³ćƒ©ć‚¤ćƒ³ćƒœćƒƒć‚Æć‚¹ć§ć™ć€‚

惖惭惃ć‚ÆćØć‚¤ćƒ³ćƒ©ć‚¤ćƒ³ć®é…åˆ—
惖惭惃ć‚ÆćØć‚¤ćƒ³ćƒ©ć‚¤ćƒ³ć®é…åˆ— - www.html5rocks.com

惖惭惃ć‚Æ惜惃ć‚Æć‚¹ćÆ态ēŸ­å½¢ć®å½¢ć§ć‚ć‚Šåž‚ē›“恫äø¦ć³ć¾ć™ć€‚
ć‚¤ćƒ³ćƒ©ć‚¤ćƒ³ćƒœćƒƒć‚Æć‚¹ćÆ态ē‹¬č‡Ŗć®å½¢ć‚’ęŒćŸćšę°“å¹³ć«äø¦ć³ć¾ć™ć€‚

z-indexć®ć‚ˆć†ćŖćƒ—ćƒ­ćƒ‘ćƒ†ć‚£ć§ćÆć€ć‚¹ć‚æćƒƒć‚­ćƒ³ć‚°ć‚³ćƒ³ćƒ†ć‚­ć‚¹ćƒˆćØ恄恆ꦂåæµć‚’ēŸ„悋åæ…č¦ćŒć‚ć‚Šć¾ć™ć€‚
č©³ć—ććÆć€é‡ć­åˆć‚ć›ć‚³ćƒ³ćƒ†ć‚­ć‚¹ćƒˆ - developer.mozilla.org 悒恔ē¢ŗčŖćć ć•ć„怂


ćƒ–ćƒ©ć‚¦ć‚¶ć‚’č‡Ŗä½œć—ć¦ćæ悋

前ē« ć§ćÆć€č³‡ę–™ć‚’é€šć—ć¦ćƒ–ćƒ©ć‚¦ć‚¶ć®å‹•ä½œćŒē†č§£ć§ćć¾ć—ćŸć€‚
čŖ­ć‚€ć ć‘ć˜ć‚ƒćŖćć€å‹•ć‹ć—ć¦ē†č§£ć—恦ćæ恟恄ćØćÆę€ć„ć¾ć›ć‚“ć‹ļ¼Ÿ
恝恆恧恙态č‡Ŗä½œć—ć¦ćæć¾ć—ć‚‡ć†ć€‚

Rustč£½ć®ServoćØć„ć†ćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³ć‚’é–‹ē™ŗ恗恦恄悋äŗŗ恌ę›øć„ćŸć€ę¬”ć®ćƒ–ćƒ©ć‚¦ć‚¶č‡Ŗä½œć«é–¢ć™ć‚‹čؘäŗ‹ćŒćØć¦ć‚‚åˆ†ć‹ć‚Šć‚„ć™ć„ć§ć™ć€‚

Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(mbrubeck)ć®ćƒ”ć‚¤ćƒ³ćƒ•ćƒ­ćƒ¼ćŒć€ć“ć‚Œć¾ć§ć®č©±ćØćØć¦ć‚‚ä¼¼ć¦ć„ć¾ć™ć€‚

Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(mbrubeck)ć®ćƒ”ć‚¤ćƒ³ćƒ•ćƒ­ćƒ¼
Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(mbrubeck)ć®ćƒ”ć‚¤ćƒ³ćƒ•ćƒ­ćƒ¼ - limpet.net

Style treećÆć€ć“ć‚Œć¾ć§ć®č©±ć§ć„ć†ćØRender tree恠ćØę€ć„ć¾ć™ć€‚
Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(mbrubeck)恫态ꬔ恮HTMLćØCSS悒čŖ­ćæč¾¼ć¾ć›ć‚‹ćØ态äø‹čØ˜ć®ē”»åƒć®ć‚ˆć†ćŖć‚¢ć‚¦ćƒˆćƒ—ćƒƒćƒˆć«ćŖć‚Šć¾ć™ć€‚

<!-- https://github.com/mbrubeck/robinson/blob/master/examples/test.html -->
<html>
  <head>
    <title>Test</title>
  </head>
  <div class="outer">
    <p class="inner">
      Hello, <span id="name">world!</span>
    </p>
    <p class="inner" id="bye">
      Goodbye!
    </p>
  </div>
</html>
/* https://github.com/mbrubeck/robinson/blob/master/examples/test.css */
* {
  display: block;
}

span {
  display: inline;
}

html {
  width: 600px;
  padding: 10px;
  border-width: 1px;
  margin: auto;
  background: #ffffff;
}

head {
  display: none;
}

.outer {
  background: #00ccff;
  border-color: #666666;
  border-width: 2px;
  margin: 50px;
  padding: 50px;
}

.inner {
  border-color: #cc0000;
  border-width: 4px;
  height: 100px;
  margin-bottom: 20px;
  width: 500px;
}

.inner#bye {
  background: #ffff00;
}

span#name {
  background: red;
  color: white;
}

Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(mbrubeck)ć®ć‚¢ć‚¦ćƒˆćƒ—ćƒƒćƒˆ
Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(mbrubeck)ć®ć‚¢ć‚¦ćƒˆćƒ—ćƒƒćƒˆ - github.com/mbrubeck/robinson

ꬔ恮ćƒŖćƒ³ć‚Æ恫恂悋č‡Ŗä½œćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³ćÆ态mbrubeck/robinsonć‚’å‚č€ƒć«ć—ć¦ä½œć‚‰ć‚ŒćŸć‚‚ć®ć ćć†ć§ć™ć€‚

Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(askerry)恫态ꬔ恮HTMLćØCSS悒čŖ­ćæč¾¼ć¾ć›ć‚‹ćØ态äø‹čØ˜ć®ē”»åƒć®ć‚ˆć†ćŖć‚¢ć‚¦ćƒˆćƒ—ćƒƒćƒˆć«ćŖć‚Šć¾ć™ć€‚
č¦‹ćŸć‚‰åˆ†ć‹ć‚‹ćØę€ć„ć¾ć™ćŒć€ćØć¦ć‚‚é«˜ę©Ÿčƒ½ć§ć™ć€‚

<!-- https://github.com/askerry/toy-browser/blob/master/examples/demo.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Browser Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="demo.css"/>
    </head>

    <body>
        <div id="page">
            <header class="header">
                <h1>Toy Browser Engine</h1>
            </header>
            <div id="main">
                <div id="navbar">
                    <a href="#" class="navitem">
                        Home
                    </a>
                    <a href="#" class="navitem">
                        About
                    </a>
                    <a href="#" class="navitem">
                        Some random stuff
                    </a>
                    <a href="#" class="navitem">
                        Conclusion
                    </a>
                    <img class="img" src="images/otters.jpg"/>
                </div>
                <div id="content">
                    <h2>What is this?</h2>
                    This is a <b>toy</b> browser engine, implemented for
                    <span>fun </span> <img class="icon" src="images/fun.png"/>
                    and <span>glory <img class="icon" src="images/glory.png"/></span>.
                    <h2>Why would anyone do this?</h2>
                    This seems pretty pointless! But I had a few goals:
                    <ul>
                        <li>Something to build to learn C++</li>
                        <li>Learn more about how browsers work</li>
                        <li>Make something I've never made before</li>
                    </ul>
                    <h2>What can it do?</h2>
                    <p>
                        Currently, the engine can parse a subset of HTML
                        and build a DOM tree. It can also parse a small subset of
                        CSS (sometimes incorrectly) and use simple selector matching
                        to apply styles to elements.
                    </p>
                    <p>
                        It supports <em>very basic</em> rendering of boxes, images, and
                        text with simple block and inline layouts.
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>
/* https://github.com/askerry/toy-browser/blob/master/examples/demo.css */
body {
    font-family: Arial, sans-serif;
    background-color: #BFC0C0;
    color: #253237;
    font-size: 16px;
}
#page {
    padding: 20;
    /* width: 800px; */
    margin: auto;
}

header {
    padding: 10px;
    padding-left: 20px;
    background-color: #434371;
    color: #4acebd;
}

span {
    color: #4acebd;
}

#main {
    background-color: white;
    display: flex;
}

#navbar {
    width: 180px;
    padding: 30px;
    background-color: #4acebd;
    height: 500px;
}

.navitem {
    display: block;
    text-align: center;
    background-color: #434371;
    color: #4acebd;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 4px;
    border-style: solid;
    border-width: 2px;
    border-color: #253237;
}

#content {
    padding: 20px;
    width: 500;
}

.img {
    width: 180px;
}

.icon {
    width: 2em;
}

h2 {
    color: #434371;
}

li {
    margin-bottom: 5px;
}

Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(askerry)ć®ć‚¢ć‚¦ćƒˆćƒ—ćƒƒćƒˆ
Toyćƒ–ćƒ©ć‚¦ć‚¶ć‚Øćƒ³ć‚øćƒ³(askerry)ć®ć‚¢ć‚¦ćƒˆćƒ—ćƒƒćƒˆ - github.com/askerry/toy-browser

ē§ćØ恗恦ćÆć€ć“ć”ć‚‰ć®ę–¹ćŒčˆˆå‘³ćŒć‚ć‚‹ć®ć§ć€ć¾ćšć“ć”ć‚‰ć‚’ēŸ„悊态恝悌悒Rustē‰ˆć§ä½œć‚Šē›“恗恟恄ćŖćØę€ć„ć¾ć™ć€‚

C++ ć‚’å­¦ć¶

恕恦态C++ć‚’å­¦ć¶ćŸć‚ć«ć€ę¬”ć®ć‚µć‚¤ćƒˆć‚’ć–ć£ćØēœŗ悁恦ćæć¾ć™ć€‚

č‡Ŗä½œćƒ–ćƒ©ć‚¦ć‚¶ć®ć‚½ćƒ¼ć‚¹ć‚³ćƒ¼ćƒ‰

askerry/toy-browserć®ćƒ”ć‚¤ćƒ³ć‚³ćƒ¼ćƒ‰(main.cc)ć‚’č¼‰ć›ć¾ć™ć€‚

/* https://github.com/askerry/toy-browser/blob/master/src/main.cc */
namespace {

void renderWindow(int width, int height, const style::StyledNode &sn,
                  sf::RenderWindow *window) {
  layout::Dimensions viewport;
  viewport.content.width = width;
  viewport.content.height = height;
  // Create layout tree for the specified viewport dimensions.
  std::unique_ptr<layout::LayoutElement> layout_root =
      layout::layout_tree(sn, viewport);
  // Paint to window.
  paint(*layout_root, viewport.content, window);
}

int windowLoop(const style::StyledNode &sn) {
  // Create browser window.
  std::unique_ptr<sf::RenderWindow> window(new sf::RenderWindow());
  window->create(sf::VideoMode(FLAGS_window_width, FLAGS_window_height),
                 "Toy Browser", sf::Style::Close | sf::Style::Resize);
  window->setPosition(sf::Vector2i(0, 0));
  window->clear(sf::Color::Black);
  // Render initial window contents.
  renderWindow(FLAGS_window_width, FLAGS_window_height, sn, window.get());
  // Run the main event loop as long as the window is open.
  while (window->isOpen()) {
    sf::Event event;
    while (window->pollEvent(event)) {
      switch (event.type) {
        case sf::Event::Closed:
          window->close();
          break;

        case sf::Event::KeyPressed:
          logger::debug("keypress: " + std::to_string(event.key.code));
          break;

        case sf::Event::Resized:
          logger::debug("new width: " + std::to_string(event.size.width));
          logger::debug("new height: " + std::to_string(event.size.height));
          window->clear(sf::Color::Black);
          renderWindow(event.size.width, event.size.height, sn, window.get());
          break;

        case sf::Event::TextEntered:
          if (event.text.unicode < 128) {
            logger::debug(
                "ASCII character typed: " +
                std::to_string(static_cast<char>(event.text.unicode)));
          }
          break;

        default:
          break;
      }
    }
  }
  return 0;
}
}  // namespace
int main(int argc, char **argv) {
  gflags::ParseCommandLineFlags(&argc, &argv, true);

  // Parse HTML and CSS files.
  const std::string source = io::readFile(FLAGS_html_file);
  std::unique_ptr<dom::Node> root = html_parser::parseHtml(source);
  const std::string css = io::readFile(FLAGS_css_file);
  const std::unique_ptr<css::StyleSheet const> stylesheet = css::parseCss(css);

  // Initialize font registry singleton.
  text_render::FontRegistry *registry =
      text_render::FontRegistry::getInstance();

  // Align styles with DOM nodes.
  std::unique_ptr<style::StyledNode> styled_node =
      style::styleTree(*root, stylesheet, style::PropertyMap());

  // Run main browser window loop.
  windowLoop(*styled_node);

  // Delete styled node and clear font registry.
  styled_node.reset();
  registry->clear();
  return 0;
}

ꬔ恮ćØćŠć‚Šć€ć“ć‚Œć¾ć§å­¦ć‚“ć§ććŸćƒ”ć‚¤ćƒ³ćƒ•ćƒ­ćƒ¼ćØ态C++恌ćØć¦ć‚‚ä¼¼ć¦ć„ć‚‹ć“ćØćŒåˆ†ć‹ć‚Šć¾ć™ć€‚

  1. HTMLćØCSSć‚’ćƒ‘ćƒ¼ć‚¹
// Parse HTML and CSS files.
const std::string source = io::readFile(FLAGS_html_file);
std::unique_ptr<dom::Node> root = html_parser::parseHtml(source);
const std::string css = io::readFile(FLAGS_css_file);
const std::unique_ptr<css::StyleSheet const> stylesheet = css::parseCss(css);
  1. 1恮ēµęžœć‹ć‚‰Style tree(Render tree)悒꧋ēƉ
// Align styles with DOM nodes.
std::unique_ptr<style::StyledNode> styled_node =
    style::styleTree(*root, stylesheet, style::PropertyMap());
  1. 2恮ēµęžœć‹ć‚‰Layout tree悒꧋ēƉ
// Create layout tree for the specified viewport dimensions.
std::unique_ptr<layout::LayoutElement> layout_root =
    layout::layout_tree(sn, viewport);
  1. 3悒paintćØ恄恆ꏏē”»
// Paint to window.
paint(*layout_root, viewport.content, window);

Re: ćƒ–ćƒ©ć‚¦ć‚¶ć®ä»•ēµ„ćæč³‡ę–™ć‚’čŖ­ć‚€

悂恆äø€åŗ¦ć€ćƒ–ćƒ©ć‚¦ć‚¶ć®ä»•ēµ„ćæ: ęœ€ę–°ć‚¦ć‚§ćƒ–ćƒ–ćƒ©ć‚¦ć‚¶ć®å†…éƒØ꧋造 悒čŖ­ć‚€ćØć€åˆć‚ć¦čŖ­ć‚“恠ćØćć«ęÆ”ć¹ć¦ć€ę·±ćē†č§£ć§ćć‚‹ć‚“ć˜ć‚ƒćŖ恄恋ćŖćØę€ć„ć¾ć™ć€‚

ęœ€å¾Œć«

ćƒ–ćƒ©ć‚¦ć‚¶ć®å‹•ä½œć«ć¤ć„ć¦č³‡ę–™ć‚„č‡Ŗä½œć‚’é€šć—ć¦ē†č§£ć‚’ę·±ć‚ć¾ć—ćŸć€‚

ćƒ–ćƒ©ć‚¦ć‚¶ć®å‹•ä½œćŒåˆ†ć‹ć‚Œć°ć€ćƒ–ćƒ©ć‚¦ć‚¶ć«å„Ŗ恗恄Webćƒ•ćƒ­ćƒ³ćƒˆć‚Øćƒ³ćƒ‰é–‹ē™ŗ恌恧恍悋ćØę€ć„ć¾ć™ć€‚

(今åŗ¦ć“恝Chromium恮ćƒŖćƒćƒ¼ć‚¹ć‚Øćƒ³ć‚øćƒ‹ć‚¢ćƒŖćƒ³ć‚°ćŒć§ćć‚‹ć‹ć‚‚ć—ć‚Œć¾ć›ć‚“ć€‚)

ćć®ä»–

Chromiumć®ć‚¢ćƒ‰ćƒ™ćƒ³ćƒˆć‚«ćƒ¬ćƒ³ćƒ€ćƒ¼ćŒć‚ć‚Šć¾ć—ćŸć€‚å‚č€ƒć¾ć§ć«ć–ć£ćØ見恦ćæ悋ćØč‰Æ恄恧恗悇恆怂
Chromium Browser Advent Calendar 2017

Discussion

ć€Œćƒ–ćƒ©ć‚¦ć‚¶ć®ä»•ēµ„ćæć‚’å­¦ć¶ć€ć®čؘäŗ‹ć‚’見恦态askerry/toy-browserć‚’ćƒ€ć‚¦ćƒ³ćƒ­ćƒ¼ćƒ‰ć—ć€
ćƒ“ćƒ«ćƒ‰ć—ć¦č¦‹ć‚ˆć†ćØę€ć„ć¾ć—ćŸć€‚
ć‚Øćƒ³ć‚øćƒ‹ć‚¢ć§ć‚‚ćŖćć€čˆˆå‘³ć®ć‚ć‚‹ć“ćØ悒ē‹¬å­¦ć§å‹‰å¼·ć—恦恄悋悂恮恧恙怂
askerry/toy-browserćƒšćƒ¼ć‚ø恮Instructions恫bazelćØsfmlć‚’ć‚¤ćƒ³ć‚¹ćƒˆćƒ¼ćƒ«ć—ć€WORKSPACEćƒ•ć‚”ć‚¤ćƒ«ć®new_local_repository
悒ꛓꖰ恗恦sfmlćŒć‚¤ćƒ³ć‚¹ćƒˆćƒ¼ćƒ«ć•ć‚Œć¦ć„ć‚‹å “ę‰€ć‚’ęŒ‡ć™ć‚ˆć†ć«å¤‰ę›“ć™ć‚‹
ćØę›øć‹ć‚Œć¦ć„ćŸćŸć‚ć€ć¾ćšbazelć‚’ć‚¤ćƒ³ć‚¹ćƒˆćƒ¼ćƒ«ć—helloworldć®ć‚ˆć†ćŖē°”単ćŖć‚‚ć®ć‚’ćƒ“ćƒ«ćƒ‰ć™ć‚‹ć“ćØćŒć§ćć¾ć—ćŸć€‚
ćć‚Œć‹ć‚‰ć„ć‚ć„ć‚ć‚µć‚¤ćƒˆē­‰č¦‹ć¦ć¾ć—ćŸćŒć€toy-browserć‚’ćƒ“ćƒ«ćƒ‰ć™ć‚‹ć“ćØćŒć§ćć¾ć›ć‚“ć€‚
初åæƒč€…ć®ćŸć‚ć€sfmlć‚’ć‚¤ćƒ³ć‚¹ćƒˆćƒ¼ćƒ«ć™ć‚‹ćØ恄恆恓ćØč‡Ŗä½“ć‚‚ć‚ˆćć‚ć‹ć£ć¦ć„ćŖć„ć®ć‹ć‚‚ć—ć‚Œć¾ć›ć‚“ćƒ»ćƒ»ćƒ»
具体ēš„ć«ä½•ć‚’ć™ć‚Œć°ćƒ“ćƒ«ćƒ‰ć™ć‚‹ć“ćØćŒć§ćć‚‹ć®ć§ć—ć‚‡ć†ć‹ļ¼Ÿ
恔ćŖćæ恫恓恮čؘäŗ‹ćÆå‚č€ƒć«ćŖć‚Šć¾ć™ć‹ļ¼Ÿ
ē’°å¢ƒćÆmacOS Monterey ver12.4恧恙

恝恆恧恙恋怂Githubč‡Ŗä½“ć‚„ć£ćŸć“ćØ恌ćŖć„ć‹ć‚‰ćć£ć‹ć‚‰ć§ć™ć­ć€‚
ć”ć‚‡ć£ćØć‚„ć£ć¦ćæć¾ć™ć€‚
ć¾ćŸč”Œćč©°ć¾ć£ćŸć‚‰č³Ŗå•ć™ć‚‹ć‹ć‚‚ć§ć™ć€‚

ćƒ­ć‚°ć‚¤ćƒ³ć™ć‚‹ćØć‚³ćƒ”ćƒ³ćƒˆć§ćć¾ć™