今天看源码,因为边看边做笔记,所以慢慢看。突然发现一个特点。所以单独开一篇文章。感觉像是一个更大的功能。如果有一天面试官让你找一个优化过的页面,你提出去看看浏览器是否可以使用这个功能。提高滚动流畅度。被动varsupportsPassive=false;如果(在浏览器中){尝试{varopts={};Object.defineProperty(opts,'passive',({get:functionget(){/*istanbulignorenext*/supportsPassive=true;}}));//https://github.com/facebook/flow/issues/285window.addEventListener('test-passive',null,opts);}catch(e){}}这里的核心是检查是否支持Passive,tips1,什么是passive?Chrome提出的一个新的浏览器特性:Web开发者使用一个新的属性passive来告诉浏览器当前页面注册的事件监听器是否会调用preventDefault函数来阻止事件的默认行为,从而使浏览器可以根据这个信息做出更好的决策来优化页面性能。当属性passive的值为true时,表示不会在监听器内部调用preventDefault函数来阻止默认的滑动行为。Chrome浏览器将这种类型的监听器称为被动监听器。目前Chrome主要是利用这个特性来优化页面的滑动性能,所以PassiveEventListeners特性目前只支持mousewheel/touch相关的事件2.PassiveEventListeners特性是为了提高页面滑动的流畅度,直接影响用户对这个页面最直观的感受。这不难理解。想象一下,你想滑动某个页面来浏览内容。当您使用鼠标滚轮或用手指触摸屏幕上下滑动时,页面没有按预期滚动。这时候,你常常会觉得心里有点不爽,甚至想放弃这一页。Facebook之前做过一个实验。当他们将页面滑动的响应刷新率从60FPS降低到30FPS时,他们发现用户参与度急剧下降。3、简单实现被动函数handler(event){console.log(event.type);//日志事件类型}document.addEventListener("mousewheel",handler,{passive:true});
