在addEventListener绑定事件的方式中,可以传入三个配置对象
设置事件侦听器的 passive 属性
可以通过在事件侦听器的第三个参数中添加 passive: true 来解决它。
例如:
element.addEventListener('scroll', onStart, { passive: true })
passive的作用
浏览器内核渲染页面时有2个线程,一个主线程,负责js执行,另一个绘制线程,负责绘制画面。当事件触发时,主线程负责执行事件回调函数,完事后告诉绘制线程可以绘制画面了,但是如果主线程一直很忙,事件回调函数就迟迟不能执行,绘制画面也就卡住了,用户就感知到了卡顿,passive如果设置为true,则绘制线程不用等待主线程了,它们可以并行执行,回调函数中的event.preventDefault()不再起作用,如果有,执行到这句时,浏览器会给出警告
博客介绍了在addEventListener绑定事件时,可通过在第三个参数添加passive: true来设置事件侦听器的passive属性。还说明了passive属性的作用,设置为true时绘制线程和主线程可并行执行,避免卡顿,同时回调函数中的event.preventDefault()将失效。
571

被折叠的 条评论
为什么被折叠?



