页面点击提交跳转_Paint Holding - 减少页面跳转过程中的闪白现象

Chromium 在最近的版本更新中增加了一个新的实验特性 “Paint Holding”，主要的目的是减少页面跳转过程中的闪白现象。本文主要是对 Google Web 开发者网站的这篇博文 Paint Holding - reducing the flash of white on same-origin navigations 的一个说明和解析，感兴趣的读者可以进一步阅读原文了解更多信息。

https://www.zhihu.com/video/1181265614563368960

从上面的视频中，左边显示了没有启用 “Paint Holding” 特性的条件下，页面跳转有一个明显的先出现空白，然后内容再逐步出现的过程，而右边基本上一次性出现大部分内容，如果网速够快，用户几乎感受不到加载时间的条件下，左边给人的观感是出现一次明显的闪白，而右边则是近乎无缝切换，明显右边的展示会给予用户更好的视觉观感。

要了解 “Paint Holding” 是如何作用的，首先要了解页面在加载过程中的两个重要节点：

1. First Paint - 网络链接收到足够的页面数据进行第一次排版，然后提交第一帧；
2. First Contentful Paint - 网络链接收到足够多的页面数据排出一个几乎完整内容的首屏；

First Paint 因为基本上就是显示一个页面背景色或者一个大概的页面轮廓，几乎没有任何实际的内容，对用户来说基本没有太大意义，更多是用来衡量网络链接的性能。First Contentful Paint 对用户的实际感受来说，会更有意义。

视频左边闪白现象的原因，就是当前网页绘制的窗口，在页面跳转的过程中，新页面的 First Paint 给合成器提交了一个新的帧，取代了之前页面的最后一帧，而这一帧又没有任何内容，仅仅是一个白色的背景色，导致了用户看起来就是中间出现了一段空白时间。

“Paint Holding” 会在页面跳转过程中阻止对合成器的帧提交，直到下面两个条件其中之一被满足：

1. 提交的帧是 First Contentful Paint 产生的；

2. 提交帧的时间超过了初始设定的一个超时等待的时间；

也就是在说网络足够快的情况下，在页面跳转的过程中，用户看到的下一帧就是新页面的 First Contentful Paint，从而实现一个几乎无缝切换的页面跳转视觉体验。