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

reflow/repaint

Yuta Hiroto
November 10, 2016

 reflow/repaint

11/11の社内勉強会資料

Yuta Hiroto

November 10, 2016
Tweet

More Decks by Yuta Hiroto

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    Өڹ͕͋Δ͔Β
    UXͷ௿Լ

    View full-size slide

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

    Tree
    Style

    Rules
    HTML
    CSS
    Render

    Tree
    Layout
    Paint Display
    Webkitͷ؆ུϑϩʔ

    View full-size slide

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

    Tree
    Style

    Rules
    HTML
    CSS
    Render

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

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

    ࠶ඳըॲཧΛ͢Δ

    View full-size slide

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

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide