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

2024-06-04 01:28
文章标签 加载 浏览器 渲染 节流 防抖

本文主要是介绍浏览器渲染优--防抖节流懒加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

合理选择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.chinasem.cn/article/1028672。

相关文章

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio
阅读更多...
SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于
阅读更多...
使用DrissionPage控制360浏览器的完美解决方案

使用DrissionPage控制360浏览器的完美解决方案

《使用DrissionPage控制360浏览器的完美解决方案》在网页自动化领域,经常遇到需要保持登录状态、保留Cookie等场景,今天要分享的方案可以完美解决这个问题：使用DrissionPage直接... 目录完整代码引言为什么要使用已有用户数据？核心代码实现1. 导入必要模块2. 关键配置（重点！）3.
阅读更多...
Android WebView无法加载H5页面的常见问题和解决方法

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D
阅读更多...
SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法

《SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法》本文主要介绍了SpringBoot项目启动错误:找不到或无法加载主类的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下... 目录方法1：更改IDE配置方法2：在Eclipse中清理项目方法3：使用Maven命令行在开发Sprin
阅读更多...
spring-boot-starter-thymeleaf加载外部html文件方式

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring
阅读更多...
关于Spring @Bean 相同加载顺序不同结果不同的问题记录

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明
阅读更多...
JavaWeb-WebSocket浏览器服务器双向通信方式

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
详解如何在React中执行条件渲染

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染？基础示例使用逻辑与运算符（&&）使用条件语句列表中的条件渲染总结引言在现代
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2