CSS 選擇器引擎:從右到左閱讀
在CSS 世界中,通常假設像.name 這樣的選擇器執行速度比div.name 更快。然而,最近的一些研究結果表明,大多數選擇器引擎都是從右向左讀取的。這引發了關於性能影響和這種方法背後的推理的問題。
從右到左評估
雖然.name 更快的假設確實可能會更好有缺陷的是,整體性能高度依賴於瀏覽器實現和特定文檔結構。儘管如此,大多數現代 CSS 選擇器引擎都遵循從右到左的評估方法。
根據 Gecko 開發者 Boris Zbarsky 的說法,瀏覽器通常透過選擇一個元素並評估所有候選選擇器以確定其是否匹配來進行操作,而不是識別給定選擇器的匹配元素。這種從右到左的方法簡化了遍歷組合器的過程,例如 >或 ,在選擇器內。
簡單選擇器內的遍歷
但是,重要的是要區分從右到左的計算不會向下擴展到簡單選擇器級別每個複合選擇器。例如,在複雜的選擇器div.name[data-foo="bar"]:nth-child(5):hover::after 中,瀏覽器可能不一定會依照下列順序檢查條件:hover、child count、data屬性、名稱類別和類型。
相反,出於效能原因,可能會優先考慮特定的簡單選擇器(例如 ID)。這在 Gecko 的實作中很明顯,首先檢查帶有 ID 的規則以優化匹配過程。
總結
CSS 選擇器引擎讀取的方向通常是正確的 -向左,但其實現方式的具體細節可能因瀏覽器而異。此外,從右到左的評估僅適用於複合選擇器內的組合器,不適用於單一簡單選擇器等級。
以上是CSS 選擇器引擎是否支援從右到左閱讀?的詳細內容。更多資訊請關注PHP中文網其他相關文章!