passive的作用和原理
passived到底有什么用?
passived主要用于优化浏览器页面滚动的性能,让页面滚动更顺滑~~BetterScroll:可能是目前最好用的移动端滚动插件
passived产生的历史时间线
addEventListener():大家都是认识的,为dom添加触发事件,故事就从这里开始。
在早期addEventListener是这样的:
addEventListener(type, listener, useCapture)
useCapture:是否允许事件捕捉,但是很少会传true,然后就变成可选项了:
addEventListener(type, listener[, useCapture ])
到现在就变成了这个样子:
addEventListener(type, listener, {capture: false, //捕获passive: false, once: false //只触发一次
})
我们的主角passive就出现了
passive为什么能优化页面的滚动性能?
简述chrome的线程化渲染框架
chrome的线程化渲染框架的两个线程:
- 内核线程(Main/Render Thread):负责DOM树构建、元素的布局、图层绘制记录部分(main-thread side)、JavaScript的执行
- 合成线程(Compositor Thread):图层绘制实现部分(impl-side)、图层图像合成
上图可知,页面Frame#1在内核线程中完成js执行、布局和绘制后,经过一个周期合成线程去执行Frame#1页面图像的合成。
用户输入事件分类:
- 在内核线程处理的事件
- 直接由合成线程处理的事件
那么有什么区别呢?
在内核线程处理的事件:需要经过内核线程处理的输入事件要在内核线程执行逻辑,遇到内核线程在忙,无法立即响应。如用户的大部分输入事件都跟页面元素有关系,一旦页面元素注册了对应事件的监听器,监听器的逻辑代码(JavaScript)必须在内核线程中执行(V8引擎运行在内核线程),因此这种输入事件经常无法立即得到响应。
直接由合成线程处理的事件:不经过内核线程就能快速处理的输入事件为手势输入事件(滑动、捏合)。
划重点:最骚的来了,虽然手势事件可以不在内核线程处理,但是手势事件的产生还是离不开内核线程。
页面卡顿的原因
手势事件有个属性 cancelable,作用是告诉浏览器该事件是否允许监听器通过 preventDefault() 方法阻止,默认为true。如果在touch事件内部调用preventDefault(),事件默认行为被取消,页面也就静止不动了。但是浏览器并不知道touch事件内部是否调用了preventDefault(),浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身无法优化这种场景。手势输入事件是由连续的普通输入事件组成的,在这种场景下,无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。
而Chrome团队从统计数据中分析得出,注册了mousewheel/touch相关事件监听器的页面中,80%的页面内部都不会调用preventDefault函数来阻止事件的默认行为。对于这80%的页面,即使监听器内部什么都没有做,相对没有注册mousewheel/touch事件监听器的页面,在滑动流畅度上,有10%的页面增加至少100ms的延迟,1%的页面甚至增加500ms以上的延迟。Chrome团队认为对于统计中的这80%的页面来说,他们都是不希望因为注册mousewheel/touch相关事件监听器而导致滑动延迟增加的。
passive的诞生
所以,passive 监听器诞生了,passive 的意思是“顺从的”,表示它不会对事件的默认行为说 no,浏览器知道了一个监听器是 passive 的,它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。
经过上面的分析,我们了解到了Passive Event Listeners特性实际上是为了解决浏览器页面滑动流畅度而设计的,它通过扩展事件属性passive让Web开发者来告知浏览器监听器是否会阻止事件的默认行为,从而让浏览器可以更智能地决策并优化,这其中涉及到了Chrome的多线程渲染框架、输入事件处理等知识。
总结
参考自:
https://blog.csdn.net/dj0379/...
http://www.cnblogs.com/ziyunf...
本文主要是对上面提及两篇文章的总结和整理,理顺一下自己的思路。如果我写得不够明白可以去看看两位大佬的文章。
原文地址:https://segmentfault.com/a/1190000017247263
passive的作用和原理相关推荐
- volatile关键字的作用、原理
在只有双重检查锁,没有volatile的懒加载单例模式中,由于指令重排序的问题,我确实不会拿到两个不同的单例了,但我会拿到"半个"单例. 而发挥神奇作用的volatile,可以当之 ...
- Bundler 的作用及原理
Bundler 的作用及原理 翻译 · yesmeck · Created at one year ago · Last by teacafe2000 Replied at one year ago ...
- JAVA基础加强(张孝祥)_类加载器、分析代理类的作用与原理及AOP概念、分析JVM动态生成的类、实现类似Spring的可配置的AOP框架...
1.类加载器 ·简要介绍什么是类加载器,和类加载器的作用 ·Java虚拟机中可以安装多个类加载器,系统默认三个主要类加载器,每个类负责加载特定位置的类:BootStrap,ExtClassLoader ...
- Batch Normalization的作用及原理
目录 声明 BN是什么[1] 为什么提出BN[1, 2] BN的作用及原理 加速训练,提高收敛速度[1] 缓解梯度消失(梯度爆炸)[3] 缓解过拟合[4] 其他相关问题 BN和激活函数的顺序问题[5] ...
- 【原创】uC/OS 中LES BX,DWORD PTR DS:_OSTCBCur的作用及原理
1 LES BX, DWORD PTR DS:_OSTCBCur ;OSTCBCur->OSTCBStkPtr = SS:SP!!! 2 MOV ES:[BX+2], SS ;将当前SS(栈的基 ...
- python super()方法的作用_详解python的super()的作用和原理
Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传递,系统会自动传递.uz0免费资源网 今天我们介绍的主角是s ...
- 主从复制面试之作用和原理
主从复制面试之作用和原理 有些同学连集群和主从都分不清楚的,这里我说一下他们最本质的区别,其实也就是data-sharing和nothing-sharing的区别.集群是共享存储的.主从复制中没有任何 ...
- Java之String系列--intern方法的作用及原理
原文网址:Java之String系列--intern方法的作用及原理_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Java的String的intern方法的原理. 常量池简介 在 JAVA 语言中 ...
- 计算机中数值怎么比较大小,数值比较器,数值比较器的作用和原理是什么?
描述 数值比较器,数值比较器的作用和原理是什么? 一.数值比较器的定义及功能 在数字系统中,特别是在计算机中都具有运算功能,一种简单的运算就是比较两个数A和B的大小.数值比较器就是对两数A.B进行比较 ...
最新文章
- CentOS安装tomcat
- 为什么从1970年1月1日开始
- 对比俩个字符串的相似度
- 前端windows下常用的CMD 命令归纳
- python读取yaml文件
- spss和python stata matlab_(SPSS,Matlab,stata,Python)相关性?
- openNLP--Sentence Detector
- Flutter中Expanded组件不能直接嵌套LitView报错,解决办法
- [ 原创 ]2017年3月25日
- 10. Javascript DOM节点
- iOS NSString的常用用法
- PHP微信公众开发笔记(九)
- python名词同义词只替换2个_用同义词替换句子中的每个单词的Python程序
- Dr.COM 宽带认证客户端频繁掉线问题解决方案
- -离散数学-期末练习题解析
- 2022年互联网+全国大学生创新创业大赛解读
- Activity 过渡动画 — 让切换更加炫酷
- python numpy 下载地址
- OPICS 节假日维护
- 哈佛幸福课-完美主义