渲染優化和兄弟選擇器

Question

WebKit瀏覽器具有用於樣式渲染的內置優化技術，「這樣就不必爲頁面上大約60％的元素匹配樣式。」

但是，如果優化完全關閉整個頁面「任何兄弟選擇在任何地方樣式...遇到這包括+選擇和選擇像:first-child和:last-child。」

有誰知道禁用此優化的選擇器類型的完整列表？

-

更多信息

• 優化在大里Garsiel的研究討論了關於瀏覽器內部：How Browsers Work。

• 這裏有同胞選擇全部引自Dave Hyatt，誰顯然撰寫的瀏覽器代碼：「必須有在使用中根本沒有同胞選擇的WebCore簡單地拋出遇到任何同級選擇當一個全局開關並禁用樣式共享。對於整個文檔，它們包括+選擇器和選擇器，如：first-child和last-child。「

• 這個報價似乎來自一個文章悅在2005年寫了下面他討論了比較詳細（同一來源前面）：
  
  「的WebCore（在即將到來的Safari瀏覽器的版本）有一個非常酷的優化，我想出了甚至不必計算適用於元素的聲明集，實踐中的這種優化結果甚至不必爲頁面上大約60％的元素匹配樣式，優化背後的想法是識別當頁面中的兩個元素將通過DOM（和其他狀態）檢查具有相同樣式時，只要可能就簡單地在這兩個元素之間共享前端樣式信息。「

• 這個article by Nate Koechley更詳細地討論了該算法。他總結了：
  
  「在網絡開發中，通常有6種不同的類似方式來完成同樣的事情，什麼使得優秀的網頁開發人員不斷選擇最好的幾乎不可區分的路徑。更全面地瞭解瀏覽器的內核，並將幫助我們選擇最好的方法。「

• 凱悅還討論了優化這個W3C mailing list archive

• 它還附帶了簡短從瑞安Kinal一個Stack chat：「哇只是哇我永遠不會再使用其他兄弟選擇。「

我特別想知道：

• 子選擇是否也關閉優化

• 三叉戟/ IE是否使用任何類似的優化

• 是否任何測試都會顯示它對渲染性能有多大的差異

Answer 1

我沒有一個完整的列表，但是這個mozilla和Servo的文本可以幫上忙，我想。款式更新

屬性的

WebKit在處理改變

如果元素還沒有一種風格重新計算標記，如果任一屬性是id屬性或者有涉及選擇屬性，元素被標記爲樣式重新計算。沒有試圖再次檢查這些選擇器是否與該元素有關，並且沒有嘗試處理在此階段涉及'~'和'+'的案件。當類屬性發生變化時，還會有一個單獨的鉤子，除此之外，無條件地將該元素標記爲需要樣式重新計算。再次，沒有嘗試處理'~'和'+'。 在這些情況下都沒有嘗試優化選擇器後代的匹配。

狀態變化

有在WebKit的狀態變化沒有統一的設置。對於通過Gecko中的布爾狀態處理的每個僞類，選擇器匹配都有一個專用函數，它可以調用它來測試該僞類是否匹配的元素。元素內部對該狀態的更改負責將該元素直接標記爲需要樣式重新計算。 再一次，沒有試圖優化選擇器後代的匹配或處理'+'或'~'。在這裏有一些優化，類似於壁虎爲:hover覆蓋:hover,:active,和一些關於拖動。插入的

處理和刪除

的RenderStyle有表明其是否孩子們通過各種結構性僞類「+」或「~」組合程序的影響和標誌。在DOM突變上，更改後的第一個受影響元素（以子列表順序）被標記爲需要樣式重新計算，或者如果可能需要重新計算，則該父元素的第一個子元素被標記爲父元素的第一個子元素。如果更改之前的更多事情可能需要重新計算，則父級被標記爲需要重新計算樣式，這將重新計算其所有孩子。 在所有這些情況下，當實際重新計算元素的樣式時，會檢查其子元素是否受'+'或'~'的影響。如果是，則如果任何孩子被標記爲需要樣式重新計算，則後面的孩子或後面的所有孩子（取決於是否涉及'+'或'~'）也被標記爲需要樣式重新計算。我想，這裏有多個'+'的鏈條。

結果是，在某些情況下，WebKit在比Gecko更多的元素上結束重新計算樣式，據我所知，但在另一些情況下，它最終在更少的元素上重新計算樣式。例如，給定一個類似「.foo ~ span」的選擇器和一個將類從「foo」改爲「bar」的div，Gecko將重新調整div的所有後續兄弟，而WebKit根本不會做任何工作，如果沒有「span 「孩子，因爲在這種情況下，它永遠不會標記父母受'+'影響。我不確定這會影響插入行爲的程度，看起來兩者應該更相似。 Somehow WebKit似乎比Gecko在HTML5單頁規範腳本上做得更好，而且我無法弄清楚爲什麼在這一點上。也許這只是因爲它的風格重新計算似乎比Gecko的實際運行便宜得多。

另一個結果是涉及個體屬性和狀態變化的工作比Gecko少得多，代價是更多的風格重新計算。涉及DOM插入/刪除的工作大致相同。

source

Answer 2

我還沒有看到任何這樣的問題與選擇，直至選擇風格與沉重的圖像，需要時間來加載。

如果CSS是不應該面對任何一種選擇的任何問題，內置的網頁顏色，根據上選擇W3規範..

下面的規則是一個類似於前面例子中，除了它添加了一個類選擇器。因此，當H1具有類=「開門紅」僅發生特殊格式：

h1.opener + h2 { margin-top: -5mm } 

這樣的規則規範，但必須有WebKit瀏覽器的一些bug，它停止在等待具體的選擇。