CSS页面渲染优化属性will-change

will-change

  功能: 提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

  值: auto | <animateable-feature>

  初始值: auto

  应用于: 所有元素

  继承性: 无

  兼容性: IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+

  auto表示没有特别指定哪些属性会变化，浏览器需要自己去猜，然后使用浏览器经常使用的一些常规方法优化

  <animateable-feature>可以是以下值：

  scroll-position表示开发者希望在不久后改变滚动条的位置或者使之产生动画

  contents表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画

  <custom-ident>表示开发者希望在不久后改变指定的属性名或者使之产生动画。如果属性名是简写，则代表所有与之对应的简写或者全写的属性

 

使用

【使用hover】

  不要像下面这样直接写在默认状态中，因为will-change会一直挂着：

.will-change {

  will-change: transform;

  transition: transform 0.3s;

}

.will-change:hover {

  transform: scale(1.5);

}

  可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围

.will-change-parent:hover .will-change {

  will-change: transform;

}

.will-change {

  transition: transform 0.3s;

}

.will-change:hover {

  transform: scale(1.5);

}

【使用javascript脚本】

.sidebar {

  will-change: transform;

}    

  以上示例在样式表中直接添加了will-change属性，会导致浏览器将对应的优化工作一直保存在内存中，这其实是不必要的。下面展示如何使用脚本正确地应用will-change属性

var el = document.getElementById('element');

// 当鼠标移动到该元素上时给该元素设置 will-change 属性

el.addEventListener('mouseenter', hintBrowser);

// 当 CSS 动画结束后清除 will-change 属性

el.addEventListener('animationEnd', removeHint);

function hintBrowser() {

  // 填写在CSS动画中发生改变的CSS属性名

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

}

function removeHint() {

  this.style.willChange = 'auto';

}

【直接使用】

  但是，如果某个应用在按下键盘的时候会翻页，比如相册或者幻灯片一类，它的页面很大很复杂，此时在样式表中写上will-change是合适的。这会使浏览器提前准备好过渡动画，当键盘按下的时候就能即看到灵活轻快的动画

.slide {

  will-change: transform;

}

<ul class="silder_list" >

<li>

<a href="http://jinan.changtu.com/" target="_blank">济南长途汽车总站电话</a>

</li>

</ul>