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>