目录

一、减少 DOM 操作

1.避免频繁的 DOM 操作

2.使用事件委托

二、优化 CSS 选择器

三、减少重绘和重排

---

        前端性能优化可以从多个方面下手，例如加载性能优化、渲染性能优化、代码优化、缓存优化、性能监测和优化等方面下手，下面针对渲染性能优化分享一下优化思路。

一、减少 DOM 操作

1.避免频繁的 DOM 操作

          因为 DOM 操作是比较耗时的。可以将多次 DOM 操作合并为一次操作，或者使用文档片段（DocumentFragment）来进行批量的 DOM 操作。

        例如，以下是一个使用文档片段进行批量 DOM 操作的示例：

   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 1000; i++) {
     const div = document.createElement('div');
     div.textContent = 'This is a div';
     fragment.appendChild(div);
   }
   document.body.appendChild(fragment);

        在上述代码中，创建了一个文档片段 fragment，然后在循环中创建了 1000 个 div 元素，并将它们添加到文档片段中。最后，将文档片段添加到 document.body 中，这样只进行了一次 DOM 操作，提高了性能。

2.使用事件委托

        将事件处理程序绑定到父元素上，而不是每个子元素上，这样可以减少事件处理程序的数量，提高性能。

        例如，假设有一个列表，每个列表项都有一个点击事件，如果直接将事件处理程序绑定到每个列表项上，当列表项数量较多时，会有很多个事件处理程序，影响性能。可以将事件处理程序绑定到列表的父元素上，然后通过事件冒泡机制来判断点击的是哪个列表项。

     const list = document.getElementById('list');
     list.addEventListener('click', function(event) {
       if (event.target.tagName === 'LI') {
         console.log('Clicked on list item:', event.target.textContent);
       }
     });

        在上述代码中，将点击事件处理程序绑定到列表的父元素 list 上，当用户点击列表项时，事件会冒泡到父元素上，然后通过判断事件目标的标签名来确定点击的是哪个列表项。

二、优化 CSS 选择器

        避免使用复杂的 CSS 选择器，因为浏览器解析复杂的选择器会比较耗时。可以使用简单的类名和 ID 选择器来代替复杂的选择器。

        例如，以下是一个复杂的 CSS 选择器：

   div ul li a.active {
     color: red;
   }

        这个选择器会选择所有在 div 元素中的 ul 元素中的 li 元素中的具有 active 类的 a 元素，浏览器需要遍历整个 DOM 树来找到这些元素，比较耗时。可以将其改为简单的类名选择器：

  .active-link {
     color: red;
   }

        然后在 HTML 中为需要设置样式的 a 元素添加 active-link 类：

   <a href="#" class="active-link">Link</a>

        避免在 CSS 中使用 !important，因为这会使浏览器的样式计算变得复杂，影响性能。

        !important 是 CSS 中的一个特殊关键字，用于强制覆盖其他样式规则。但是，使用 !important 会使浏览器的样式计算变得复杂，影响性能。应该尽量避免使用 !important，而是通过合理的 CSS 选择器优先级来控制样式的应用。

三、减少重绘和重排

        重绘和重排是浏览器为了重新计算页面的布局和样式而进行的操作，是比较耗时的。可以通过以下方法来减少重绘和重排：

                避免频繁地修改元素的样式，因为这会触发重排。可以将多个样式修改合并为一次操作。

                例如，以下是一个会触发多次重排的代码示例：

     const element = document.getElementById('element');
     element.style.width = '100px';
     element.style.height = '100px';
     element.style.backgroundColor = 'red';

                在上述代码中，每次修改元素的样式都会触发重排。可以将多个样式修改合并为一次操作，如下所示：

     const element = document.getElementById('element');
     element.style.cssText = 'width: 100px; height: 100px; background-color: red';

        使用 display:none 来隐藏元素，而不是使用 visibility:hidden，因为 display:none 不会占用空间，不会触发重排。

        例如，以下是使用 display:none 和 visibility:hidden 隐藏元素的对比：

     <div id="element1" style="width: 100px; height: 100px; background-color: red;">Element 1</div>
     <div id="element2" style="width: 100px; height: 100px; background-color: blue;">Element 2</div>

     const element1 = document.getElementById('element1');
     const element2 = document.getElementById('element2');

     // 使用 display:none 隐藏元素
     element1.style.display = 'none';
     console.log('Element 1 hidden using display:none');

     // 使用 visibility:hidden 隐藏元素
     element2.style.visibility = 'hidden';
     console.log('Element 2 hidden using visibility:hidden');

        在上述代码中，使用 display:none 隐藏元素 element1，使用 visibility:hidden 隐藏元素 element2。当使用 display:none 隐藏元素时，元素会从页面布局中完全移除，不会占用空间，不会触发重排。当使用 visibility:hidden 隐藏元素时，元素仍然会占用空间，只是不可见，会触发重绘，但不会触发重排。

        使用绝对定位或固定定位的元素，因为它们不会影响其他元素的布局，不会触发重排。

        例如，以下是使用绝对定位和固定定位的元素的示例：

     <div id="parent">
       <div id="absolute-element" style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: red;">Absolute Element</div>
       <div id="fixed-element" style="position: fixed; top: 50px; right: 50px; width: 100px; height: 1