性能优化之减少页面重排

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yucihent/article/details/82750130

做web开发，性能优化无疑是很重要的一点，此篇文章主要是从减少页面重排来优化性能

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

    const oUl = document.querySelector('ul');
    let fragment = document.createDocumentFragment();
    const areaNameArr = [
      '北京',
      '天津',
      '河北',
      '山西',
      '内蒙古',
      '辽宁',
      '吉林',
      '黑龙江',
      '上海',
      '江苏',
      '浙江',
      '安徽',
      '福建',
      '江西',
      '山东',
      '河南',
      '湖北',
      '湖南',
      '广东',
      '广西',
      '海南',
      '重庆',
      '四川',
      '贵州',
      '云南',
      '西藏',
      '陕西',
      '甘肃',
      '青海',
      '宁夏',
      '新疆',
      '香港',
      '澳门',
      '台湾'
    ];
    areaNameArr.forEach(item => {
      const oLi = document.createElement('li');
      oLi.textContent = `${item}`;
      fragment.appendChild(oLi);
    })
    oUl.appendChild(fragment);

或

    let liHtml = '';
    areaNameArr.forEach(item => {
      liHtml += `<li>${item}</li>`
    })
    oUl.innerHTML = liHtml;

循环生成多个li标签，并添加到页面中，我们先创建文档片段，在循环过程中，将创建的li标签添加到fragment文档片段中，在循环完成后再将文档片段添加到ul标签中

页面只会进行一次添加，也就是只进行一次页面的重排

如果这样：

    areaNameArr.forEach(item => {
      const oLi = document.createElement('li');
      oLi.textContent = `${item}`;
      oUl.appendChild(oLi);
    })

这种写法是每循环一次向页面中添加一次li标签，这样页面就会多次重排，降低性能

循环本身是个比较耗性能的操作，避免循环造成页面的多次重排