文章目录 一、passive修饰符的作用 二、代码示例 三、浏览器默认设置与passive的关系 Vue中,passive修饰符是一个很实用的功能,不少开发者可能对它的了解还不够深入。……
文
章
目
录
Vue中,passive
修饰符是一个很实用的功能,不少开发者可能对它的了解还不够深入。今天咱们就来详细聊聊passive
修饰符的使用场景。
一、passive修饰符的作用
passive
修饰符的主要作用是让事件的默认行为立即执行,而不用等事件回调函数执行完。拿常见的滚动事件来说,正常情况下,浏览器得等JavaScript的事件处理函数(比如onscroll
)全部执行完,才会去处理页面滚动的动作。要是事件处理函数里的代码比较复杂、执行时间长,页面滚动起来就会一卡一卡的,很不流畅。
但要是给滚动事件加上passive
修饰符,滚动条就会马上滚动,不用等滚动事件的回调函数执行结束。这样一来,用户在操作页面滚动时,体验会好很多。
二、代码示例
先看下面这段代码:
function demo(){
for (let i = 0; i < 200000; i++) {
console.log(\'#\'+ i)
}
}
<div style=\"overflow: scroll;border: 10px dotted blue;height: 400px;\" @scroll.passive=\"demo\">
<ol>
<li v-for=\"n in 50\">{{ n }}</li>
</ol>
</div>
在这段代码里,div
元素设置了overflow: scroll
,表示它有滚动条。当给@scroll
事件加上passive
修饰符并绑定demo
函数后,你会发现,滚动条能先滚动,之后才执行demo
函数里的代码。要是不加passive
修饰符,就得等demo
函数执行完,滚动条才会滚动,这期间页面会有明显的卡顿,用户体验很差。
三、浏览器默认设置与passive的关系
实际上,为了优化用户体验,大部分浏览器(Safari和Internet Explorer除外)都把文档级节点Window
、Document
和Document.body
上的wheel
、mousewheel
、touchstart
和touchmove
这些事件的passive
默认值改成了true
。这么做之后,事件监听器就没办法取消这些事件了,而且在用户滚动页面时,也不会阻止页面的正常呈现。
看下面这个示例代码:
window.addEventListener(\'wheel\', (event) => {
for(var a=0;a<20000;a++) {
console.log(\'window\', a)
}
}, { passive: true });
当把passive
设为true
时,页面滚动起来非常顺滑;要是设为false
,滚动就会变得卡顿。不过,需要注意的是,scroll
事件并不受这种默认设置的影响。
还没有评论呢,快来抢沙发~