跨浏览器梯度:浏览器性能问题？

Question

我试图给这个问题贴上标签[subjective] (它不让我回答)，因为我意识到它可能是无法回答的，可能是我不知道如何找到的常识，或者可能是一个意见问题。

几个月来，我一直在使用已编译(较少)的样式表构建商业网站，每次将背景梯度应用于元素时都遵循如下规则：

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内嵌渐变，从开始和结束颜色编译的更少，是为IE9。否则，IE9将显示带有非零border-radius的元素圆角以外的矩形IE过滤器梯度。( CSS中的其他地方设置为.ie9 a, .ie9 div { filter: none !important; }，仅用于IE9的IE过滤器。)

我的问题：我担心可能存在的性能问题，并希望学习如何充分研究它们，或者如果这些问题很小，就可以永久地解决这些问题。例如，本站根据所有的水平和垂直梯度、菜单项、标题、按钮和悬停属性，21次使用这样的背景声明。

在这些站点上，我没有性能问题的证据，但我如何确定下列假设问题是否会导致性能问题，如何调查它，以及如何重新编码以避免它？

• 更复杂的CSS会导致更慢的呈现时间吗？所有这些网站都被设计成对移动友好，所以我担心渲染，或者解析，可能是旧的移动浏览器上的一个问题。
• 为了简化CSS，并避免过度使用浏览器类ie9 (我们通常使用modernizr进行特征检测)，SVG梯度和CSS梯度声明保持在同一个规则集中。对于每个具有梯度的元素，使用单独的IE9规则(带有SVG梯度)的CSS可能要复杂得多。在我决定保持CSS的简单性时，我担心上面的代码可能会两次绘制背景，这可能会导致性能问题。
• 对于已经理解CSS背景梯度的非IE浏览器来说，解析内联SVG梯度是否很麻烦？这是在每次呈现页面时，还是在CSS最初读取和解析时，都会导致性能下降？

如果我犯了任何严重的错误，遗漏了任何重要的浏览器，或者忽略了任何其他性能问题，我当然愿意纠正。如果有人感兴趣，我会发布较少的代码来编译SVG梯度，尽管它与我的问题无关。

Answer 1

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

我的建议是首先检查Firefox或Chrome网卡下的加载时间。

你问

更复杂的CSS会导致更慢的呈现时间吗？所有这些网站都被设计成对移动友好，所以我担心渲染，或者解析，可能是旧的移动浏览器上的一个问题。 对于已经理解CSS背景梯度的非IE浏览器来说，解析内联SVG梯度是否很麻烦？这是在每次呈现页面时，还是在CSS最初读取和解析时，都会导致性能下降？

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

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

我不太熟悉SASS，因为我理解JavaScript做的编译工作，这让我想知道为什么人们选择更少而不是SASS。这可能是近视。但是我个人更喜欢SASS而不是更少，因为所有的编译都发生在服务器端(但无论如何都是不相干的)。

假设更少的工作类似于SASS，我建议专门为背景梯度编写一个Mixin，然后根据需要将它包含到样式表中。可能会为IE特定的CSS单独创建一个较少的文件。