浏览器渲染优--防抖节流懒加载

合理选择css选择器

相比于.content-title-span,使用.content .title span时,浏览器计算样式所要花费的时间更多。使用后面一种规则,浏览器必须遍历页面上所有 span 元素,先过滤掉祖先元素不是.title的,再过滤掉.title的祖先不是.content的。嵌套的层级更多,匹配所要花费的时间代价自然更高。

减少DOM访问

JS 引擎和渲染引擎是两个独立的线程。当我们用 JS 去操作 DOM 时,本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”,交流依赖了桥接接口作为“桥梁
每操作一次 DOM(不管是为了修改还是仅仅为了访问其值),都要过一次桥

<body><div id="container"></div>
</body>for(var count=0;count<10000;count++){ document.getElementById('container').innerHTML+='<span>我是一个小测试</span>'
} 
// 只获取一次container,并缓存
let container = document.getElementById('container')
for(let count=0;count<10000;count++){ container.innerHTML += '<span>我是一个小测试</span>'
} 
// 只获取一次container
let container = document.getElementById('container')
let content = ''
for(let count=0;count<10000;count++){ // 累计对DOM的修改操作content += '<span>我是一个小测试</span>'
} 
// 将累计的修改操作一次性地应用到 DOM
container.innerHTML = content

DocumentFragment

最大的区别是它不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会对性能产生影响。所以性能耗费的比较少
https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment

<ul id="list"></ul>const list = document.querySelector("#list");
const fruits = ["Apple", "Orange", "Banana", "Melon"];const fragment = new DocumentFragment();fruits.forEach((fruit) => {const li = document.createElement("li");li.textContent = fruit;fragment.appendChild(li);
});list.appendChild(fragment);

事件委托

将子元素的事件绑定在父元素上 减少对dom的操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul class="parent"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>
document.querySelector('.parent').addEventListener('click', (event) => {var target = event.targetif (target.nodeName.toLocaleLowerCase() === 'li') {console.log(target.innerHTML + ' clicked');}
});</script>
</body>
</html>

节流防抖

事件节流 简单来说,就是从一个时间点开始,在某段时间,无论触发了多少次回调,我都只认第一次,并在计时结束时给予响应

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.scrollFont{background-color: bisque;width: 200px;height:500px;}
</style>
<body><div class="scrollFont"><div></div></div><script>function throttle(func, delay) {let lastExecTime = 0;return function () {const currentTime = Date.now();if (currentTime - lastExecTime > delay) {func.apply(this, arguments);lastExecTime = currentTime;}};}// 示例函数,用于演示滑动节流function handleScroll() {console.log("Handling scroll event...");}// 使用节流函数包装 handleScroll 函数,设置触发频率为 200 毫秒const throttledScroll = throttle(handleScroll, 200);// 监听滚动事件,并使用节流函数处理window.addEventListener('scroll', throttledScroll);</script>
</body></html>

防抖

如果一个函数持续地、频繁地触发,那么只在它结束后过一段时间才开始执行。换句话说,如果你持续触发事件,那么防抖函数将不会执行,只有当你停止触发事件后,它才会在指定的延迟时间后执行。这对于防止例如用户在输入框中连续输入时发送过多的Ajax请求等情况非常有用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button id="btn">点击</button><script>function debounce(func, delay) {//接受俩参数 一个是function 一个是延长时间let timeoutId;return function () {const context = this;const args = arguments;clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(context, args);}, delay);};}function myFunction() {console.log("Debounced function called!");}const debouncedFunction = debounce(myFunction, 200);// 调用防抖函数const btn=document.getElementById('btn')btn.onclick=function(){console.log('9999');debouncedFunction()}</script>
</body></html>

懒加载

定义:资源当用户滑动的时候才会显示 在这之前是不加载的

第一种

在这里插入图片描述
利用用户滚动的距离到视口的窗口大小 开始显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>img{height: 300px;width: 300px;margin-bottom: 50px;display: block;}.showHidden{height: 500px;width: 200px;background-color: antiquewhite;}
</style>
<body><div class="showHidden"></div><img  data-origin="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt=""><div class="showHidden"></div><img  data-origin="https://img1.baidu.com/it/u=435134468,1942448903&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt=""><div class="showHidden"></div><img  data-origin="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800"><img  data-origin="https://img2.baidu.com/it/u=855369075,175194576&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""><img  data-origin="https://img2.baidu.com/it/u=2004708195,3393283717&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt=""><img  data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt=""><img  data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt=""><img  data-origin="https://img0.baidu.com/it/u=2788901948,3907873318&fm=253&fmt=auto?w=500&h=281" alt=""><div class="showHidden"></div><img  data-origin="https://img2.baidu.com/it/u=811993169,635123395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt=""><img  data-origin="https://img0.baidu.com/it/u=924031950,2251460669&fm=253&fmt=auto&app=138&f=JPEG?w=1105&h=500" alt=""><script>const images=document.querySelectorAll('img')window.addEventListener('scroll',(e)=>{images.forEach((imgshow)=>{//判断每张图片的位置是否出现在可视区域aconst imagesTop=imgshow.getBoundingClientRect().topif(imagesTop<window.innerHeight){//自定义属性浏览器不会像其他属性一样处理const dataOrigin=imgshow.getAttribute('data-origin')imgshow.setAttribute('src',dataOrigin)}console.log('触发滚动');})})
</script></body></html>

第二种

利用IntersectionObserver给每个图片添加一个观察者 如果每个实例是isIntersecting为true说明滑动到此处 开始将自定义属性的内容转化为真正的src

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>img{height: 300px;width: 300px;margin-bottom: 50px;display: block;}.showHidden{height: 500px;width: 200px;background-color: antiquewhite;}
</style>
<body><div class="showHidden"></div><img  data-origin="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt=""><div class="showHidden"></div><img  data-origin="https://img1.baidu.com/it/u=435134468,1942448903&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt=""><div class="showHidden"></div><img  data-origin="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800"><img  data-origin="https://img2.baidu.com/it/u=855369075,175194576&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""><img  data-origin="https://img2.baidu.com/it/u=2004708195,3393283717&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt=""><img  data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt=""><img  data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt=""><img  data-origin="https://img0.baidu.com/it/u=2788901948,3907873318&fm=253&fmt=auto?w=500&h=281" alt=""><div class="showHidden"></div><img  data-origin="https://img2.baidu.com/it/u=811993169,635123395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt=""><img  data-origin="https://img0.baidu.com/it/u=924031950,2251460669&fm=253&fmt=auto&app=138&f=JPEG?w=1105&h=500" alt=""><script>//IntersectionObserver 交叉观察 目标元素和可视化窗口会产生交叉区域const images=document.querySelectorAll("img")const callBack=(arr)=>{console.log(arr);//接受一个参数 这个参数是个数组arr.forEach((details)=>{if(details.isIntersecting){const seenImage=details.targetconst dataSrc=seenImage.getAttribute('data-origin')seenImage.setAttribute('src',dataSrc)obserber.unobserve(seenImage);}// isIntersecting})}const obserber=new IntersectionObserver(callBack)images.forEach((imageShow)=>{obserber.observe(imageShow)})
</script></body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/847230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot接口防抖(防重复提交)

TOC 啥是防抖 所谓防抖&#xff0c;一是防用户手抖&#xff0c;二是防网络抖动。在Web系统中&#xff0c;表单提交是一个非常常见的功能&#xff0c;如果不加控制&#xff0c;容易因为用户的误操作或网络延迟导致同一请求被发送多次&#xff0c;进而生成重复的数据记录。要针对…

日语日期相关词汇

传统新式何月なんがつ何時なんじ何分なんぶん何秒なんびょういち一月いちがつ&#xff11;時いちじ&#xff11;分いっぷん&#xff11;秒いちびょうに二月にがつ&#xff12;時にじ&#xff12;分にふん&#xff12;秒にびょうさん三月さんがつ&#xff13;時さんじ&#xff1…

学习小心意——python的构造方法和析构方法

构造方法和析构方法分别用于初始化对象的属性和释放类占有的资源 构造方法_init_() 语法格式如下&#xff1a; class 类名:def __init__(self, 参数1, 参数2, ...):# 初始化代码self.属性1 参数1self.属性2 参数2# ... 示例代码如下 class Student:def __init__(self):s…

如何利用CXL技术突破内存墙?-2

为了解决这些问题&#xff0c;业界正积极寻求新的技术和标准&#xff0c;比如Compute Express Link (CXL)&#xff0c;它旨在通过提供标准化的高速互连来提高内存带宽、降低延迟&#xff0c;并简化内存扩展的软件集成&#xff0c;从而有效地打破内存墙的限制。 通过使用CXL&am…

【POSIX】使用regex进行正则匹配

正则表达式是很关键的一个工具&#xff0c;各种编程语言中均通用&#xff0c;务必掌握 给出Linux中man page给出的一个示例&#xff1a; #include <stdint.h> #include <stdio.h> #include <stdlib.h> #include <regex.h>#define ARRAY_SIZE(arr) (s…

Spring的@Async注解及其用途

Spring 的 Async 注解是 Spring Framework 4.2 版本引入的功能&#xff0c;它用于支持异步方法执行。当一个方法标注了 Async&#xff0c;Spring 会在一个单独的线程中调用该方法&#xff0c;从而不会阻塞主线程的执行。 Async 注解的用途&#xff1a; 提高性能&#xff1a;通…

uniapp3步使用goeasy完成本地消息推送

1.注册登录goeasy&#xff0c;下载测试demo 2.替换demo中main.js中的key 3.打包一个H5&#xff0c;一个自定义基座。 h5发消息&#xff0c;app收消息&#xff0c;然后创建消息通知就好了。记得打开app的消息通知 demo很简单&#xff0c;demo都跑通了&#xff0c;在搬到自己项目…

NAVICAT从MYSQL链接到ORCAL数据库

1、工具-选线 2、环境&#xff0c;将原有的mysql的oci.dll文件改为oracle的 3、新建连接 填写对应数据

axios拦截器

定义 在客户端通过axios发送请求或响应被 then 或 catch 处理前拦截它们。顾名思义&#xff0c;在axios发送请求之前在请求数据内添加条件或者验证&#xff0c;并通过函数返回错误。在收到服务器的响应数据进行返回&#xff0c;遇到无法响应的情况在catch之前拦截错误信息进行…

国产高边驱动HD70202Q替换英飞凌BTS7040-2

高边驱动也称之为高边开关&#xff0c;主要用于车内负载的驱动与开关&#xff0c;并对负载进行保护和诊断。高边驱动以高可靠性、灵活性、低功耗以及小型轻量等特点&#xff0c;正逐渐替代传统的保险丝、继电器等方案。 RAMSUN提供的HD70202Q车规级双通道智能高边驱动的输入控…

迈普 多业务融合网关 send_order.cgi 前台RCE漏洞复现

0x01 产品简介 迈普多业务融合网关是迈普通信技术股份有限公司自主研发的多业务无线融合网关&#xff0c;拥有融合网关功能、精准流控、上网行为管理、智能选路…等强大功能&#xff0c;并支持对接迈普云平台&#xff0c;实现远程运维和集中管理&#xff0c;很好的满足了医疗/…

python API自动化(Jsonpath断言、接口关联及加密处理)

JsonPath应用及断言 重要 自动化要解决的核心问题 &#xff1a;进行自动测试-自动校验&#xff08;进行结果的校验 主要能够通过这个方式提取数据业务场景&#xff1a;断言 、接口关联 {key:value}网址&#xff1a;附&#xff1a;在线解析 JSONPath解析器 - 一个工具箱 - 好用…

OSI/RM的网络体系结构

下面简要说明OSI/RM七层协议的主要功能。 1&#xff09;应用层 这是osi的最高层。这一层的协议直接为端用户服务&#xff0c;提供分布式处理环境。应用层管理开放系统的互联&#xff0c;包括系统的启动、维持和中止&#xff0c;并保持应用进程间建立连接所需的数据记录&#…

python-web应用程序-Django数据库-数据库表设计

python-web应用程序-Django数据库-数据库表设计 在models中创建一个类会自动对数据库进行管理&#xff0c;那么如何用类的声明来实现数据库表的设计呢&#xff1f; from django.db import models# Create your models here. class Department(models.Model):title models.Ch…

2024年【N2观光车和观光列车司机】考试报名及N2观光车和观光列车司机最新解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 N2观光车和观光列车司机考试报名考前必练&#xff01;安全生产模拟考试一点通每个月更新N2观光车和观光列车司机最新解析题目及答案&#xff01;多做几遍&#xff0c;其实通过N2观光车和观光列车司机很简单。 1、【多…

delphi 语法3

简单类型共包括有六种类型&#xff1a;整型、字符型、布尔型、枚举类型、子界类型、实型。 除实型之外&#xff0c;其它五种类中每一种类型的值域(所有合法的值的集合)中值的数目有限 且其中的值排列有序&#xff0c;其每个值在值域中均有一个序数 n&#xff0c;其前后两个值的…

速盾:怎么查询cdn真实ip?

CDN&#xff08;内容分发网络&#xff09;是一种用于加速网站内容传输的技术&#xff0c;通过在全球各地建立分布式节点服务器来提供更快速的内容传输和更好的用户体验。然而&#xff0c;由于CDN的特殊设计&#xff0c;使得查询CDN真实IP地址变得相对困难。本文将介绍一些常见的…

使用system verilog进行流水灯和VGA打印字符

使用system verilog进行流水灯和VGA打印字符 目录 **使用system verilog进行流水灯和VGA打印字符****system verilog的优点****VGA程序编写**VGA 控制器模块字符生成模块顶层模块测试基准程序**效果** **流水灯程序设计****效果** **总结** system verilog的优点 面向对象编程…

618购物狂欢,好物榜单揭晓!一文了解那些值得入手的数码产品

随着618购物狂欢节的脚步渐近&#xff0c;想必各位消费者已经开始规划自己的购物清单了。毕竟&#xff0c;这样的年度大促是难得的省钱良机&#xff0c;许多平日里心仪已久的大牌商品和高价宝贝都在等待着这一天的优惠。错过了618&#xff0c;恐怕又要等上半年才能遇到如此诱人…