javascript - GoogleSearch 如何预渲染图像？

Question

我注意到一些以前在谷歌上搜索时没有看到的东西。它涉及图像。

如您所见，在加载图片时，Google 会显示一个带有图片尺寸的空白容器，以及与每张图片的平均颜色相对应的背景颜色。

现在看起来像这样，包含的链接元素具有内联样式，包括 bg 颜色。

<a style="height: 56px; margin: 0px; width: 59px; left: 0px; background: rgb(109, 128, 70);"></a>

但是他们是如何得到它的呢？客户端如何在加载图片之前知道图片的平均颜色？

Answer 1

Google 在向您展示图像之前确实知道图像是什么 - 甚至可能是副本。即使要出现在搜索结果中，图像也必须与关键字和有关图像的信息一起存在于某种形式的数据库中，以允许人们搜索它。当 Googlebot 爬虫发现图像时，它必须将其对图像的了解注册到 Google 服务器。服务器(或机器人)可能不太难分析图像并获得平均颜色，并将此数据与其他相关图像信息一起存储。

因此，如果 Google 知道图像的平均颜色，则可以将该颜色作为 div 的背景与其余 HTML 一起发送。这意味着颜色将与 CSS/HTML 的其余部分同时加载，因为样式被称为“阻塞”(在处理和应用样式之前无法呈现页面)。但是，图像不会阻塞(而且加载时间比单一样式要长得多)所以页面会在所有图像下载完成之前显示。在图像完全下载(并显示在页面上)之间的空间中，颜色显示为占位符。当图像被客户端下载时，它被放置在适当的空间中。

请记住，这只是一个有根据的猜测，但除非有 Google 工程师出现，否则您不太可能得到 100% 准确的答案，但我认为与此相差不远。

这是 chrome 中网络面板的屏幕截图。你可以看到红色的渲染请求/响应会导致页面发生变化，蓝色的是在处理完初始样式和 HTML 后加载的所有图像。黑线表示从页面加载到图像全部下载的时间间隔。