前端性能优化(二)

最新推荐文章于 2022-10-20 15:46:22 发布

卖菜的小白

最新推荐文章于 2022-10-20 15:46:22 发布

阅读量669

点赞数

分类专栏： js面试题文章标签：前端性能

本文链接：https://blog.csdn.net/weixin_47450807/article/details/123953269

版权

一、减少重绘重排

因为重绘和重排都会导致页面的重新渲染，过多的操作一定会影响性能，所以我们需要尽可能的减少重绘和重排。关于重绘和重排之前写过一篇文章。重绘和重排详解

二、使用事件委托

事件委托就是将事件委托给其父元素来去监听，当子元素触发事件时，具体操作的元素对象在父元素。下面看一个事件委托的例子。

<body>

  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
  </ul>

  <script>
    let ul = document.querySelector('ul')
    ul.addEventListener('click', (e) => {
   
      let target = e.target
      console.log(target.innerHTML)
    } )
  </script>

</body>

我们通过监听ul这个标签的点击事件，如果其中的子标签触发事件时，会根据事件冒泡也会冒泡到父标签的事件。
如下所示，如果对每一个子对象都监听其上的事件。

<body>

  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
  </ul>

  <script>
    let lis = document

最低0.47元/天解锁文章

卖菜的小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端性能优化(二)

一、减少重绘重排因为重绘和重排都会导致页面的重新渲染，过多的操作一定会影响性能，所以我们需要尽可能的减少重绘和重排。关于重绘和重排之前写过一篇文章。重绘和重排详解二、使用事件委托事件委托就是将事件委托给其父元素来去监听，当子元素触发事件时，具体操作的元素对象在父元素。下面看一个事件委托的例子。<body> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li&g
复制链接

扫一扫