PIE.js 性能低下答案

【问题标题】：PIE.js low performancePIE.js 性能低下
【发布时间】：2012-06-01 07:28:28
【问题描述】：

我目前正在开发一个用于自动 PIE 附件的插件。
它遍历所有文档 CSS 样式表，通过 indexOf 检查 CSS3 属性，然后调用 PIE attach 方法以防找到当前选择器。
主循环是这样的：

    for (var j = 0, length2 = styleSheet.rules.length; j < length2; j++) {
      rule = styleSheet.rules[j];
      // the replacedProperties is a simple array
      // with string values for css properties - border-radius and so on
        $.each(replacedProperties, function(index, property) {
            if (rule.style.cssText.indexOf(property) !== -1) {
                try {
                    $(rule.selectorText).each(function() {
                       PIE.attach(this);
                    });

                 } catch(e) { }
                    return false;
                 }
            }

        });
    }

这实际上很慢，在 IE8 和 IE7 中的 CSS3 重页面上运行长达 2 秒。
问题是，我能以某种方式提高这个循环的性能吗？
PIE.js 实际上优化了重复附件，因此检查 PIE 是否已附加不会做任何事情。
遗憾的是，$.fn.detach 的标准分离技术不适用于 PIE（尽管我没有尝试过香草版本）。
如果有任何答案，我将不胜感激。

【问题讨论】：

您为什么要这样做？ PIE 会自动执行此操作。我更喜欢pie.htc，这只在IE中触发，对其他浏览器没有额外的请求。
但它只用 PIE.attach 附加自己，不是吗？
这样做的原因是让设计人员和开发人员不必手动为 PIE 附件添加类。
它不会自动将自身应用于所有 DOM 元素。
或者我从 API 中遗漏了一些东西。

标签： javascript css internet-explorer css3pie

【解决方案1】：

我建议你阅读文档，尤其是关于 pie.js：http://css3pie.com/documentation/pie-js/

现在我使用pie.htc，除了有一些缺点之外，它还有更多优点，所以这是首选的解决方案。

您可以通过声明behaviour(/absolute-path-to-pie.htc); 来定义应直接在css 中处理哪些样式-它所属的位置。这比迭代所有样式表和样式规则然后附加饼图要快得多。您也可以轻松地将其放入条件样式表中。我认为这应该可以解决您的问题 - 无需手动迭代所有样式。

【讨论】：

但是您仍然必须为每个现有元素指定行为。
动态附加 pie.js 更加灵活 - 您不必将这种现代化逻辑放入 css 中，只需添加一个简单的插件即可。这只是为了灵活性而牺牲性能的问题。
只需在你的 CSS 的 mixins 中添加一个引用 pie.htc 的行，然后当你包含边框半径时，它只会添加适当的 CSS。如果你使用 SASS，你可以扩展你的类，使 CSS 非常少来实现这一点。
好吧，我喜欢性能和灵活性。拆分设计逻辑并将其部分放入一些神秘的 js 中，两者都不是。更不用说可怕的可维护性了。使用结构良好的 css 这很容易。
问题是，我们不使用mixins。实际上，从 pie.htc 转换为 pie.js 的决定不是由我做出的，而是由让我想出这个插件的设计师做出的。所以我只是想尽最大努力利用这种情况。

【解决方案2】：

这里是 PIE 的忠实粉丝。但是，在性能方面，成本比人们想象的要大。最近一直在一个怪物PC上开发一个网站，可以说，运行带有IE8的Windows7和一些用于测试的VM。测试了 PIE 1.0 和 PIE 2.0 beta。虽然在项目早期，并且只有几十个元素附加了 PIE 行为，但 IE 似乎在向下滚动以及使用 jQueryUI 效果和动画时会卡住。使用 pie 2.0，关闭民意调查似乎可以提高性能，但首先会破坏使用 pie 的目的……您可以获得所需的视觉外观，但没有任何效果。最后，需要考虑客户端的性能成本。 2010 年，Google 报告说几乎 48% 的网络客户端使用 IE，主要是 IE7(winXP)。尽管此后数字发生了很大变化，但有些人根本没有升级的手段。所有的事情放在一起，通过 PIE 提供 css3 内容可能会对客户产生很大的影响......不知道 100% 它将如何表现，您的客户在访问您的网站之前可能会三思而后行，因为它的表现并不顺畅（我知道我会）。所以，至少对于这个项目。我正在放弃 PIE，并恢复到良好的旧 PNG。到目前为止，包含我需要用渐变和圆角设置样式的元素的精灵比 PIE 小。毫无疑问，它会变大，但不会像以前那样影响性能。只是为了记录，我不知道浏览器是如何构建的，我也不在乎，但是伙计……他们用 IE 搞砸了。

【讨论】：