滚动页面时出现白块[关闭]答案

【问题标题】：White blocks when scrolling the page [closed]滚动页面时出现白块[关闭]
【发布时间】：2017-08-25 16:37:17
【问题描述】：

我完成了一个网站，看到滚动时有白块 - site here。发生在移动设备和桌面设备上。它仅在第一次加载时发生。这是否意味着页面尚未完全加载？如果是这样，我可以显示更长的加载屏幕，但需要知道，我如何知道页面何时加载。如果不是因为这个，那是什么原因造成的？

重现：在浏览器中打开，加载屏幕后使用鼠标滚动条向下滚动（使用屏幕上的滚动条无法重现）。

在移动浏览器中打开它，向下滚动页面 - 在这里我们可以很明显地看到它。

不知道为什么你不能复制它。请从我的手机查看随附的屏幕截图。上下滚动时会发生这种情况。

【问题讨论】：

我没有看到任何白块。什么意思？
请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
@KobyDouek 同意滚动条上没有白块。
顺便说一下，您的页面非常重。考虑缩小图像尺寸。
添加了一个示例屏幕截图，它在移动设备上的外观。向上/向下滚动时会发生这种情况。不确定代码，因为这不是与单个页面相关的问题，而是发生在所有页面上。

【解决方案1】：

在空缓存中，您的页面发出 34 个请求，其总页面大小为 23.7 MB。其中，有 18 个图片请求，图片的总下载大小为 23.3MB。您是否尝试在用户的手机上加载此网站。

缩小或网络优化您的图像。白块出现是因为图像的容器尚未完成加载，因为图像仍在下载中。此外，移动缓存大小小于计算机缓存大小。

在站点的第一个或空缓存加载时检查 chrome 网络选项卡，您可以看到。

一旦图像加载完毕，您的页面就会再次被访问。它的总数据传输量为 5.7 KB，但仍有 34 个请求，并且内容从缓存中呈现。如果图像在您的网站上保持不变，您可以尝试为您的图像添加远期到期。

【讨论】：

您基本正确，但即使页面在低端设备上完全加载，方块也会持续存在。这是 jank 的极端。白色方块是由未设置为被动的触摸事件侦听器和其他阻碍滚动的设计元素阻碍的不断重绘导致的延迟浏览器绘制。
白块出现在我的网络浏览器中，也是因为使用较慢的连接速度。此页面在 8MBPS WIFI 线路上首次加载需要一分钟多的时间。现在，DOM 内容在 4.something 秒内加载完毕。但是完整的页面加载需要几分钟。