帧缓冲信号就是垂直同步信号
浏览器在每次事件循环的末尾会有一个渲染阶段进行可能需要的回流,重绘,合成等操作,最终得到的绘制合成完成的完整一帧画面会传到帧缓冲区,但不会立刻显示在屏幕上,帧缓冲信号(VSync)是显示器的硬件信号,频率固定,浏览器以次节奏推进帧,发出帧缓冲信号的时候会把帧缓冲区内的画面显示到屏幕上
- 注意一帧内会有多次事件循环,通常情况下事件循环不会立刻把本轮的回流重绘操作等执行,而是计算,一直到帧缓冲信号快发的时候再生成画面,写入帧缓冲区,再帧缓冲信号发出的时候显示到屏幕上,不会有过程,比如一个卡片一开始在距离视口顶部12px位置,一帧内先向上移动5px一次,浏览器会计算距离视口顶部7px,再向上移动3px浏览器计算得到距离视口顶部4px,再向下20px,浏览器计算得到距离视口顶部24px,这时候浏览器发现帧缓冲信号快开始了,浏览器就生成下一帧的画面,写入帧缓冲区,帧缓冲信号发出的时候吧这个距离视口顶部24px的画面显示到屏幕上,即屏幕上这一帧显示的是从12px的位置跳到24px的位置,其他的过程都不会显示,但是一些强制回流重绘的操作可能会产生多次回流,比如获取当前的高度
- 如果某一帧里重绘回流操作过多会导致画面无法完全写入帧缓冲区,可能写了一部分还没写完的时候帧缓冲信号发送了,就会导致一部分画面是上一阶段的一部分是新的,卡帧/画面撕裂
- 显卡缓冲区分为两部分,前缓冲区和后缓冲区,前缓冲区显示当前的画面,后缓冲区写入下一帧的画面,当垂直同步信号发出的时候,交换前后缓冲区指针即前缓存区变成后缓冲区,后缓冲区变成前缓冲区,显示当前前缓冲区的内容,并开始重新绘制后缓冲区
