页面重绘及回流的优化方法

什么是页面重绘和回流？

在了解如何优化页面重绘和回流之前，我们需要先理解这两个概念。页面重绘是为了更新网页中的可视部分而对整个页面进行重新渲染，造成了我们不必要的渲染；而页面回流则是为了计算出网页元素的位置和尺寸而进行整个页面的重新布局，这需要计算出所有元素的尺寸和位置，所以会比绘制更加昂贵。当网页的DOM元素发生更改时，会触发页面回流与重绘，这些操作通常会导致更多的CPU占用，并使用户体验更加缓慢.

如何优化页面重绘？

为了优化页面重绘，我们可以采取以下措施：

1、使用CSS3动画代替JavaScript动画，因为CSS3动画可以更有效地使用GPU加速，比JavaScript动画更高效。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.3);
}

2、使用CSS3中的transform代替改变元素的位置属性，比如left和top。改变这些位置属性，会导致整个页面重绘，而transform仅需要重绘该元素。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box:hover {
  transform: translateX(50px);
}

如何优化页面回流？

为了优化页面回流，我们可以采取以下措施：

1、使用缓存页面布局，减少页面重排的操作。如果页面中的某个元素的布局在短时间内多次改变，我们可以采取缓存该元素的布局，以减少页面重排的操作。

const el = document.querySelector('.el');
const elWidth = el.clientWidth;

// 缓存elWidth，减少页面回流
function foo() {
  el.style.width = elWidth + 'px';
}

2、使用virtual DOM技术可以避免过多的DOM操作。

import { h, render } from 'vue';

const app = {
  data() {
    return {
      list: [1, 2, 3, 4, 5],
    };
  },
  render() {
    return h(
      'ul',
      this.list.map((item) => {
        return h('li', {}, item);
      })
    );
  },
};

render(h(app), document.getElementById('app'));

其他优化方法

1、尽量使用CSS flexbox来布局，以减少复杂的布局计算造成的重绘。

.container {
  display: flex;
  justify-content: space-between;
}

2、避免使用复杂的CSS选择器和通配符，这可能会强制浏览器进行全局扫描。

// 避免使用通配符
* {
  margin: 0;
  padding: 0;
}

h2 {
  color: blue;
}

// 改为
body {
  margin: 0;
  padding: 0;
}

.container h2 {
  color: blue;
}

3、避免频繁的DOM操作，因为每次更改DOM都会导致页面回流和重绘。

const list = [1, 2, 3, 4, 5];
const ul = document.querySelector('.list');

// 避免频繁的DOM操作
function render() {}
  let html = '';
  list.forEach((item) => {
    html += '
' + item + '
';
  });
  ul.innerHTML = html;
}