2

我试图标记这个问题[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;
}

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

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

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

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

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

4

1 回答 1

2

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

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

您询问

更复杂的 CSS 是否会导致渲染时间变慢？所有这些网站都设计为对移动设备友好，所以我担心渲染和解析可能是旧移动浏览器上的问题。

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

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

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

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

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

于 2013-03-18T20:16:18.967 回答