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

回答

相關問題