reflow/repaint

11/11の社内勉強会資料

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