1

我一直在玩 LESS，看看如何转换我在工作中管理的网站。

当我学习behavior: url(...blah)css 的能力时，我认为我已经读过出于性能原因最好尽可能少地使用它（我现在在任何地方都找不到它，所以不确定它是否仍然有效）。

所以考虑到这个假设，我有点担心将 CSS 转换为 LESS Mixin。这真的是对性能的影响，还是我可以安全地做到这一点而不必担心网站 UI 的速度变慢？

我将要转换的示例...

.FullRoundedBorder
{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/Content/CSS/PIE/PIE.htc);
}

对于那些还没有看过它的人来说， PIE是一个很棒的圆形边框跨浏览器功能插件（主要是它修复了 IE 6-8）。

4

3 回答 3

2

使用“行为”属性本身并不是主要的性能问题——您可能一直在考虑“表达”，这确实对性能非常不利。

但是，您确实需要检查您引入的特定 .htc 的性能。本质上，.htc 文件是在 CSS 选择器匹配元素时执行的 JavaScript 片段。这意味着选择器匹配的元素越多，脚本运行的次数就越多。

对于像 PIE.htc 这样的复杂脚本，很容易在太多元素上使用它，从而导致运行时出现明显的延迟。与任何其他脚本一样，您需要仔细考虑应用它的范围，当然，在应用它之后还要测试您网站的性能。

我对 PIE.htc 的经验是，在大约 15 个或更少的元素上使用它并不明显，但除此之外，您会开始注意到延迟。您通常可以采取一些措施来减轻影响，例如使用-pie-lazy-init。

于 2012-10-04T21:03:17.267 回答
0

是的，PIE 会减慢 IE6-8 中的 UI。叠加的效果越多，影响就越大。它不应该影响其他浏览器。

去年我在一个（大！）项目中使用了 PIE，以在 IE6-8 中获得一些效果，但在今年重新访问该项目时，我决定放弃所有 PIE 的使用。我发现它不稳定且不一致——例如，它会随机无法呈现“立即付款”按钮。因此，IE 用户将随机无法支付账单。我切换回 Modernizr 并使用 < IE 9 的图像后备。这个故事的寓意是：PIE 看起来很棒，但要谨慎使用它，并且只用于非关键元素。出错时很难调试。

如果您发现您的 UI 太慢，您也可以轻松尝试并禁用它。如果你的 mixin 很好，它应该只是几行代码。

于 2012-10-04T21:03:02.167 回答
-1

我与 Less 进行了广泛的合作。我喜欢它如何将大型 CSS 分解成更具逻辑性和可读性的块。有几点需要考虑：

1）您将处理较少的服务器端还是客户端？我更倾向于减少 UI/浏览器的负载，因为您根本无法控制用户正在运行的机器、浏览器的类型，并且它会在您的 UI 实现中增加更多的故障点。越简单总是越好。如果您的 UI 是针对少量受众的，那么您应该不会看到性能受到影响。在大多数情况下，当纯 CSS 太大而无法轻松维护和阅读并因此接受轻微的性能损失时，我将使用 Less，尤其是在用户群微不足道的情况下。对于高流量网站，我可能会重写或转换回 CSS 并发布直接的 CSS。

2）Less真的有必要吗？你是在加载一堆翻译代码还是在你的服务器上运行一个额外的进程，这样你就不必写几行额外的 CSS 了？？？在我看来，这还不够合理。当我看到开发人员加载整个库只是因为他们不想编写“getElementByID()”纯原生 JavaScript 时，我经常质疑使用其他“让你的生活更轻松”的库/工具，如 JQuery。

一切都有它的位置，它在项目/实施中使用。我建议列出优点，然后消除那些可以通过本机浏览器功能（纯 CSS 和 JS）轻松实现的优点。更小更轻总是更好更快，特别是如果您也在移动和旧平台上运行。

我希望这会有所帮助。

于 2012-10-04T20:57:28.683 回答