码迷,mamicode.com
首页 > 其他好文 > 详细

vue中的.passive修饰符

时间:2019-01-28 13:54:41      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:函数   性能   evel   touch   htm   监听   图片   pre   监听器   

一、passive作用

  详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中关于addEventListener中的第三个参数;表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。

二、原理

  由于 touchstart 事件对象的 cancelable 属性为 true,也就是说它的默认行为可以被监听器通过 preventDefault() 方法阻止,那它的默认行为是什么呢,通常来说就是滚动当前页面(还可能是缩放页面),如果它的默认行为被阻止了,页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault(),它能做的只有等监听器执行完后再去执行默认行为,而监听器执行是要耗时的,有些甚至耗时很明显,这样就会导致页面卡顿。视频里也说了,即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。(这句话来源:https://www.cnblogs.com/ziyunfei/p/5545439.html)

三、vue中的passive修饰符作用

  该修饰符表示就是设置{passive:true},表示处理事件函数中不会调用preventDefault函数,就会减少了额外的监听,从而提高了性能;所以不能和.prevent修饰符一同使用,否则浏览器会报错。

技术分享图片

 

vue中的.passive修饰符

标签:函数   性能   evel   touch   htm   监听   图片   pre   监听器   

原文地址:https://www.cnblogs.com/llcdxh/p/10329414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!