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;
}

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

我的问题： 我担心可能存在的性能问题，并希望了解如何对其进行全面调查，或者如果这些问题很小，可以解决这些问题好。例如，this site使用这样的背景声明21次，基于所有水平＆amp;垂直渐变，菜单项，标题，按钮和悬停属性。

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

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

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

Answer 1

使用浏览器检查工具开始

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

您问过

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

对于已经了解CSS背景的非IE浏览器   渐变，解析内联SVG渐变负担？做这个   每次呈现页面时都会导致性能下降，或者只是   什么时候最初阅读CSS＆amp;解析？

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

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

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

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

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

1 个答案: