Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブラウザとフレンズになろう

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.

 ブラウザとフレンズになろう

Avatar for pokohide

pokohide

April 02, 2018
Tweet

More Decks by pokohide

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ • ໊લɿञҪӳ৳( Ά͜ͻͰ ) • OthloTechӡӦ୅ද • ීஈ͸WEB԰͞Μ(Ruby, Node,

    React, etc…) • झຯɿөըؑ৆(Hulu), ήʔϜ࣮گ(ఋऀ), ςχε IZEFBCMF IZEF
  2. HTML DOM Tree : example 1 <!DOCTYPE html> 2 <html>

    3 <head> 4 <title>OthloTech</title> 5 </head> 6 <body> 7 <a href="#">hoge</a> 8 </body> 9 </html> %PDVNFOU IUNM3PPUFMFNFOU IFBE&MFNFOU CPEZFMFNFOU UJUMF&MFNFOU B&MFNFOU l0UIMP5FDIz5FYU lISFGz"UUSJCVUF lIPHFz5FYU
  3. HTMLղੳ 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>OthloTech</title>

    5 </head> 6 <body> 7 <a href="#">hoge</a> 8 </body> 9 </html> %PDVNF IUNM3PPU IFBE CPEZ UJUMF B l0UIMP5FDI lISFGz lIPHFz )5.-%PDVNFOU ࣈ۟ղੳ ߏจղੳ %0.5SFF
  4. Τϥʔͷڐ༰(HTML) • HTML࢓༷Ͱ͸Τϥʔॲཧ͸نఆ͞Ε͍ͯͳ͍ • <br> ͷ୅ΘΓͷ </br> → <br>ͱͯ͠ॲཧ •

    ೖΕࢠͷϑΥʔϜཁૉ → form಺ͷform͸ແࢹ • ਂ͗͢Δλά֊૚ → ಉ͡छྨͷλάͷೖΕࢠ͸ 20·Ͱ 8FCLJUͷྫ
  5. Render Treeߏ੒ • ελΠϧγʔτͷΧεέʔυॱং • ϒϥ΢βͷએݴ • Ϣʔβʔͷ௨ৗͷએݴ • ੍࡞ऀͷ௨ৗͷએݴ

    • ੍࡞ऀͷॏཁͳએݴ • Ϣʔβʔͷॏཁͳએݴ(!important) ௿ ߴ ಉ͡ॱংͷ৔߹͸ ผͷϧʔϧͰ൑அ
  6. ηϨΫλͷಛҟੜ • HTMLͷʮstyleʯଐੑʹ͋Δ৔߹͸1, ͦΕҎ֎͸0 (=a) • ηϨΫλ಺ͷIDଐੑͷ਺ (=b) • ηϨΫλ಺ͷଞͷଐੑͱٙࣅΫϥεͷ਺

    (=c) • ηϨΫλ಺ͷཁૉ໊ͱٙࣅཁૉͷ਺ (=d) YBCDEͰࢉग़ IUUQTXXXXPSH53DTTDBTDBEF
  7. Layoutճ਺ΛݮΒ͢ • ʮvisiblity: hiddenʯ < ʮdisplay: noneʯ • ʮposition:fixedʯͷݻఆϨΠΞ΢τ͸ෛՙେ •

    ϒϥ΢βʹैॱʹ 1BJOU -BZPVU 1BJOU εΫϩʔϧͷͨͼʹ-BZPVU Ұճ͔͠-BZPVU͠ͳ͍
  8. DOM͸๩͍͠ • DOMཁૉͷมߋ΍௥Ճ͕͋ͬͨ࣌ͷॲཧ • DOM͕໦ߏ଄͔ͷνΣοΫ • DOMͷ୳ࡧ • ໦ߏ଄ͷมԽͷ௨஌ •

    Render Treeߏ੒, Layout, Paint… • ͳΜ͔๩ͦ͠͏ • มߋ෦෼͚ͩҰؾʹૹΕͳ͍ͷ͔ͳ(´ɾωɾʆ)
  9. Incremental DOM • جຊతͳߟ͑ํ͸virtual DOMͱಉ͡ • ৽͍͠(Virtual) DOM TreeΛ࡞Γͳ͕Βɺ(࣮ࡍͷ) DOM

    TreeΛwalkͭͭ͠มߋ͍ͯ͘͠ͷͰϝϞϦʹ༏͍͠ • Virtual DOMͷΑ͏ʹมߋલͱมߋޙͷ̎ͭͷԾ૝DOM Tree͕ඞཁͳ͍
  10. Incremental DOM : update Virtual DOM DOM diff patch diff

    Meta Meta Meta Meta Meta Meta apply compare compare compare compare compare compare