高效能的css：即**檔案載入更快，**執行的速度更快，讓頁面盡快地展現在終端使用者的面前。
1、使用高效地css選擇器
能被瀏覽器快速解析和匹配的css選擇器就是高效地選擇器。
css選擇器的匹配原理和我們習慣的匹配過程是相反的，它是從右到左進行匹配的。
高效的選擇器意味著瀏覽器匹配選擇器時更快速，匹配查詢次數更少。
在定義選擇器時，應該盡量讓第一次匹配時的數量達到最少，並且讓整體的匹配查詢次數最少。
css選擇器定義的最佳實踐：
1）避免使用萬用字元：萬用字元使用*號表示，它用來匹配頁面中所有的元素。它匹配的計算量非常大。
/*避免使用
*/*
2）避免使用標籤選擇器和單個屬性選擇器作為關鍵選擇器：在乙個選擇符中，最右邊的選擇器是關鍵選擇器。關鍵選擇器決定著瀏覽器初始匹配的元素數量，它也是整個選擇符整體匹配次數的最主要決定者。
/*避免使用
*/.references p.list div .references p.list [data-link="red"]
3）不要在id選擇器前使用標籤名：在id選擇器前新增標籤名是多餘的。
/*避免使用
*/div#page_index
/*推薦使用
*/#page_index
/*推薦使用，合併後的樣式
*/p.reader-title
類似的樣式還有background、border、margin、padding、text、list-style、transform、transition、animation等。
3）定義簡潔的屬性值
有些屬性值可以使用更簡潔的方式來展現，比如顏色和尺寸。
p.reader-title
/*推薦使用，簡潔的屬性值
*/p.reader-title
4）合併相同的定義
在css**中，定義的規則會有相同的部分。可以合併這些相同的樣式定義，達到**重用和縮減**的目的。
.library-title .search-title
/*推薦使用，合併後的樣式**
*/.library-title, .search-title .library-title .search-title
在css中，有些屬性是可以繼承的，比如color、font、line-height、list-style、text-align、text-index、text-transform等。如果某個父元素的多個子元素上設定了相同的可繼承的屬性定義，則可以把相同的定義合併，且設定在父元素上。
5）刪除無效的定義
無效的定義包括無效的規則及無效的樣式屬性。
無效的規則一般是在開發過程中引入的，從直觀上是無法判斷某個規則是否已經失效。可以使用工具來進行查詢，比如，用chrome瀏覽器自帶的開發工具就可以查詢css**中無效樣式。
無效的樣式屬性指的是設定的樣式並沒有起作用。比如設定內邊距為負值，以及一些因手誤引起的屬性值拼寫錯誤。同樣，使用chrome瀏覽器自帶的開發工具就可以檢測無效的屬性定義。
/*無效的樣式屬性
*/.invalid-css
4、其他css高效能實踐
1）避免使用@import：有開發者詳細分析了使用@import的缺點：
2）避免使用ie瀏覽器獨有的樣式：濾鏡和css表示式
濾鏡的使用會在載入時阻塞瀏覽器的載入和渲染，並會增加額外的記憶體開銷。
.image-title
css表示式的作用是動態設定css屬性。使用css表示式不只是有相容問題，還有效能問題。例如，在瀏覽器大小改變、視窗滾動時，會使得瀏覽器頻繁計算，效能損耗極大。
<
div
id="odiv"
style
="background-color: #cfcfcf;position: absolute;
left: expression(document.body.clientwidth/2-odiv.offsetwidth/2);
top: expression(document.body.clienthight/2-odiv.offsethight/2)"
>
example div
div>
高效能CSS（三）
css選擇器對效能的影響源於瀏覽器匹配選擇器和文件元素時所消耗的時間，所以優化選擇器的原則是應盡量避免需要消耗更多匹配時間的選擇器。而在這之前我們需要了解css選擇器匹配的機制，如例子的子選擇器規則 header a我們中的大多數人都是從左到右的閱讀習慣，可能也會習慣性的設定瀏覽器也是從左到右的方式...
高效能css動畫
關於流暢度，主要體現在前端動畫中，在現有的前端動畫體系中，通常有兩種模式 js動畫與css3動畫。js動畫是通過js動態改寫樣式實現動畫能力的一種方案，在pc端相容低端瀏覽器中不失為一種推薦方案。而在移動端，我們選擇效能更優瀏覽器原生實現方案 css3動畫 目前對提公升移動端css3動畫體驗的主要方...
CSS效能分析，如何優化CSS提高效能
其實，不規範的css會導致很多效能問題，這些問題可能在一些小的專案中不夠明顯，但是在大型專案中就會顯現出來。在優化css之前我們需要了解下css是怎麼進行工作的，我們都知道css是由選擇器，屬性和屬性值構成的。我們可能會這樣寫上一行 css con loulan1 p span html div c...