css - 跨浏览器渐变 : browser performance issues?

Question

我试图将这个问题标记为[主观](它不会让我这样做)，因为我意识到它可能无法回答，可能是我不知道如何找到的常识，或者也许是一个意见问题。

几个月来，我一直使用编译的(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;
}

IE9 中提供了 SVG 内联渐变，从开始和结束颜色中以 LESS 编译。否则，IE9 将显示超出边框半径非零元素圆 Angular 的矩形 IE 滤镜渐变。 (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 中“网络”选项卡下的加载时间。

你问了

Does the more complicated CSS lead to slower rendering times? All such sites are designed to be mobile-friendly so I'm worried the rendering, and maybe the parsing, may be an issue on older mobile browsers.

For non-IE browsers, which already understand the CSS background gradient, is parsing the inline SVG gradient burdensome? Does this cause a performance degradation every time a page is rendered, or just when the CSS is originally read & parsed?

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

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

我对 LESS 不是很熟悉，因为我知道 JavaScript 负责编译，这让我想知道为什么人们选择 LESS 而不是 SASS。这可能有点近视。但我个人更喜欢 SASS 而不是 LESS，因为所有编译都发生在服务器端(但无论如何都是无关紧要的)。

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