Chrome 24 与 IE10 滚动可怕的滞后答案

【问题标题】：Chrome 24 vs IE10 Scrolling Horrible LagChrome 24 与 IE10 滚动可怕的滞后
【发布时间】：2013-01-23 16:02:42
【问题描述】：

我目前正在开发一个主要针对 Chrome 24.01312.57 和 IE10 的网络应用程序。在以前的浏览器中，我遇到了大量的延迟。然而，后者几乎没有延迟，这与所有人声称的完全相反。

为了向您展示不同之处，我正在使用 iPhone 记录上网本的屏幕，同时向下滚动 Chrome Webstore - 这是 Google 自己创建的。

检测设备

2 岁的 Gateway 上网本 - 单核 Intel Atom - 1GB RAM - Win7
iPhone 摄像头（不是很好的录制解决方案，但很容易发现差异）
网站：https://chrome.google.com/webstore/category/home（对于那些担心 AJAX 加载的内容会减慢渲染速度的人，在开始测试之前，我为这两种浏览器向下滚动了相当长的时间）

结果

Google Chrome 24（无扩展）向下滚动 Webstore： http://www.youtube.com/watch?v=njkRqiNJPIY
Internet Explorer（无插件）10 在同一页面上：http://www.youtube.com/watch?v=B_E_9OzPers

注意：查看鼠标光标和滚动拇指 - 在 IE10 上，鼠标始终位于拇指上，而 Chrome 则到处都是，表明鼠标移动和实际渲染之间存在高延迟。

底线：

在我得出结论之前，请务必意识到，随着网站变得更加复杂和/或规格降低，Google Chrome 上的这些滞后越来越大。然而，即使在这些条件下，IE10 也将 FPS 推得相当高。我还对 Chrome 时间线进行了一些分析。 In 显示，当您缩小到渲染需要大约 900 毫秒/帧（在 Google Webstore 上）的点时，FPS 会下降，而 IE10 仍然流畅（更好的是它在 atom 上网本上保留了这种平滑度）

作为 Web 开发人员，是否有一些 CSS 属性导致 Chrome 呈现页面延迟？
为什么 Internet Explorer 渲染速度如此之快？
有哪些步骤可以让 Chrome 像 IE10 一样快速渲染？

PS：错误报告：http://code.google.com/p/chromium/issues/detail?id=163092，但目前没有这方面的最新进展。

【问题讨论】：

这就是 Chrome 的特点之一，它是一只沉重的野兽，而且非常消耗内存。你试过在那个 Atom 上运行 Linux 吗？至少在操作系统中移动和加载东西，您将享受到性能提升。 Win7 + Chrome 只需 1gb 的内存就可以杀死它。
我也有一台非常强大的电脑，但它似乎仍然有延迟，而 IE10 就像在 240Hz 电视上看电影一样。该测试是在自定义/基准测试网站上完成的，用于测试每个网站的性能 - 具有大量边框半径和框阴影。 :P
我的第一个猜测是 -webkit 属性中的一个（或更多！）正在减慢 Chrome 的速度，而 IE10 只是忽略了它。
我的电脑完全没有延迟，而且它不是最强大的，Intel i5 16gb ram、Ubuntu 12.10、Chrome 24。
也许你证明了 Chrome 加载新内容的速度比 IE 快：P

标签： javascript html google-chrome internet-explorer-10

【解决方案1】：

Chrome 在绘画方面遇到困难，尤其是在 2560x1440 及以上的高分辨率下。许多网站，如 Chrome Web Store、Facebook 等，都表现出明显的滚动延迟。在这些网站上滚动时，IE10 在我的显示器上保持 120 fps。

【讨论】：

把我算作该类别的第二个人。
所以任何不同意你的人都是“狂热的粉丝”？ IE 一直是并且一直是最糟糕的浏览器之一——这就是我（和许多其他人）停止使用它的原因。它几乎在所有方面都比 Firefox/Chrome 慢，而且它的 HTML5 合规性很糟糕。有一段时间我选择了 Firefox，因为它比 IE 好得多。最终我转向了 Chrome，因为它具有出色的 Web 开发原生工具。这不是关于成为“粉丝”。这是关于选择最适合工作的工具。
@xtempore 从 IE10 开始，从纯粹的性能角度来看，没有什么能比得上 IE 的黄油平滑滚动了。如果您有一个高刷新率显示器，它会以 60、120 或 144 fps 流畅滚动。 Surface Pro 上 IE11 的触摸屏响应甚至是 iPad 无法比拟的。其他浏览器卡顿和滞后。作为一个无知的最终用户，我并不关心标准的合规性。开发人员将使他们的网站在拥有 90% 以上市场份额的操作系统上运行。滚动流畅度是唯一对用户重要的因素。
@Locutus：我想你会发现开发者对最流行的浏览器更感兴趣（操作系统无关紧要）——而且浏览器是 Chrome，用户数量是 IE 的两倍（并且还在增长） .我不能说我曾经将“滚动平滑度”视为一项高优先级功能，但鉴于我拥有最新版本的 IE、Firefox、Chrome 和 Safari，我在一个大网页上尝试了所有这些。不能说我注意到任何不同。
@Locutus - 完全同意！！现在是 2015 年，chrome 仍然在性能部门工作。我有一个旧系统（Core 2 Quad 2.4ghz 4gig ram / 1440 x 990 和低级显卡），chrome 的延迟 / FPS / 绘画绝对是 PATHETIC 而 Firefox 超级流畅（对我来说比 IE 好）。

【解决方案2】：

我刚刚解决了一个类似的问题。

显然 Chrome 对样式的重新计算不太聪明，除了速度非常慢，所以我专注于防止它重新计算任何东西。

每当触发滚动事件时，我都添加了“滚动”类，但如果它已经存在，Chrome 会继续重新计算新样式。当我将其修改为：

if (!body.hasClass('scrolled')) { body.addClass('scrolled'); }

Chrome 突然有了显着的加速（仍然没有 IE 或 FF，但比以前好多了）

【讨论】：

【解决方案3】：

这是上网本上的显卡！您将在屏幕上移动的几乎所有东西上体验到类似的效果。我有一个上网本...

您正在测试的网络直到不久前崩溃了 Chrome 浏览器...

【讨论】：

这个“显卡”怎么不落后于IE10呢？