will-change

Chrome 53버전뢀터 μ• λ‹ˆλ©”μ΄μ…˜ μ„±λŠ₯κ³Ό κ·Έλž˜ν”½ μ„±λŠ₯ κ°œμ„ ν•˜κΈ° μœ„ν•΄ μƒˆλ‘œμš΄ λ™μž‘μ„ μ„ λ³΄μ˜€λ‹€. ν•˜μ§€λ§Œ κ·Έ 영ν–₯으둜 μ›Ή μ‚¬μ΄νŠΈκ°€ κ°‘μžκΈ° νλ¦Ών•˜κ²Œ λ³΄μ΄λŠ” ν˜„μƒμ΄ μžˆμ—ˆλ‹€. 이전 λ²„μ „μ˜ Chrome ν¬ν•¨ν•œ λ‹€λ₯Έ λͺ¨λ“  λΈŒλΌμš°μ €λŠ” λ™μΌν•œ μ• λ‹ˆλ©”μ΄μ…˜μ„ μ•„λ¦„λ‹΅κ²Œ λ Œλ”λ§ν•œλ‹€. λ…Όλž€μ˜ 핡심은 will-change 속성이닀.


μš”μ•½

  • javascriptλ₯Ό 톡해 transform μ• λ‹ˆλ©”μ΄μ…˜μ„ μ‚¬μš©ν• λ•Œ will-change λ₯Ό μ“°λ©΄ νλ €μ§€λŠ” λŒ€μ‹  빨라진닀.

will-change λž€?

.div{
    will-change: transform;
}

will-change 속성이 μ—†λŠ” λͺ¨λ“  μ½˜ν…μΈ λŠ” scale이 λ³€κ²½λ˜λ©΄ λ‹€μ‹œ λ ˆμŠ€ν„°ν™”(re-rastered)ν•œλ‹€. 즉, will-changeλž€ λ³€ν˜•μ€ 효과적으둜 λž˜μŠ€ν„°ν™” μ‹œκ°„μ„ μΆ”κ°€ν•˜μ§€ μ•Šκ³  β€œμ‹ μ†ν•˜κ²Œ λ³€ν˜•μ„ μ μš©ν•˜μ‹­μ‹œμ˜€β€ λΌλŠ” μ˜λ―Έλ‹€. μ΄λŠ” javascript μ‘°μž‘μ„ 톡해 λ°œμƒν•˜λŠ” scale μ‘°μ •μ—λ§Œ 적용되며 CSS μ• λ‹ˆλ©”μ΄μ…˜μ—λŠ” μ μš©λ˜μ§€ μ•ŠλŠ”λ‹€.


FE κ°œλ°œμžκ°€ μ•Œμ•„μ•Ό ν•˜λŠ” λΆ€λΆ„

will-change: transform 속성은 μ½˜ν…μΈ λ₯Ό μ΄ν›„μ˜ transform 변화에 μ˜ν•΄ λ³€κ²½λ˜μ§€ μ•ŠλŠ” κ³ μ •λœ λΉ„νŠΈλ§΅μœΌλ‘œ κ°•μ œν•˜λŠ”κ²ƒμœΌλ‘œ κ°„μ£Όν•œλ‹€. 이둜 인해 κ°œλ°œμžλŠ” ν•΄λ‹Ή λΉ„νŠΈλ§΅μ— μ μš©λ˜λŠ” 이동(translate)ν•˜κ±°λ‚˜ νšŒμ „(rotate)μ‹œν‚€κ±°λ‚˜ ν¬κΈ°λ³€ν˜•(scale)와 같은 transform μ• λ‹ˆλ©”μ΄μ…˜μ˜ 속도λ₯Ό 높일 수 μžˆλ‹€.


μœ„μ²˜λŸΌ will-change 속성을 μ‚¬μš©ν•˜λ©΄μ„œ javascript둜 μ• λ‹ˆλ©”μ΄μ…˜μ„ μž‘μš©ν•˜λŠ” 경우, μ• λ‹ˆλ§€μ΄μ…˜μ˜ 속도가 λΉ¨λΌμ§€λŠ” λŒ€μ‹  κ³ μ •λœ λΉ„νŠΈλ§΅μœΌλ‘œ κ°•μ œν•˜μ—¬ μš”μ†Œκ°€ 흐렀질 수 μžˆλ‹€.


will-change: transform의 μ‚¬μš©μ²˜

예λ₯Όλ“€μ–΄ 맀우 λΉ λ₯Έ(60fps) μ• λ‹ˆλ©”μ΄μ…˜ 속도λ₯Ό μœ μ§€ν•˜λŠ” 것이 μ€‘μš”ν•˜λ©°, 각 ν”„λ ˆμž„μ—μ„œ 높은 ν’ˆμ§ˆμ˜ λ ˆμŠ€ν„°ν™”κ°€ ν•„μš”ν•˜μ§€ μ•Šμ„κ²ƒμœΌλ‘œ μ˜ˆμƒλ˜λŠ” μš”μ†Œμ— μ‚¬μš©ν•˜λŠ” 것이 μ ν•©ν•˜λ‹€. 그렇지 μ•ŠμœΌλ©΄ will-change: transform μ‚¬μš©μ„ ν”Όν•˜λŠ”κ²Œ μ’‹λ‹€.

μ„±λŠ₯ μˆ˜μ€€μ„ μ ˆμΆ©ν•˜μ—¬ μ΅œμ ν™”ν•˜λ €λ©΄ μ• λ‹ˆλ©”μ΄μ…˜μ΄ μ‹œμž‘λ  λ•Œ will-change: transform 을 μΆ”κ°€ν•˜κ³  λλ‚˜λ©΄ μ œκ±°ν•˜μž. ν•˜μ§€λ§Œ will-change: transform 을 μΆ”κ°€ν•˜κ±°λ‚˜ μ œκ±°ν• λ•Œμ— μΌνšŒμ„± μ„±λŠ₯ λΉ„μš©(one-time preformance cost)이 μ†Œμš”λœλ‹€λŠ” 점은 염두해야 ν•œλ‹€.

좔가적인 κ³ λ € 사항

will-change: transform 을 μ œκ±°ν•˜λ©΄ λ ˆμŠ€ν„°ν™”(re-rastered) λ˜μ–΄ μ½˜ν…μΈ κ°€ μ„ λͺ…ν•˜κ²Œ 크기가 λ³€ν˜•λ˜μ§€λ§Œ, κ·Έ λ‹€μŒ ν”„λ ˆμž„μ—μ„œ μ μš©λœλ‹€.(requestAnimationFrame 에 μ˜ν•˜μ—¬) κ·ΈλŸ¬λ―€λ‘œ will-change: transform 속성이 μžˆλŠ” λ ˆμ΄μ–΄κ°€ λ‹€μ‹œ λž˜μŠ€ν„°(re-rastered)λ₯Ό νŠΈλ¦¬κ±°ν•˜κ³  μ• λ‹ˆλ©”μ΄μ…˜μ„ 계속 μ§„ν–‰ν•˜λ €λ©΄, μš°μ„  will-change: transform 을 μ œκ±°ν•œ λ‹€μŒ requestAnimationFrame μ½œλ°±μ— λ‹€μ‹œ μΆ”κ°€ν•΄μ•Όν•œλ‹€.


λ§Œμ•½ μ• λ‹ˆλ©”μ΄μ…˜ 쀑 μ–Έμ œλ“ μ§€ ν˜„μž¬ ν¬κΈ°μ—μ„œ λ ˆμŠ€ν„°ν™”(re-rastered)ν•˜κ³  μ‹Άλ‹€λ©΄, μœ„ κΈ°μˆ μ„ μ μš©ν•΄ λ‹€μŒ ν”„λ ˆμž„μ—μ„œ will-change λ₯Ό μ œκ±°ν–ˆλ‹€κ°€ λ‹€μ‹œ μΆ”κ°€ν•˜λŠ”κ²ƒμ΄ μ’‹λ‹€. λ‹€λ§Œ 이 방법은 composited layerλ₯Ό μžƒμ–΄λ²„λ¦¬λŠ” λΆ€μž‘μš©μ„ 초래 ν•  수 μžˆλ‹€.(μΌνšŒμ„± μ„±λŠ₯ λΉ„μš©) λ§Œμ•½ 이것이 λ¬Έμ œκ°€ λœλ‹€λ©΄, tansform: translateZ(0) κ³Ό 같이 λ ˆμ΄μ–΄λ₯Ό λΆ„λ¦¬ν•˜μ—¬ μœ μ§€ν•˜λŠ”κ²ƒμ΄ μ’‹λ‹€. ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžλŠ” will-change: transform 을 μΆ”κ°€ν•˜κ±°λ‚˜ 및 μ œκ±°ν•˜μ—¬ μš”μ†Œ 및 μ• λ‹ˆλ©”μ΄μ…˜ ν”„λ ˆμž„ λ‹¨μœ„λ‘œ ν’ˆμ§ˆκ³Ό 속도 μ‚¬μ΄μ—μ„œ νŠΈλ ˆμ΄λ“œ μ˜€ν”„ ν•΄μ•Όν•œλ‹€.


μ°Έκ³