Chrome以奇怪的顺序显示dom元素，然后修复刷新

Question

这一定是一个内容问题，但到目前为止我还没有发现它 - 它是新的，它刚刚开始在生产网站上发生。 使用 Chrome 版本 31.0.1650.57 m，我可以非常定期地复制它，到目前为止，在任何其他浏览器中都没有。 问题出在负载上，一些 dom 元素出现乱序。即dom有div1、div2、table1、div3、table2等，但是渲染出来的网页显示div1上面的table 2。据我所知，没有任何 CSS 会导致其位置异常，只需刷新页面即可使其正确呈现。控制台中没有错误。 一个警告 - html 是软件和开发人员集团的输出，并不是最好的 dom 结构。但同样，它在所有其他浏览器中都很好（到目前为止），直到最近在 Chrome 中也很好。 下面是两个屏幕截图* - 源和渲染输出。请注意，在源代码中，带有“您的购物车中的商品”字样的 H3 标记出现在突出显示的元素（包含结帐按钮的表格）上方。但是在渲染出来的html中，可以看到按钮在H3的上方。同样，如果我刷新页面，它会自行修复。

我仍在解决此问题，将继续尝试找出问题，但希望那里的人可能对可能发生的情况有所了解。我怀疑这与顶部的图像轮播有关，但它已经使用了很长时间，没有改变，所以不确定发生了什么变化。

• 射击，我没有正确的信誉在我的问题中发布图片！以下是图片的链接： https://www.dropbox.com/s/v4prpoinmc83f00/Chrome%20Cart%20Bug%20Source.png 和 https://www.dropbox.com/s/j092l7e1etebz07/Chrome%20Cart%20Bug%20Rendered.png

您也可以（可能）自己复制它。访问 www.storkie.com，然后在您的购物车中添加一些东西。不，我不是想引诱你去那里购物——这就是解决问题的方法。无论如何，第一次添加时它可能会出现，但是如果您单击顶部的查看购物车链接，它可能会出现在图片中。

提前感谢您的任何建议！

Answer 1

我在 JSF Primefaces 应用程序上遇到了同样的问题，但我找不到任何未转义的字符。

我的页面上的元素顺序每第三次或第四次重新加载就会改变一次，但是我每 15 秒进行一次 ajax 轮询（刷新），并且当它命中页面时会正确呈现。

我对比了这次 ajax 刷新前后的源代码，但没有区别。

我知道这不是解决方案，但可能有助于接近解决方案。

编辑：

我在 chromium 问题跟踪器中发现了一个关于此问题的问题。

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

无论如何，这个问题应该会在下一个 chrome 版本中修复。

Answer 2

只是想说我有完全相同的问题。六个月前最后一次更新的网站最近开始在 Chrome 中乱序渲染元素。

对我来说，在我访问该页面的 3 次中，有 2 次发生这种情况，就好像在遇到特定标签时重新开始渲染一样。

我的代码看起来像这样：

<a href="javascript:__doPostBack..." class="HistoryLink">List</a>
<span class="HistoryLink_Separator">&nbsp;»&nbsp;</span>
<span class="HistoryLink_Last>Item</span>

Chrome 会很好地呈现页面，直到它使用 »（右双角引号）到达 SPAN，然后它再次开始将元素定位在页面的最顶部。