7

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

为了向您展示差异，我正在使用 iPhone 记录上网本的屏幕，同时向下滚动 Chrome 网上商店——这是 Google 自己创建的。

检测设备

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

结果

  1. Google Chrome 24（无扩展）向下滚动 Webstore： http ://www.youtube.com/watch?v=njkRqiNJPIY
  2. 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 上网本上保留了这种平滑度）

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

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

4

3 回答 3

11

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

于 2013-02-21T10:26:26.343 回答
2

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

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

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

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

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

于 2013-08-16T02:11:41.313 回答
-2

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

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

于 2013-02-08T00:08:55.850 回答