什么情况可能会导致 Chrome 延迟渲染？答案

【问题标题】：What situation may cause Chrome to delay rendering?什么情况可能会导致 Chrome 延迟渲染？
【发布时间】：2014-02-27 16:30:02
【问题描述】：

目前在做一个web应用，遇到Chrome会长时间或者无限延迟页面的渲染。

这发生在非常小的页面源上，例如。一个简单但正确的 HTML 框架，只有一小段文本。

Chrome 加载这些页面，鼠标指针返回空闲状态，开发者工具网络监视器确认传输完成。然而，该选项卡保持空白。然后可以通过切换选项卡或标记内容来触发呈现，然后页面完全显示。

我想知道这是否是由于不符合标准的过于简单的 HTML 造成的，或者更复杂的东西，这取决于我的响应标头、连接类型（可能使用 keepalive）。

有什么想法或类似的观察吗？

【问题讨论】：

我观察到了同样的情况。我的补救措施是执行“硬刷新”ctrl + f5。这不仅发生在我正在开发的应用程序上，而且在其他网站上也随机发生。
所以这显然是 Chrome 的一个错误，但它的原因，我猜主要是一个有用的性能功能出错了，知道它会很有趣，以防止它发生在您自己的服务上......
一些进展：我发现了与 bug code.google.com/p/chromium/issues/detail?id=321286 中描述的效果相同的效果。行为完全匹配，但解决方案不匹配。如果解决方案可行，我会标记这只是一个很少发生的 Chrome 错误。

标签： html google-chrome html-rendering

【解决方案1】：

尝试在其他浏览器上运行它，如果它工作正常，那么问题在于 chrome。尝试清除浏览器数据、重新安装 chrome 或更新。

如果问题也出现在其他浏览器上，那么您必须检查您的代码、互联网连接，或检查您的 PC 是否存在可能降低浏览器速度的病毒。

【讨论】：

问题肯定出在Chrome上，但是其他人也遇到过，而我自己也是在我的网站建设中遇到的，需要通过我的网站来解决，否则其他用户可能会稍后遇到同样的问题。

【解决方案2】：

我遇到了同样的问题，发现了这个讨论。

https://code.google.com/p/chromium/issues/detail?id=336476&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

以下解决方法对我有用：

 body
{
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
from{   opacity: 1; }
to{ opacity: 1; }
}

希望这对您也有帮助！

【讨论】：

这似乎在讨论与外部字体相关的问题，因为提到的页面链接了一些，并且投诉是关于文本未呈现的。但是，我遇到了一个完全空白的页面，没有任何渲染。