硬件加速

CPU：在电脑主板，几乎处理电脑的一切操作，有电脑大脑之称

GPU：在显卡上，负责处理和渲染图形

硬件加速意味着Graphics Processing Unit（GPU）会通过代替Central Processing Unit (CPU)做一些负荷比较大的事情，来协助浏览器快速渲染页面，当CSS操作使用硬件加速的时候，通常会使页面渲染速度加快

方法：

1.骗取浏览器触发硬件加速

code:　　transform: translate3d(0, 0, 0);

缺点：占用RAM和GPU存储空间（考虑到移动设备的存储容量有限）

2.will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。

code:　　will-change: transform, opacity,scroll-position,  contents,top, left, bottom, right,none, all, auto, 

不要设置全局

无效：

.element:hover {
    will-change: transform;
    transition: transform 2s;
    transform: rotate(30deg) scale(1.5);
}

有效：

.element {
    /* style rules */
    transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotateY(180deg);
}
一定要hover的话：

.element {
    transition: opacity .3s linear;
}
/* declare changes on the element when the mouse enters / hovers its ancestor */
.ancestor:hover .element {
    will-change: opacity;
}
/* apply change when element is hovered */
.element:hover {
    opacity: .5;
}

变化完成后移除will-change（JS）：会反复触发的操作放在style中不移除也可以

el.addEventListener('mouseenter', hintBrowser);


el.addEventListener('animationEnd', removeHint);

function hintBrowser() {


　　this.style.willChange ='transform, opacity';

}

function removeHint(){


　　this.style.willChange = 'auto';

}

兼容性暂时很差chrome36+，Opera Developer23+及Firefox Nightly