reflow/repaint

11/11の社内勉強会資料

Transcript

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

   View Slide

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

   View Slide

3. ͳͥؾʹ͢Δඞཁ͋Δͷʁ
   ෛՙ͕େ͖͘ɺύϑΥʔϚϯεʹ

   Өڹ͕͋Δ͔Β
   UXͷ௿Լ
   
   

   View Slide

4. ϒϥ΢βͷඳըϓϩηε
   DOM

   Tree
   Style

   Rules
   HTML
   CSS
   Render

   Tree
   Layout
   Paint Display
   Webkitͷ؆ུϑϩʔ
   
   

   View Slide

5. ϒϥ΢βͷඳըϓϩηε
   DOM

   Tree
   Style

   Rules
   HTML
   CSS
   Render

   Tree
   Display
   Layout
   ࠓ೔࿩͢ͷ͸͜͜
   Paint
   
   

   View Slide

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

   View Slide

7. Paint
   • LayoutΑΓ΋௿͍͕ɺ΍͸Γෛՙ͕ߴ͍
   • Repaintͱ͸࠶ܭࢉ͞ΕͨϨϯμʔπϦʔͷ݁ՌΛݩʹ

   εΫϦʔϯΛߋ৽͢Δ͜ͱΛݴ͍·͢
   • GPUϨϯμϦϯάΛ࢖͏͜ͱʹΑΓɺൃੜΛ཈͑Δ͜ͱ͕Մೳ

   ΞχϝʔγϣϯͰ͸transform, opacityͳͲΛ࢖༻͢Δ
   • ҎԼͷϓϩύςΟ͕ओʹෛՙ͕ߴ͍ྫͰ͢
   - box-shadow
   - border-radius
   - background
   - filter: blur
   - gradient
   - position:fixed
   
   

   View Slide

8. Reflow / Repaint
   Reflow
   Repaint
   ϨϯμʔπϦʔ͕࣋ͭ

   DOMཁૉΛ࠶ܭࢉ͢Δ
   εΫϦʔϯ΁ͷ

   ࠶ඳըॲཧΛ͢Δ
   
   

   View Slide

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

   offsetWidth, offsetHeightͷ࠶ܭࢉ
   cssٖࣅΫϥεͷૢ࡞
   css#color
   css#outline
   css#visibility: hidden
   css#backgroundColor
   
   

   View Slide

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';
    
    

    View Slide

11. ൃੜΛ࠷খݶʹ཈͑Δ
    • styleͰͷมߋΛආ͚Δ
    • documentFragmentΛ࢖͏
    
    

    View Slide

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;
    }
    
    

    View Slide

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ճ͔͠ൃੜ͠ͳ͍
    
    

    View Slide

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';
    }
    ѱ͍ྫ
    ϧʔϓ֎ͰΩϟογϡ͢Δ΂͖
    
    

    View Slide

15. documentFragmentΛ࢖͏
    • documentFragmentΛ࢖͍ɺෳ਺ͷมߋΛ

    ·ͱΊϨϯμʔπϦʔʹ௥Ճ͢Δ͜ͱʹΑΓ
    ReflowΛҰճʹ཈͑·͢
    https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide