Angular的組件風格封裝是否有性能優勢？

我一直在閱讀有關Angular 2的style encapsulation方法，您可以直接在組件中編寫樣式。Angular的組件風格封裝是否有性能優勢？

此方法可以使用本機陰影dom或模擬的陰影。對組件特定的樣式使用哪些性能優勢？

2017-01-11 BenRacicot

對於仿真沒有性能好處。這只是樣式封裝，可以自動將樣式範圍限定到特定組件。

仿真

隨着AOT風格重寫在構建時進行，否則它需要相當長一段時間，在運行時進行分析和重寫的樣式。

樣式然後被添加到<head>元素。

本地影子DOM

有一些性能優勢，因爲在某些情況下，瀏覽器就可以知道了一些必要的重新渲染是本地的一個組成部分，產生會導致整個頁面重新渲染。我不知道一個具體的例子。

2017-01-11 15:44:24

太棒了！現在我們到了某個地方......而不是投票結束這個問題，因爲有些混蛋......我看到基於開發的封裝風格的好處，但是在文檔中沒有表達的性能優勢將成爲採用採用任何方法的工作流程都具有最大的優勢。 – BenRacicot

仿真不會提供性能優勢，原生並沒有太多用處，因爲主題故事太弱。 Angular不支持CSS變量，即使這些變量太有限恕我直言。此外，perf的好處並非特定於Angular，而是影響DOM。恕我直言，重複Angular中的所有瀏覽器文檔是沒有意義的。 –

很遺憾，但是仿真樣式封裝存在性能問題。事情是，Angular使用屬性來應用CSS規則。而且它們的使用效率不高，特別是在當前版本的Edge中。

所以在2017年，也許你應該避免在開發大項目時使用Angular風格的封裝。

在這裏您可以檢查issue的狀態。

2017-10-02 16:01:21

回答