zoukankan      html  css  js  c++  java
  • Vue学习(八)passive:true模式

    passive模式

    修饰符:.passive - (2.3.0) 以 { passive: true } 模式添加侦听器,也就是执行默认行为

    passive这个修饰符会执行默认方法。你们可能会问,明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。

    【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。】

    通俗点说就是每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作,从而提高了性能

    这里一般用在滚动监听,@scoll,@touchmove 。因为滚动监听过程中,移动每个像素都会产生一次事件,每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过,可以大大提升滑动的流畅度。

    注:passive和prevent冲突,不能同时绑定在一个监听器上。

  • 相关阅读:
    Flask 开启跨域
    pandas to dict
    mongodb 聚合查询
    flask 获取请求参数
    CSS dppx详解
    用CSS做出漂亮的字体动画
    VMware虚拟主机安装完成后连接不上网络
    wokerman中自定义协议的使用和测试
    使用workerman写一个小的聊天室
    telnet不能使用怎么办?
  • 原文地址:https://www.cnblogs.com/kunmomo/p/12504771.html
Copyright © 2011-2022 走看看