性能优化
文章平均质量分 57
挖掘机器人
这个作者很懒,什么都没留下…
展开
-
(一)BFC
BFC - Block Formatting Context 块级格式化上下文,在官方文档当中的定义是这样 一个BFC区域包含创建该上下文元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,BFC是一块块独立的渲染区域,可以将BFC看成是元素的一种属性,拥有了这种属性的元素就会使他的子元素与世隔绝,不会影响到外部其他元素具体的意思如下 假设box1和box5是两个BFC区域,那么根据上述原理能理解到的就是,box1这个BFC区域包含了子元素box2,box3,box4,box5。但不包括box原创 2022-06-25 01:03:48 · 101 阅读 · 0 评论 -
前端性能优化(三)防抖和节流
通过防抖和节流来防止js代码的高频率执行 函数防抖 原理:当持续触发一个事件时,在n秒内,事件没有再次触发,此时才会执行回调;如果n秒内,又触发了事件,就重新计时 当一直有人进电梯时(连续触发),电梯门不会关闭,在一定时间间隔内没有人进入(停止连续触发)才会关闭。 函数节流 原理:当频繁的触发一个事件,每隔一段时间, 只会执行一次事件。 如果在时间间隔内我们就触发事件,如果不在事件间隔内我们就触发事件区别:降低回调执行频率,节省计算资源。 防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行,节流是将原创 2022-06-10 22:17:12 · 173 阅读 · 0 评论 -
前端性能优化总结(二)图片懒加载
图片懒加载也就是图片的延迟加载,实现图片的懒加载总共有两种方法 html代码 javascript代码 问题每一次滚动都会触发事件,即使滚动结束依旧会触发事件 通过第二种方法IntersectionObserver可以更好的解决 通过IntersectionObserver来监视,当检查区域与元素发生了交互的时候会产生什么该方法有两个参数 通过来触发,通过来解绑 当加载完成的时候就解绑,调用 第三种方案三:直接给标签添加属性loading="lazy"就好了 除了谷歌浏览器暂不支持...原创 2022-06-10 15:30:50 · 223 阅读 · 0 评论 -
常见的性能优化与问题总结(一)浅拷贝和深拷贝
为什么要使用深拷贝?我们希望在改变新的数组(对象)的时候,不改变原数组(对象)浅拷贝 浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存(分支)。 浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。 如果属性是基本类型,拷贝的就是基本类型的值;如果属性是内存地址(引用类型),拷贝的就是内存地址 ,因此如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝 深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象,原创 2022-06-10 12:52:37 · 227 阅读 · 0 评论