CSS前端页面渲染优化属性will-change的具体使用

请听我具体讲解CSS前端页面渲染优化属性will-change的具体使用。

1. will-change简介

在Web页面中，一些元素在某些情况下会产生复杂的渲染和绘制，这会导致页面性能下降，会出现页面不流畅，掉帧等问题。 will-change属性就是为了解决这个问题而诞生的。will-change可以为指定的元素创建一个层级别（Layer）的相关环境，使其在运动、过渡等状态下保持强制GPU加速，从而提升移动端渲染性能。

2. will-change语法

will-change可以指定以下类型的值：

• auto：编译器自动处理，无需进行优化
• scroll-position：表示元素的滚动位置会改变
• contents：表示元素的内容会被改变
• transform：表示元素的变形会被改变
• opacity：表示元素的透明度会改变
• left/top/bottom/right：表示元素的定位（left/top/bottom/right）会改变

will-change语法如下：

.element {
   will-change: transform;
}

3. will-change使用示例

3.1 优化元素运动

当我们要让一个元素进行运动时，会产生大量的计算和渲染操作，从而影响页面的流畅性。这时可以使用will-change属性来优化元素的运动性能。

下面是一个示例，点击按钮时，元素从左上角开始运动到右下角：

<div class="element"></div>
<button>Start</button>

.element {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

button {
  margin-top: 50px;
}

.move {
  left: 500px;
  top: 500px;
  transition: all 3s;
  will-change: transform;
}

const btn = document.querySelector('button')
const element = document.querySelector('.element')

btn.addEventListener('click', e => {
  element.classList.add('move')
})

3.2 优化元素的滚动性能

当我们在滚动页面的时候，会遇到一些需要实时更新的元素的滚动效果，这会造成大量的计算和渲染操作，也会影响页面的流畅性。这时可以使用will-change属性来优化元素的滚动性能。

下面是一个示例，当页面滚动至一定位置时，将标题栏的背景色变成红色：

<div class="header">header</div>
<div class="content"></div>

/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transition: background-color .3s ease-in-out;
}

.header.red {
  background-color: red;
}

/* content */
.content {
  height: 2000px;
}

const header = document.querySelector('.header')

window.addEventListener('scroll', e => {
  if (window.pageYOffset > 100) {
    header.classList.add('red')
    header.style.willChange = 'transform' /* 在 header 加上 willChange 属性 */
  } else {
    header.classList.remove('red')
    header.style.willChange = 'auto'
  }
})

通过以上两个示例的说明，相信大家已经了解了will-change属性的具体使用方法和优化效果了，希望对大家有所帮助。