Passive Event Listeners - 被动事件监听器

在写webapp页面的时候,Chrome 提醒 

code
1
<code>[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.</code>

翻译过来如下:

违反:没有添加被动事件监听器来阻止'touchstart'事件,请考虑添加事件管理者'passive',以使页面更加流畅。

出现如上提示这可能是由于console的过滤器选择了Verbose

Verbose-冗长,就是事无具细的把所有log显示出来

Info-显示开发者自定义的log及错误信息

Warnings-显示危险信息

Errors-显示错误信息

一般默认的是Info,不会提示这个提醒,虽然这并不影响代码的正常运行,但 是既然提醒了还是弄明白是什么原因的好一些。

这是因为Chrome51版本以后,Chrome增加了新的事件捕获机制-Passive Event Listeners

Passive Event Listeners就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为,以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候,代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,Chrome浏览器称这类型的监听器为被动(passive)监听器。目前Chrome主要利用该特性来优化页面的滑动性能,所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件

以前的事件捕获代码如下:

code
1
<code>document.addEventListener("click", fn, false/true)</code>

第三个参数决定了fn函数是在冒泡还是捕获阶段触发。
现在第三个参数不但可以是布尔值,还可是一个对象

code
1
<code>document.addEventListener("mousewheel", fn, {passive: true})</code>

由于passive对象只在Chrome浏览器中支持,所以这里需要做一个兼容处理

code
1
2
3
4
5
6
7
8
9
10
11
12
13
<code>var passiveSupported = false;
    try {
        var options = Object.defineProperty({}, "passive", {
            get: function() {
                passiveSupported = true;
            }
        });
        window.addEventListener("test", null, options);
    } catch(err) {}
    function fn() {
        console.log("fn")
    }
    document.addEventListener("mousewheel", fn, passiveSupported ? { passive: true } : false)</code>

再看Chrome调试会发现,Chrome已经不要提醒让人头的提醒。

Passive Event Listeners——让页面滑动更加流畅的新特性的更多相关文章

  1. 让页面滑动流畅得飞起的新特性:Passive Event Listeners

    版权声明:本文由陈志兴原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/153 来源:腾云阁 https://www.qclo ...

  2. 73.移动端Web界面滚动性能优化 Passive event listeners

    题,滚动时候不仅滚动了希望滚动的部分,整体的页面也跟随者上下滚动,整个页面非常卡顿. 这两个页面都用了touch事件 控制台打印如下警告: [Intervention] Unable to preve ...

  3. IOS的H5页面滑动不流畅的问题:

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  4. CSS3新特性(阴影、动画、渐变、变形、伪元素等) CSS3与页面布局学习总结——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

      目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...

  5. 移动端页面滑动时候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.

    移动端项目中,在滚动的时候,会报出以下提示: [Intervention] Unable to preventDefault inside passive event listener due to ...

  6. 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

  7. 滑动时候警告:Unable to preventDefault inside passive event listener

    1 前言 在制作2048时,需要在手机端添加滑动检测事件,然后发现控制台有警告,如下: main2048.js:218 [Intervention] Unable to preventDefault ...

  8. [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    相信如果用谷歌浏览器做移动端页面的时候 用touch事件的时候应该遇到过这个东东吧 documet.addEventListener("touchstart",function() ...

  9. Unable to preventDefault inside passive event listener due to target being treated as passive

    Unable to preventDefault inside passive event listener due to target being treated as passive 今天在做项目 ...

随机推荐

  1. Codesys 使用共享内存 打通通讯

    Codesys V3.5 平台   提供了库SysShm,其中包含了共享内存操作的接口函数: SysSharedMemoryClose; SysSharedMemoryCreate; SysShare ...

  2. mybatis关联查询之一对多查询

    一对多,是最常见的一种设计.就是 A 表的一条记录,对应 B 表的多条记录,且 A 的主键作为 B 表的外键.这主要看以哪张表为中心,下面的测试数据中,从employee 表来看,一个员工对应一个部门 ...

  3. Python里面search()和match()的区别?

    match()函数只检测RE是不是在string的开始位置匹配,search()会扫描整个string查找匹配, 也就是说match()只有在0位置匹配成功的话才有返回,如果不是开始位置匹配成功的话, ...

  4. How To Release and/or Renew IP Addresses on Windows XP | 2000 | NT

    Type 'ipconfig' (without the quotes) to view the status of the computer's IP address(es). If the com ...

  5. java面试题-看到那记录到哪

    哈希冲突 如果两个不同的元素,通过哈希函数得到的实际存储地址相同怎么办?也就是说,当我们对某个元素进行哈希运算,得到一个存储地址,然后要进行插入的时候,发现已经被其他元素占用了,其实这就是所谓的哈希冲 ...

  6. 卸载 Bash On Ubuntu On Windows

    1.打开cmd,输入lxrun /uninstall /full,然后根据提示输入y即可开始卸载. 已失效

  7. 2018-11-3-如何使用-Telegram

    title author date CreateTime categories 如何使用 Telegram lindexi 2018-11-03 10:12:12 +0800 2018-02-21 1 ...

  8. Qt 样式表鼠标滑过按钮更改Text文本颜色

    QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...

  9. 眼前一亮的WI微逸输入法

    手机上找了好多输入法,比如百度,谷歌,手心等,百度太花哨,pass:谷歌不知为何反映慢,也pass:手心颜值低,哈哈!!偶遇WI输入法,试用了不错.故推荐之,下面为界面截图:

  10. docker 运行jenkins及vue项目与springboot项目(一.安装docker)

    docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...