Question

我一直在玩LESS，想要转换我在工作中管理的网站。

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

因此，考虑到这一假设，我有点担心将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）。

Answer 1

使用'behavior'属性本身并不是一个主要的性能问题 - 你可能一直在考虑'表达'，这对性能来说确实非常糟糕。

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

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

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

Answer 2

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

我去年在一个（大！）项目中使用PIE来获得IE6-8中的一些效果，但是在今年重新审视该项目后，我决定废弃所有PIE的使用。我发现它是片状和不一致的 - 它会随机地无法呈现“立即付款”按钮。因此，IE用户将随机无法支付账单。我切换回Modernizr，其图像后退为＆lt; IE 9.故事的寓意是：PIE看起来很棒，但是谨慎地使用它，仅用于非关键元素。当它出错时很难调试。

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

Answer 3

我和Less一起广泛合作。我喜欢它如何将大型CSS分解为更具逻辑性和可读性的块。需要考虑的一些事项：

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

2）真的不太必要吗？您是否正在加载一堆翻译代码或在服务器上运行额外的进程，这样您就不必再编写一些额外的CSS了？在我的意见中，这不足以说明理由。当我看到开发人员加载整个库只是因为他们不想编写“getElementByID（）”纯本机JavaScript时，我常常质疑使用其他“让生活变得简单”的库/工具，如JQuery。

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

我希望这会有所帮助。

在LESS Mixins中实现css行为属性

3 个答案: