OTT 前端技术

css will-change属性介绍

1. 背景

一般我们都通过translateZ()或者translate3d() hack来骗取浏览器触发硬件加速，然而强制使用hack方式创建layer并不是长久之计，创建layer的技术可以使页面加速，但是也有代价：它们占用RAM和GPU存储空间

2. 牛逼will-change属性

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置

  <!-- 使用语法 -->
  .element:hover {
    will-change: transform;
    transition: transform 2s;
    transform: rotate(30deg) scale(1.5);
  }

  /**will-change属性的值
    *will-change: [none, all, auto, scroll-position, and contents, transform, opacity, top, left, bottom, right]
    *contents 表示开发者期望去在接下来去改变或者有动画应用元素的内容
    *auto 表示没有明确的意图
  */

3. 合理使用(遵循最小化影响原则)

will-change也有副作用, 既要马儿跑，又要马儿不吃草,那是不可能的

• 不要声明太多属性或为太多元素声明

   *:before, *:after { will-change: all; } 加上这一句包管辞退
  

• 给浏览器足够的时间工作

    <!-- will-change顾名思义，通知浏览器即将发生的变化，而不是正在发生的变化 在变化前立即为元素添加will-change几乎没有作用-->
    
    <!-- 正确使用姿势 父元素hover时候添加 -->
    .parent:hover .element {
      will-change: opacity;
    }
    .element:hover {
      opacity: .5;
    }
  

• 变化完成后移除will-change

    dom.onmousedown = function() {
      target.style.willChange = 'transform';
    };
    dom.onclick = function() {
      //执行动画
    };
    target.onanimationend = function() {
      // 动画结束回调，移除will-change
      this.style.willChange = 'auto';
    };
  
    //ps: 如果你是父元素hover的时候，声明will-change，移出的时候就会自动remove