【浏览器渲染】【重要】javascript的addEventListener的passive参数作用

92 阅读1分钟

以滚动事件为例

触发页面滚动的时候,渲染主线程会执行滚动事件的回调函数,然后浏览器进程才会进行页面绘制。

为什么会是这个执行顺序呢,因为事件回调函数里面可能会执行event.preventDefault操作,如果执行了,那么后续的滚动事件就不会执行了。

这因为这样,如果在滚动事件的回调方法中,执行了同步阻塞代码,那么滚动就会一卡一卡的

所以passive参数的作用就体现出来了,passive设置为true,那么浏览器进程的绘制操作就不会等待渲染主线程事件回调函数的执行了,他就会流畅运行。

这时即使在事件回调函数中写了event.preventDefault代码,那么浏览器进程也会忽略它,会继续执行滚动操作