$30 off During Our Annual Pro Sale. View Details »

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 RePaintͷΈ DOM Nodeͷ௥Ճɾߋ৽ɾ࡟আ windowͷαΠζมߋɾεΫϩʔϧ ϑΥϯταΠζͷมߋ Ξχϝʔγϣϯ

    ελΠϧଐੑͷ௥Ճɾมߋɾ࡟আ ίϯςΩετͷมߋ
 offsetWidth, offsetHeightͷ࠶ܭࢉ cssٖࣅΫϥεͷૢ࡞ css#color css#outline css#visibility: hidden css#backgroundColor 
  2. 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'; 
  3. 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; } 
  4. ϒϥ΢βͷ࢓૊Έ • 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ճ͔͠ൃੜ͠ͳ͍ 
  5. 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'; } ѱ͍ྫ ϧʔϓ֎ͰΩϟογϡ͢Δ΂͖