避免过多重排重绘

1. 使用 DocumentFragment 进行 DOM 操作
2. CSS 样式尽量批量修改
3. 避免使用 table 布局
4. 为元素提前设置好高宽，不因多次渲染改变位置

DocumentFragment的使用

<ul id="list"></ul>

  const list = document.querySelector('#list');
  const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];

  const fragment = document.createDocumentFragment();

  fruits.forEach(fruit => {
    const li = document.createElement('li');
    li.innerHTML = fruit;
    fragment.appendChild(li);
  });

  list.appendChild(fragment);