JS进阶-性能优化

最新推荐文章于 2024-08-19 15:59:25 发布

雪碧bibi是我的好大二

最新推荐文章于 2024-08-19 15:59:25 发布

阅读量485

点赞数 16

分类专栏： JS进阶文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_64105917/article/details/140564199

版权

JS进阶专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习目标：

掌握性能优化

学习内容：

防抖
节流
清除定时器的问题
综合案例

防抖：

防抖：单位事件内，频繁触发事件，只执行最后一次。

举个栗子：王者荣耀回城，只要被打断就需要重新来。

使用场景：

搜索框搜索输入。只需用户最后一次输入完，再发送请求。
手机号、邮箱验证输入检测。

 <title>利用防抖来处理-鼠标经过盒子显示文字</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="./lodash.min.js"></script>
  <script>
    //利用防抖实现性能优化
    //需求：鼠标在盒子上抖动，里面的数字就会变化 +1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++
      //如果里面存有大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
    }
    //添加事件
    // box.addEventListener('mousemove', mouseMove)

    //利用Lodash库实现防抖     500毫秒之后采取+1
    //语法：_.debounce(fun,时间)
    // box.addEventListener('mousemove', _.debounce(mouseMove, 500))



    //手写防抖函数
    //核心是利用setTimeout 定时器来实现
    //1.声明定时器变量
    //2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器
    //3.如果没有定时器，则开启定时器，存入到定时器变量里面
    //4.定时器里面写函数调用
    function debounce(fn, t) {
      let timer
      //return 返回一个匿名函数
      return function () {
        //2.3.4
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
          fn()  //加个小括号 调用fn函数
        }, t)
      }

    }
    box.addEventListener('mousemove', debounce(mouseMove, 500))


    // debounce(mouseMove, 500)   //调用函数
    // debounce(mouseMove, 500) =  return function () {2.3.4}


  </script>

</body>

节流：

节流：单位时间内，频繁触发事件，只执行一次。
简单理解：在500ms内，不管触发多少次事件，只执行一次。

举个栗子：王者荣耀技能冷却，期间无法继续释放技能。

使用场景：
高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等。

在这里插入图片描述

<title>利用节流来处理-鼠标经过盒子显示文字</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="./lodash.min.js"></script>
  <script>
    //利用节流实现性能优化
    //需求：鼠标在盒子上抖动，里面的数字就会变化 +1
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++
      //如果里面存有大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
    }
    //添加事件
    // box.addEventListener('mousemove', mouseMove)

    //利用Lodash库实现节流     500毫秒之后采取+1
    //语法：_.throttle(fun,时间)
    // box.addEventListener('mousemove', _.throttle(mouseMove, 500))


    //手写一个节流函数  每隔 500ms  + 1
    //1.声明一个定时器变量
    //2.当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器
    //3.如果没有定时器则开启定时器，记得存到变量里面
    //3.1定时器里面调用执行的函数
    //3.2定时器里面要把定时器清空
    function throttle(fn, t) {
      let timer = null
      return function () {
        if (!timer) {
          timer = setTimeout(function () {
            fn()
            //清空定时器
            timer = null
          }, t)
        }
      }

    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))

  </script>

</body>

清除定时器的问题：

 <title>清除定时器的问题</title>
</head>

<body>
  <script>
    let timer = null
    timer = setTimeout(() => {
      clearTimeout(timer)
      console.log(timer) //结果是几呢？  1
    }, 1000)

    // 在setTimeout 中是无法删除定时器，因为定时器还在运作，
    //所以使用  timer = null ;
    //而不是 clearTimeout(timer)
  </script>

</body>

综合案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合案例-节流综合案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
    }

    .video video {
      width: 100%;
      padding: 20px 0;
    }

    .elevator {
      position: fixed;
      top: 280px;
      right: 20px;
      z-index: 999;
      background: #fff;
      border: 1px solid #e4e4e4;
      width: 60px;
    }

    .elevator a {
      display: block;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #999;
    }

    .elevator a.active {
      color: #1286ff;
    }

    .outline {
      padding-bottom: 300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <a href="http://pip.itcast.cn">
        <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
      </a>
    </div>
    <div class="video">
      <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="elevator">
      <a href="javascript:;" data-ref="video">视频介绍</a>
      <a href="javascript:;" data-ref="intro">课程简介</a>
      <a href="javascript:;" data-ref="outline">评论列表</a>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    //1.获取元素  要对视频进行操作
    const video = document.querySelector('video')
    video.ontimeupdate = _.throttle(() => {
      // console.log(video.currentTime) //获得当前的视频时间
      //把当前的时间存储到本地存储
      localStorage.setItem('currentTime', video.currentTime)
    }, 1000)

    //打开页面触发事件，就从本地存储里面取出记录的事件，赋值给 video.currentTime
    video.onloadeddata = () => {
      // console.log(11)
      video.currentTime = localStorage.getItem('currentTime') || 0
    }


  </script>

</body>

</html>