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

最新推荐文章于 2024-07-12 09:36:48 发布
最新推荐文章于 2024-07-12 09:36:48 发布
阅读量891 收藏 26
点赞数 13
分类专栏： 浏览器原理 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzy0507/article/details/139424624
版权

合理选择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.target
  if (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)=>{
            //判断每张图片的位置是否出现在可视区域a
            const imagesTop=imgshow.getBoundingClientRect().top
            if(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.target
                const 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>
小王没脑袋
关注
  • 13
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV懒加载demo
06-26
6. **性能优化**：避免频繁的计算和监听，可以设置节流或防抖函数来限制滚动事件的触发频率。同时，合理地组织和分批加载数据，避免一次性加载大量内容导致页面卡顿。 7. **用户体验**：加载过程中应提供反馈，如...
vue移动端列表组件支持下拉刷新上拉加载更多
08-12
3. 使用防抖（Debounce）或节流（Throttle）函数限制频繁的请求，避免对服务器造成压力。 总结，Vue.js移动端列表组件支持下拉刷新和上拉加载更多功能，是通过事件监听、状态管理、组件通信等手段实现的。通过合理...
前端性能优化【前端必备】（含懒加载，手写防抖、节流等）
朝阳39的博客
03-06 1660
都可以考虑用空间换时间。
js性能之----函数防抖与节流
Luckyzhoufangbing的博客
12-01 133
（一）什么是抖动 举个例子，一个电商页面有一个输入框，当用户在输入框中输入所要查询的商品的时候，前端页面通过输入框 input 的 onchange 事件实时监听用户的输入内容，并调用涉及商品的接口，在下方列表中展示出相关搜索商品，大致效果如下 所以，当用户输入过快的时候，比如1s修改500次输入框的内容，前端 则 1s 调用500次后端商品列表接口，前端1s内把所查询的商品渲染500次在...
前端性能优化之防抖&节流
~~~
10-06 2780
防抖和节流是前端开发中常用的两种性能优化技术。为什么需要防抖和节流呢？两者目的都是为了防止某个时间段内操作频繁触发，造成性能消耗。防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。节流： n 秒内只执行一次事件，即使n 秒内事件重复触发，也只有一次生效。
2019 面试准备 - JS 防抖与节流
CalmHarbin的博客
03-13 209
Hello 小伙伴们，如果觉得本文还不错，记得给个 star ， 你们的 star 是我学习的动力！GitHub 地址 本文涉及知识点： 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 TCP 三次握手与四次挥手 浏览器渲染页面 在本文中，jsliang 会讲解通过自我探索后关于上述知识点的个人理解，如有纰漏、疏忽或者误解，欢迎各位小伙伴留言指出。 如果小伙伴对文章...
浏览器---浏览器/http相关面试题
maidu_xbd的博客
02-21 987
当访问项目的时候，你访问的是nginxIpAddress:3000，nginx将你的请求映射到项目的真实地址A，同理项目中的接口请求例如nginxIpAddress:3000/api/*，nginx将接口请求映射到接口服务的真实地址B。保障了传输过程的安全性。将原本要请求的服务地址，改为请求nginx服务器，利用nginx地址映射将请求映射到真实的服务地址，同时需要添加两个响应头信息，一个是Access-Control-Allow-Origin，Access-Control-Allow-Methods。
【JS】防抖和节流
xueyinglys的博客
07-05 348
防抖和节流
DOM——页面的渲染、style属性操作、预加载与懒加载、防抖与节流
qq_56668869的博客
07-22 739
页面的渲染、style属性操作、预加载与懒加载、防抖与节流
防抖与节流
马优晨
06-04 498
防抖 如果小伙伴们手头有电脑，并感兴趣想先自己思考下什么是防抖。可以将代码复制到浏览器，尝试点击按钮，并关注下控制台，看看 Console 是如何打印的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten...
来手写一次防抖节流吧！
yiyi_11的博客
12-07 791
防抖节流作为日常面试中的高频考点，但是每次被问到还是难倒一大片，那就再来手写一次防抖节流加强巩固吧！！！
relation-graph图谱移动端适配拖动修复代码
03-18
由于触控事件的连续性，可能需要使用防抖或节流函数来防止频繁的更新，提高性能。 4. **滚动与缩放适配**：在移动端，用户可能期望通过滑动屏幕来查看图谱的不同部分，或者通过双指缩放来查看细节。这需要对图谱的...
in-view-srcset：使用srcset自动加载响应图像
02-15
4. **性能优化**：为了避免频繁的DOM操作和性能消耗，库可能采用防抖(debounce)或节流(throttle)技术来限制滚动事件的处理频率。 5. **离视口处理**：对于已加载且离开视口的图片，`in-view-srcset`可能会移除其`src...
picture-world:为要渲染的Google图片奠定基础
05-23
这种技术称为无限滚动或惰性加载，通过监听滚动事件，结合JavaScript的节流或防抖函数，可以实现高效且流畅的用户体验。 此外，项目可能还涉及到图片的预览和下载功能。用户在选择图片后，可以预览图片效果，并选择...
Webkit简介以及工作流程
读心悦
07-10 311
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 189
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 166
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
vue 页面渲染多条数据速度慢
04-24
您好，对于vue页面渲染多条数据速度慢的问题，可以考虑使用以下方法来优化页面渲染速度： 1. 使用v-for指令的时候，尽量使用唯一的key值来标识每一个列表项，以免造成无意义的重复渲染。 2. 将页面中不需要马上显示的部分使用懒加载的方式呈现，可以提高页面渲染速度。 3. 合理利用计算属性和watch方法，避免在大量数据变化时重复渲染。 4. 将频繁操作的事件使用节流或防抖的方式优化，避免造成浏览器的无响应等问题。 5. 对于一些常规的数据处理，比如排序、过滤等，可以考虑在数据源层面进行处理，减少页面内的计算量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值