[译] Paint Holding - 减少同源页面导航跳转的白屏

1,763 阅读2分钟

对速度较快的网站来说,当用户想要转到另一个网页时,Chrome 迅速清空页面的做法可能会影响体验。为了避免闪现纯白的“加载页面”,Chrome推出了一个名为 Paint Holding 的实验功能以改善浏览体验。

原文地址:paint-holding

最后更新:2019/5/7

作者:Addy Osmani

一直以来,Chrome在切换到新页面时急切地清除了屏幕,让用户了解到页面正在加载。在页面切换并加载页面的时候总会“闪白屏”。特别是当页面切换展示全新内容过程相当快时,页面导航之间的这种情况会分散用户的注意力。

但是对于快速加载的页面,这种方法实际上对用户体验不佳。在下面的动画中,您将看到一个示例,说明这个情况。

我们是这家网站的忠实粉丝,他们的高质量体验让我们为之倾倒,我们想修复这个问题。所以我们使用了一种新的行为来实现这一点,这种行为称为“paint-holding”,即浏览器在开始绘制之前会稍等片刻,特别是当页面足够快时。这样可以确保页面整体呈现,提供真正即时的体验。

我们用延迟渲染的方式来解决这个问题,在PLS前不主动绘制(PLS-page load signal)(例如,第一个content的绘制/fixed timeout)。我们区分了主线程渲染工作和提交到impl线程(只有后者被延迟)。等待PLS降低了白色/纯色闪烁的可能性。

我们这项工作的目标是在同源的两个页面之间使用Chrome导航,应该具有无缝和快速的默认导航体验,在当前页面和目标页面之间没有白色/纯色背景的闪烁。

尝试一下Chrome Canary 76 中的paint-holding,并让我们知道你的想法。开发人员不必对页面进行任何修改就可以使用它。