网页性能优化03-函数防抖

2024-09-02 15:48
文章标签 网页 函数 优化 性能 03 防抖

本文主要是介绍网页性能优化03-函数防抖，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.1-函数防抖

1.函数防抖介绍

  • 1.什么是函数防抖？ （debounce）

    • 网上主流解释：函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
      • 参考博客：https://www.jianshu.com/p/f9f6b637fd6c
      • 参考博客：https://segmentfault.com/a/1190000018445196
    • 笔者解释：
      • 先理解什么是抖动？：例如用户鼠标轻微晃动，快速划过某一个元素（用户本身不想触发，只是鼠标误触发，常见于鼠标事件 移入/移出/移动 ）。 例如输入框手机和邮箱验证，用户在不停的输入，还没有输完的时候其实是不需要验证的，应该等用户输入完毕后再验证。
      • 防抖 ：如果用户鼠标轻微晃动，在某一个元素上停留时间很短，则认为是用户误触发，则不执行本次事件处理函数
        • 一句话总结：用户连续多次触发某个事件，则只执行最后一次
      • 由于函数防抖 属于 前端中的 网页性能优化技术，因此初学者刚开始学习会有一些吃力，并且很多网站都没有做防抖处理（性能优化）
        • 没有函数防抖的真实案例：http://www.elong.com/?semid=ppzqbaidu
          • 这是一个旅游类网站，上面酒店类型选择没有做防抖处理，用户体验很差
        • 有函数防抖的真实案例：https://xyq.163.com/
          • 这是网易梦幻西游官网，在网页底部选择职业的手风琴位置有做防抖处理，用户体验较好

  • 没有做函数防抖处理的用户体验如下

    • 假设当前鼠标在第一张，此时用户想看第五张。正常情况下，鼠标会依次触发 第二、第三、第四张的移入事件，但这不是用户真正想要触发的（误触发）

在这里插入图片描述

  • 有做函数防抖处理的用户体验如下
    • 用户从第一张 滑动到第五张，由于鼠标在 第二、第三、第四张停留时间很短（假设小于0.5秒），所以判定为用户误触发，则不触发对应的事件处理函数

在这里插入图片描述

2.函数防抖解决思路

  • 使用定时器：保证用户多次触发事件时，以最后一次触发为准

  • 1.每一次移入元素时 ： 不立即触发该事件处理函数，而是开启定时器，间隔0.5s(防抖间隔)之后再执行事件处理函数。

    • 此时并没有彻底解决函数防抖，因为用户多次触发事件时，每一个定时器都会在0.5s之后，依次执行

  • 2.每一次移入元素时 ： 先清除上一次的定时器

    • 保证用户多次触发事件时，以最后一次触发为准

  • 注意点：定时器中的this默认为window，需要使用上下文模式bind()动态修改为当前事件源

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>动画-案例《手风琴》</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 2400px;}#box {width: 1200px;height: 400px;border: 2px solid red;margin: 100px auto;overflow: hidden;}#box li {width: 240px;height: 400px;float: left;}</style>
</head><body><div id="box"><ul><li><img src="./images/collapse/1.jpg" alt=""></li><li><img src="./images/collapse/2.jpg" alt=""></li><li><img src="./images/collapse/3.jpg" alt=""></li><li><img src="./images/collapse/4.jpg" alt=""></li><li><img src="./images/collapse/5.jpg" alt=""></li></ul></div><script src="./animation.js"></script><script>/*需求(1):给每一个li设置鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100(2):鼠标移出大盒子,所有的li的宽度都变成默认的240 *///1.获取元素var liList = document.querySelectorAll('#box li');//li元素列表var box = document.querySelector('#box');//li元素列表/* 一:声明全局变量存储定时器ID */var timeID = null;//2.注册事件//2.1 鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100for (var i = 0; i < liList.length; i++) {liList[i].onmouseover = function () {//二：先清除以前的定时器，以本次为准clearTimeout(timeID);//事件处理函数 ： this 指向事件源/* 三：当事件被触发时，用户可能是误操作，所以开启定时器等一会儿再执行注意点： 定时器中的this默认一定是window，需要动态修改为事件源*/timeID = setTimeout(function () {console.log(1111);// 定时器中的this : 默认指向window//3.排他思想修改样式for (var j = 0; j < liList.length; j++) {if (liList[j] == this) {//是自己animationSlow(liList[j], { width: 800 });} else {animationSlow(liList[j], { width: 100 });}};}.bind(this), 500);};};//2.2 鼠标移出大盒子,所有的li的宽度都变成默认的240 box.onmouseout = function (e) {/* 由于受到事件冒泡影响，当鼠标滑出某一个li元素也会触发父元素的移出事件解决方案：判断事件触发源是不是box，是的话才修改li元素宽度为240*/if (e.target == box) {for (var i = 0; i < liList.length; i++) {animationSlow(liList[i], { width: 240 });};};};</script></body></html>

3.万能防抖函数的封装

  • 为什么要封装万能的防抖函数
    • 在上一个小节中，我们的重点是介绍函数防抖的思路。但是在实际开发中，每一个防抖函数的事件处理都是不一样的，他们可能是鼠标移入、鼠标移出、鼠标移动。 每一个案例需要的防抖间隔也不同
/**
* @description: 万能防抖函数
* @param {type} fn : 事件处理函数
* @param {type} timeout : 防抖时间间隔
* @return: 
*/
function debounce(fn, timeout) {/*核心技术介绍 1. 函数防抖需要使用定时器，但是定时器id不能是局部的  （局部变量函数执行完毕会被回收）2. 定时器id如果使用全局变量存储，则会造成全局变量污染3. 解决方案 ：(1)使用闭包延长局部变量声明周期，但是语法过于繁琐(2)利用函数本身也是对象，使用函数本身的静态成员来存储定时器id*///1.先清除上一次触发事件的定时器clearTimeout(debounce.timeID);//2.以最后一次触发为准debounce.timeID = setTimeout(fn, 500);
};

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>动画-案例《手风琴》</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 2400px;}#box {width: 1200px;height: 400px;border: 2px solid red;margin: 100px auto;overflow: hidden;}#box li {width: 240px;height: 400px;float: left;}</style>
</head><body><div id="box"><ul><li><img src="./images/collapse/1.jpg" alt=""></li><li><img src="./images/collapse/2.jpg" alt=""></li><li><img src="./images/collapse/3.jpg" alt=""></li><li><img src="./images/collapse/4.jpg" alt=""></li><li><img src="./images/collapse/5.jpg" alt=""></li></ul></div><script src="./animation.js"></script><script>/*需求(1):给每一个li设置鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100(2):鼠标移出大盒子,所有的li的宽度都变成默认的240 *///1.获取元素var liList = document.querySelectorAll('#box li');//li元素列表var box = document.querySelector('#box');//li元素列表//2.注册事件//2.1 鼠标移入事件:当前li的宽度变成800,其他兄弟li宽度变成100for (var i = 0; i < liList.length; i++) {liList[i].onmouseover = function () {debounce(function () {for (var j = 0; j < liList.length; j++) {if (liList[j] == this) {//是自己animationSlow(liList[j], { width: 800 });} else {animationSlow(liList[j], { width: 100 });}};}.bind(this), 500);};};/*** @description: 万能防抖函数* @param {type} fn : 事件处理函数* @param {type} timeout : 防抖时间间隔* @return: */function debounce(fn, timeout) {/*核心技术介绍 1. 函数防抖需要使用定时器，但是定时器id不能是局部的  （局部变量函数执行完毕会被回收）2. 定时器id如果使用全局变量存储，则会造成全局变量污染3. 解决方案 ：(1)使用闭包延长局部变量声明周期，但是语法过于繁琐(2)利用函数本身也是对象，使用函数本身的静态成员来存储定时器id*///1.先清除上一次触发事件的定时器clearTimeout(debounce.timeID);//2.以最后一次触发为准debounce.timeID = setTimeout(fn, 500);};//2.2 鼠标移出大盒子,所有的li的宽度都变成默认的240 box.onmouseout = function (e) {/* 由于受到事件冒泡影响，当鼠标滑出某一个li元素也会触发父元素的移出事件解决方案：判断事件触发源是不是box，是的话才修改li元素宽度为240*/if (e.target == box) {for (var i = 0; i < liList.length; i++) {animationSlow(liList[i], { width: 240 });};};};</script></body></html>

这篇关于网页性能优化03-函数防抖的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1130392。

相关文章

C++11的函数包装器std::function使用示例

C++11的函数包装器std::function使用示例

《C++11的函数包装器std::function使用示例》C++11引入的std::function是最常用的函数包装器,它可以存储任何可调用对象并提供统一的调用接口,以下是关于函数包装器的详细讲解... 目录一、std::function 的基本用法1. 基本语法二、如何使用 std::function
阅读更多...
网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
HDFS—存储优化（纠删码）

HDFS—存储优化（纠删码）

纠删码原理 HDFS 默认情况下，一个文件有3个副本，这样提高了数据的可靠性，但也带来了2倍的冗余开销。 Hadoop3.x 引入了纠删码，采用计算的方式，可以节省约50％左右的存储空间。 此种方式节约了空间，但是会增加 cpu 的计算。 纠删码策略是给具体一个路径设置。所有往此路径下存储的文件，都会执行此策略。 默认只开启对 RS-6-3-1024k
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
hdu1171（母函数或多重背包）

hdu1171（母函数或多重背包）

题意：把物品分成两份，使得价值最接近 可以用背包，或者是母函数来解，母函数（1 + x^v+x^2v+.....+x^num*v）（1 + x^v+x^2v+.....+x^num*v）（1 + x^v+x^2v+.....+x^num*v） 其中指数为价值，每一项的数目为（该物品数+1）个 代码如下： #include<iostream>#include<algorithm>
阅读更多...
MySQL高性能优化规范

MySQL高性能优化规范

前言：      笔者最近上班途中突然想丰富下自己的数据库优化技能。于是在查阅了多篇文章后，总结出了这篇！ 数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字（如果表名中包含关键字查询时，需要将其用单引号括起来） 数据库对象的命名要能做到见名识意，并且最后不要超过32个字符 临时库表必须以tmp_为前缀并以日期为后缀，备份
阅读更多...
黑神话，XSKY 星飞全闪单卷性能突破310万

黑神话，XSKY 星飞全闪单卷性能突破310万

当下，云计算仍然是企业主要的基础架构，随着关键业务的逐步虚拟化和云化，对于块存储的性能要求也日益提高。企业对于低延迟、高稳定性的存储解决方案的需求日益迫切。为了满足这些日益增长的 IO 密集型应用场景，众多云服务提供商正在不断推陈出新，推出具有更低时延和更高 IOPS 性能的云硬盘产品。 8 月 22 日 2024 DTCC 大会上（第十五届中国数据库技术大会），XSKY星辰天合正式公布了基于星
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2