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

reflow/repaint

7496c69c781c91d16637ea6102311e26?s=47 Yuta Hiroto
November 10, 2016

 reflow/repaint

11/11の社内勉強会資料

7496c69c781c91d16637ea6102311e26?s=128

Yuta Hiroto

November 10, 2016
Tweet

Transcript

  1. Reflow / Repaint Yuta Hiroto @about_hiroppy #frontier-js-2 

  2. Reflow / Repaint ؾʹ͔͚ͯ·͔͢ʁ 

  3. ͳͥؾʹ͢Δඞཁ͋Δͷʁ ෛՙ͕େ͖͘ɺύϑΥʔϚϯεʹ
 Өڹ͕͋Δ͔Β UXͷ௿Լ 

  4. ϒϥ΢βͷඳըϓϩηε DOM
 Tree Style
 Rules HTML CSS Render
 Tree Layout

    Paint Display Webkitͷ؆ུϑϩʔ 
  5. ϒϥ΢βͷඳըϓϩηε DOM
 Tree Style
 Rules HTML CSS Render
 Tree Display

    Layout ࠓ೔࿩͢ͷ͸͜͜ Paint 
  6. Layout(Reflow) • GekkoͰ͸Reflow, WebkitͰ͸Layoutͱݺ͹Ε·͢ • ϨϯμʔπϦʔ͕࠶ධՁ͞Ε࠶ܭࢉ͢Δ৔ॴͰ͢ • ਌ཁૉʹḪͬͯ࠶ܭࢉ͢ΔͨΊɺύϑΥʔϚϯεʹ Өڹ͕ग़΍͍͢ ࠓճ͸ReflowͱݺͼਐΊ·͢

    
  7. Paint • LayoutΑΓ΋௿͍͕ɺ΍͸Γෛՙ͕ߴ͍ • Repaintͱ͸࠶ܭࢉ͞ΕͨϨϯμʔπϦʔͷ݁ՌΛݩʹ
 εΫϦʔϯΛߋ৽͢Δ͜ͱΛݴ͍·͢ • GPUϨϯμϦϯάΛ࢖͏͜ͱʹΑΓɺൃੜΛ཈͑Δ͜ͱ͕Մೳ
 ΞχϝʔγϣϯͰ͸transform, opacityͳͲΛ࢖༻͢Δ

    • ҎԼͷϓϩύςΟ͕ओʹෛՙ͕ߴ͍ྫͰ͢ - box-shadow - border-radius - background - filter: blur - gradient - position:fixed 
  8. Reflow / Repaint Reflow Repaint ϨϯμʔπϦʔ͕࣋ͭ
 DOMཁૉΛ࠶ܭࢉ͢Δ εΫϦʔϯ΁ͷ
 ࠶ඳըॲཧΛ͢Δ 

  9. ൃੜτϦΨʔ ReFlow + RePaint RePaintͷΈ DOM Nodeͷ௥Ճɾߋ৽ɾ࡟আ windowͷαΠζมߋɾεΫϩʔϧ ϑΥϯταΠζͷมߋ Ξχϝʔγϣϯ

    ελΠϧଐੑͷ௥Ճɾมߋɾ࡟আ ίϯςΩετͷมߋ
 offsetWidth, offsetHeightͷ࠶ܭࢉ cssٖࣅΫϥεͷૢ࡞ css#color css#outline css#visibility: hidden css#backgroundColor 
  10. const style = document.body.style; // reflow + repaint style.border =

    '1px solid #333'; style.padding = '10px'; style.fontSize = '1px'; document.body.appendChild(document.createTextNode('hoge!')); // repaint style.color = 'blue'; style.backgroundColor = '#0ff'; 
  11. ൃੜΛ࠷খݶʹ཈͑Δ • styleͰͷมߋΛආ͚Δ • documentFragmentΛ࢖͏ 

  12. styleͰͷมߋΛආ͚Δ • DOMͷมߋճ਺Λ1ճ෼ʹ
 ·ͱΊΔ • display: noneͰӅ͠มߋ(n ճ)ͤ͞displayΛ໭͢ (nճ ͷreflow/repaintʹର͠ɺ


    ͜ͷํ๏ͩͱ2ճͰࡁΉ) // js const el = document.body; const style = el.style; // bad style.left = '10px'; // reflow, repaint style.top = '20px'; // reflow, repaint // good el.classList.add("anotherclass"); // reflow, repaint // .css .anotherclass { left: 10px; top: 20px; } 
  13. ϒϥ΢βͷ࢓૊Έ • ReFlow/RePaint͸ෛՙ͕ߴ͍ͨΊɺ
 ϒϥ΢βࣗମ͕࠷దԽΛߦ͍·͢ • ϒϥ΢β͸JavaScript͔ΒͷstyleมߋΛΩϡʔʹ٧Ίɺ·ͱΊͯ ࠷ޙʹॲཧΛߦ͏͜ͱʹΑΓReflow/RepaintΛ࠷খݶʹ཈͑·͢ function updateBodyStyle() {

    const style = document.body.style; style.top = '50px'; style.left = '30px'; style.right = '40px'; style.bottom = '20px'; } 4ճมߋΛߦ͍ͬͯΔ͕
 Reflow/Repaint͸1ճ͔͠ൃੜ͠ͳ͍ 
  14. ReFlowͷ࠷దԽΛյ͢ • ϒϥ΢β͸styleΛΩϡʔʹ٧ΊɺҰఆ࣌ؒܦ͔ͭมߋճ਺ͰΩϡʔΛ
 ϑϥογϡ͠·͢ • ҎԼͷελΠϧΛಡΈࠐΉͱڧ੍తʹϑϥογϡ͢Δ͜ͱ͕ՄೳͰ͢ - offsetTop/Left/Width/Height - scrollTop/Left/Width/Height

    - clientTop/Left/Width/Height - getComputedStyle() - getClientRect() - scrollBy(), scrollTo() - scrollX, scrollY - height, width const div = document.querySelector('div'); for (let i = 0; i < 100; i++) { div.style.left = div.offsetLeft + 50 + 'px'; } ѱ͍ྫ ϧʔϓ֎ͰΩϟογϡ͢Δ΂͖ 
  15. documentFragmentΛ࢖͏ • documentFragmentΛ࢖͍ɺෳ਺ͷมߋΛ
 ·ͱΊϨϯμʔπϦʔʹ௥Ճ͢Δ͜ͱʹΑΓ ReflowΛҰճʹ཈͑·͢ https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment 

  16. chromeͰ֬ೝ͢Δํ๏ Rendering Timeline/Paint Profiler 

  17. ·ͱΊ • ReFlowͱRePaintͷଟൃΛؾʹ͢ΔΑ͏ʹ͠Α͏ • ൃੜτϦΨʔʹͳΔJavaScriptʹؾΛ͚ͭΑ͏ • Ξχϝʔγϣϯ͸CSS transformΛ࢖͓͏ 

  18. ࢀߟจݙ • https://www.html5rocks.com/ja/tutorials/ internals/howbrowserswork/ • http://rochas.cc/blog/2013/12/09/ frontrend.html • https://gist.github.com/paulirish/ 5d52fb081b3570c81e3a