【重要！！】passive优化页面性能

最新推荐文章于 2024-06-26 08:53:16 发布

温柔先生

最新推荐文章于 2024-06-26 08:53:16 发布

阅读量575

点赞数 2

分类专栏：性能优化文章标签： passive

本文链接：https://blog.csdn.net/weixin_43623808/article/details/103403055

版权

性能优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在js中给dom元素添加监听事件：

let dom1=document.getElementById("box1");
function box(that){
	console.log(that);
}
dom1.addEventListener("click",function(){box(1)});

一般都是这样，但是还是有第三个参数，Boolean类型。当设置为true时，是事件捕获状态（事件从外往里执行），false时是向上冒泡状态（事件从里向外执行），默认为false，因为事件捕获太少使用了。

但是第三个参数还可以传对象，例：

dom1.addEventListener("click",function(){box(1)},{
				passive:true,//告诉浏览器不用调用preventDefault()，可以执行默认行为
				capture:true,//事件捕获阶段，如果此元素的子元素被触发事件时，会先执行此事件
				once:true//此监听器只执行一次
				});

重点passive：

告诉浏览器可以执行默认行为，这时候应该就会有个疑问：“默认的不就是执行默认行为吗？”
在这里插入图片描述
举个例子：

<style type="text/css">
			#box1{width: 400px;height: 1500px;background-color: antiquewhite;}
</style>

<body>
		<div id="box1"></div>
<script>
dom1.addEventListener("wheel",function(){
				let i=1;
				while(i++<1e15){
				}
				});	
</script>
</body>

如果试了这个应该页面崩了奥
在这里插入图片描述
这默认行为就是页面下滑，虽然没有阻止默认行为，但是页面就是下不去了。因为浏览器无法预先知道一个监听器是否调用了preventDefault()，它需要等待监听器执行完后，再去执行默认行为，而监听器中函数执行是需要时间的，这个执行时间就是它等待的时间（就算是空函数也会有执行时间）。这样就导致页面下滑有卡顿。
加上再试一下：

dom1.addEventListener("wheel",function(){
				let i=1;
				while(i++<1e15){
				}
				},{
				passive:true
				});

加了passive=true浏览器就知道，不用去调用preventDefault()，就不会再等待了，直接纵向丝滑执行默认行为。
这属性尤其移动端很需要注意。
哈哈哈我觉得我的简单易懂，实践令人深刻
比较官方一点的还有视频可以看：这里
还有讲了一下兼容性的：这里

温柔先生

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【重要！！】passive优化页面性能

在js中给dom元素添加监听事件：let dom1=document.getElementById("box1");function box(that){ console.log(that);}dom1.addEventListener("click",function(){box(1)});一般都是这样，但是还是有第三个参数，Boolean类型。当设置为true时，是事件捕获状态（...
复制链接

扫一扫

专栏目录