PIE.js低性能

我目前正在对自然而然PIE附件插件。
它通过的indexOf遍历所有文档CSS样式表，对CSS3属性的检查，然后调用PIE附上情况下，它开创任何当前选择的方法。
主循环是这样的：PIE.js低性能

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工作（虽然我还没有尝试过的香草版）。
我会非常感谢任何答案。

来源

2012-06-01 opportunato

你为什么要这么做？ PIE自动执行。我更喜欢'pie.htc'，这只能在IE中触发，并没有其他浏览器的附加请求。 – Christoph

但它只附带PIE.attach，不是吗？ – opportunato

其原因是让设计人员和开发人员无需手动添加PIE附件类。 – opportunato

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

现在我用pie.htc和除了具有一些缺点，长谷更有优势，所以这是该preferrable解决方案。

您可以定义，它的风格应该直接在CSS处理 - 它属于通过声明behaviour(/absolute-path-to-pie.htc);。迭代所有样式表和样式表，然后粘贴饼图会更快。你也可以很容易地把它放到一个条件样式表中。我认为这应该可以解决您的问题 - 无需手动迭代所有样式。 PIE的

来源

2012-06-01 09:38:36 Christoph

但是您仍然必须为每个现有元素指定行为。 – opportunato

dinamically附加pie.js更加灵活 - 您不必将这个现代化逻辑放入css中，您只需添加一个简单的插件即可。这只是一个牺牲灵活性表现的问题。 – opportunato

只需在mixin中添加一行引用pie.htc的CSS，然后当您包含边界半径时，它只会添加到适当的CSS中。如果你使用SASS，你可以扩展你的课程，使CSS达到最小化。 –

大风扇在这里。然而，就性能而言，成本比人们想象的要大。最近在一个怪物PC上开发一个网站，可以说，运行Windows7和IE8以及一些虚拟机进行测试。测试了PIE 1.0和PIE 2.0 beta。尽管在项目早期，只有几十个元素附加了PIE行为，但IE似乎在向下滚动时以及使用jQueryUI效果和动画时窒息。使用饼图2.0，关闭民意调查，似乎可以提高性能，但是首先会破坏人们使用饼图的目的......您可以获得理想的视觉效果，但不会产生任何效果。最后，需要考虑客户端的性能成本。在2010年，谷歌报告称，几乎48％的网络客户端使用IE浏览器，主要是IE7（winXP）。尽管数字发生了很大的变化，但有些根本没有升级的手段。所有事情放在一起，通过PIE传递css3内容可能会对客户产生很大的影响......不知道100％会如何表现，您的客户在访问您的网站之前可能会三思而后行，因为它不会表现得顺利（我知道我会）。所以，至少对于这个项目。我正在放弃PIE，并恢复到那个古老的PNG。到目前为止，包含我需要使用渐变和圆角进行样式设计的元素的精灵比PIE更小。毫无疑问，它会变得更大，但它不会像以前那样影响性能。为了记录，我不知道浏览器是如何构建的，我也不在乎，但是人......他们用IE浏览器大爆炸。

来源

2013-10-12 14:13:00 man

回答

相关问题