2021-02-11

---

前言

最近在复习vue官方文档的时候，对事件修饰符.passive的了解很模糊，查阅资料，发现后面牵扯到很多chrome浏览器渲染的知识，故记录下来以便日后翻阅

---

要谈passive，首先得从chrome浏览器新增的passive event listener特性说起

一、passive event listener是什么？

passive event listener是chrome在2016年新增的浏览器特性，通过告知浏览器元素注册的事件监听器是否会使用了preventDefault阻止事件的默认行为来显著提高页面滑动效果。要说它是如何优化页面的滑动的，得先从chrome的内核渲染过程说起。

二、chrome的线程化框架渲染

1. 传统的内核线程渲染

传统的浏览器执行页面渲染，采用单线程一站式渲染方式，即内核线程处理图像绘制操作记录，构建dom树，布局，图像绘制实现，合成图像，JavaScript的执行。这种渲染方式的弊端很明显，单线程中只要有一个事件处理时间过长，会导致用户的等待时间增加，减少用户体验，在后面的任务必须等前面的任务执行完毕才能执行，无法并发。

2.chrome的线程化渲染框架

chrome官方为了解决这个问题，将内核线程负责的工作任务进行了拆分。内核线程是blink内核及v8引擎所在的内核，负责处理图像绘制操作记录，构建dom树，页面布局，JavaScript的执行。分出了一个合成线程，负责处图像绘制实现，将图像和图层合成图像。在多线程并发的环境下，执行效率会大大提高，首先内核线程处理第一帧的布局和图像绘制操作记录，之后将任务交给合成线程继续处理，自己则去处理下一帧的布局和图像绘制操作记录，而合成线程拿到任务后，合成图像并渲染成图像交给屏幕展示，这里使用了cpu的并发处理来同时执行内核线程和合成线程，这样在内核线程执行的同时，合成线程一直在执行上一帧的内容，而用户所看到的内容其实是上一帧的内容快照。

---

3.passive的优势

这时还有一个问题，既然JavaScript的执行是分配给内核线程来执行，用户的大部分输入事件注册的监听器都是JavaScript执行，那么用户的输入事件不可避免不能及时的得到响应。用户滑动手势事件则是例外，首先用户滑动手势是由用户输入事件组合成的，用户的滑动手势操作，操作的实际上是已经渲染好的内容快照，即上一帧合成线程所执行的任务，所以滑动手势事件是分配给合成线程执行的，但是用户输入事件还是由内核线程执行的，当事件中注册的监听器有preventDefault函数阻止事件的默认行为时，该事件就无法触发，而且内核线程必须执行到这个事件时才能发现，这样会浪费大量的事件导致用户滑动卡顿，passive则是用来提前告知浏览器页面是否会有preventDefault函数存在

let handle = (e) => {
	console.log(e.type)
}
document.addEventListener('click', handle, {
	passive:true  //passive为true则没有preventDefault存在该监听器
	capture：false
})

这样浏览器在事件执行时会直接触发滑动手势事件

总结

总的来说，passive主要是优化滑动手势事件，在移动端更为适用。