跨浏览器渐变：浏览器性能问题？

Question

我试图标记这个问题[subjective]（它不会让我这样做），因为我意识到它可能无法回答，可能是我不知道如何找到的常识，或者可能是意见问题。

几个月来，我一直在使用已编译 (LESS) 样式表构建商业网站，每次将背景渐变应用于元素时，都会使用如下规则：

body {
  background: #592a0e;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzJkMTUwNyIgLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4NTNmMTUiIC8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cpIiAvPjwvc3ZnPg==);
  background: -webkit-gradient(linear, 0 0, 100% 0, from(#2d1507), to(#853f15));
  background: -webkit-linear-gradient(left, #2d1507, #853f15);
  background: -moz-linear-gradient(left, #2d1507, #853f15);
  background: -ms-linear-gradient(left, #2d1507, #853f15);
  background: -o-linear-gradient(left, #2d1507, #853f15);
  background: linear-gradient(left, #2d1507, #853f15);
  filter: progid:dximagetransform.microsoft.gradient(StartColorStr='#2d1507', EndColorStr='#853f15', GradientType=1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2d1507', EndColorStr='#853f15', GradientType=1)";
  zoom: 1;
}

在 LESS 中从开始和结束颜色编译的 SVG 内联渐变适用于 IE9。否则 IE9 将显示矩形 IE 过滤器渐变超出具有非零 border-radius 的元素的圆角。 （CSS 中的其他地方设置为 .ie9 a, .ie9 div { filter: none !important; } 以仅抑制 IE9 的 IE 过滤器。）

我的问题：我担心可能出现的性能问题，并想了解如何全面调查这些问题，或者如果这些问题很小以消除这些担忧好的。例如，this site 基于所有水平和垂直渐变、菜单项、标题、按钮和悬停属性，使用了这样的背景声明 21 次。

我没有证据表明此类网站存在性能问题，但我如何确定以下假设性问题是否会导致性能问题，我该如何调查它，以及我如何重新编码以避免它？

• 更复杂的 CSS 是否会导致渲染时间变慢？所有此类网站都设计为适合移动设备使用，因此我担心渲染和解析可能会在旧版移动浏览器上成为问题。
• 为了简化 CSS，并避免过度使用浏览器类 ie9（我们通常使用 modernizr 进行特征检测），SVG 渐变和 CSS 渐变声明保持在同一个规则集中。替代方案将是更复杂的 CSS，为每个具有渐变的元素使用单独的 IE9 规则（带有 SVG 渐变）。在我决定保持 CSS 简单时，我担心上面的代码可能会绘制两次背景，这可能会导致性能问题。
• 对于已经了解 CSS 背景渐变的非 IE 浏览器，解析内联 SVG 渐变是否繁琐？这会导致每次呈现页面时性能下降，还是仅在最初读取和解析 CSS 时导致性能下降？

如果我犯了任何严重错误、遗漏了任何重要的浏览器或忽略了任何其他性能问题，我当然愿意更正。如果有人有兴趣，我会发布编译 SVG 渐变的 LESS 代码，尽管它与我的问题没有具体关系。

Answer 1

开始使用浏览器检查器工具

我的建议是首先在 Firefox 或 Chrome 的“网络”选项卡下检查加载时间。

你问过

更复杂的 CSS 是否会导致渲染时间变慢？所有这样的 网站被设计为适合移动设备，所以我担心渲染， 也许解析可能是旧移动浏览器的问题。

对于已经了解 CSS 背景的非 IE 浏览器 渐变，解析内联 SVG 渐变是否繁琐？做这个 每次呈现页面时都会导致性能下降，或者只是 最初读取和解析 CSS 的时间？

正如你所说，有点暗示。但我的建议

显然，CSS 文件越大，加载所需的时间就越长。有时大量的 CSS 是不可避免的。您可以查看 CSS 压缩器。或者将您的样式拆分为单独的样式表，并根据使用的设备仅加载必要的样式。

我对 LESS 不是很熟悉，因为我了解 JavaScript 会进行编译，这让我想知道为什么人们选择 LESS 而不是 SASS。这可能有点短视。但我个人更喜欢 SASS 而不是 LESS，因为所有编译都发生在服务器端（但无论如何都无关紧要）。

假设 LESS 的工作方式类似于 SASS，我建议编写一个专门用于背景渐变的 Mixin，然后根据需要将其包含到您的样式表中。也许为 IE 特定的 CSS 制作一个单独的 LESS 文件。