5

不确定如何对此进行测试，但是通过使用 Modernizer.load 的查询加载 CSS 样式表是否有任何性能提升，而不是仅在同一样式表中使用 CSS 类名覆盖规则。

例如，如果设备支持触摸，那么我需要加载不同的布局，这样做是否更快...

{
  test: Modernizr.touch,
  yep : 'css/touch.css',
  nope: 'css/base.css'
}

或者覆盖同一个样式表中的样式...

.container { width: 50% }

.touch .container { width: 100% }

似乎差异归结为额外查询的速度与拥有一个大 CSS 文件的重量？

4

2 回答 2

0

你需要了解你在这里有 3 个细节。

  1. 对服务器的调用。

  2. 计算所有父样式的浏览器时间

  3. 文件的重量。

所以答案是。

如果您在属性之间没有换行符的情况下编写 css，则 1 个大文件将比 2 个文件更大。并且是对重量的回答，因为 1 文件更好。

如果您要使用 .touch 类制作整个页面，则更需要计算带有类的文件。

所以，我要做的是只调用一次服务器并制作一个文件，因为最好将所有样式一起加载，并且对服务器的调用（重要的时间值）将很快

于 2013-02-14T16:53:51.797 回答
0

我认为这两种选择都是完全有效的。

如果有大量特定于触摸的 CSS 代码，那么我会说是的，使用 Modernizr 将它们引入以避免非触摸浏览器的额外负担。

但是，我的偏好是通常对这种事情使用覆盖样式。

这样做的原因是，使用 Modernizr 选项，您将延迟触摸样式的加载，因为在加载 Modernizr 脚本并准备好运行之前，它无法进行 Modernizr 测试。

因此，与作为主页面加载的一部分加载并准备好进行初始渲染相比，它仅在页面加载后加载，并且可能不会立即准备好。

这样做的结果可能是在加载触摸样式之前加载和显示页面。不理想。

这并不是要打击 Modernizr——它是一个很棒的工具——但如果你可以在不使用它的情况下做你需要做的事情，它通常会更好。

于 2013-02-15T08:00:00.550 回答