1、把樣式表置於頂部
2、避免使用css表示式（expression）
表示式的問題就在於它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次。給css表示式增加乙個計數器可以跟蹤表示式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上的計算量。
css表示式是設定動態css屬性的即強調又危險的方法。ie5開始支援，ie獨有。
1//實現每隔一小時切換一次背景顏色
2background-color: expression((new date()).gethours()%2?"#ffffff": "#000000" );
乙個減少css表示式計算次數的方法就是使用一次性的表示式，它在第一次執行時將結果賦給指定的樣式屬性，並用這個屬性來代替css表示式。如果樣式屬性 必須在頁面週期內動態地改變，使用事件控制代碼來代替css表示式是乙個可行辦法。如果必須使用css表示式，一定要記住它們要計算成千上萬次並且可能會對你 頁面的效能產生影響。
3、避免通配選擇器
優化選擇器的原則是減少匹配時間。css選擇器的匹配機制是：從右向左進行規制匹配的！
1#header > a
上面這條規制實際是瀏覽器遍歷頁面所有a元素，並確定其父元素的id是否為header。
1#header a
後代選擇器開銷更大，在遍歷頁面的所有a元素後，會需向上遍歷直到根節點。
由此可知，選擇器最右邊的規制 往往決定了向左移匹配的工作量。故最右邊的選擇規則 稱之為關鍵選擇器。
1.selected *
在匹配所有元素後，再分別向上匹配直至根節點。通常比開銷最小的id選擇器高出·~3個數量級。
4、避免使用@import
引入css的方法有兩種，一種是@import，一種是link
1@import url('位址');
2<
link
href
="位址"
rel="stylesheet"
type
="text/css"
/>
現在絕大部分的**都採用後一種link方式，原因在於
（1）@import先載入html，後載入css
5、避免alphaimageloader濾鏡
alphaimageloader是
ie濾鏡的一種，其主要作用就是對進行透明處理。雖然firefox和ie7以上的ie瀏覽器已經支援透明的png，但是就ie5-ie6而言還是有一定的意義。
1filter：progid:dximagetransform.microsoft.alphaimageloader
2( enabled=true|false , sizingmethod=crop|image|scale , src=surl )
說明：上述語法結構中各引數的意義如下。
enabled：可選項，值是布林值（boolean）true或者false，用來設定或檢索濾鏡是否啟用，值為true時濾鏡啟用，該值是預設值，值為false時濾鏡被禁止。
sizingmethod：可選項，用來設定或檢索濾鏡在物件容器邊界內的顯示方式；crop為剪下以適應物件尺寸；image：預設值，增大或減小物件的尺寸邊界以適應的尺寸；scale為縮放以適應物件的尺寸邊界。
完全避免使用alphaimageloader的最好方法就是使用png8格式來代替，這種格式能在ie中很好地工作。
6、移除無匹配的樣式
（1）刪除無用的樣式，可縮減樣式檔案大小，加快載入速度。
（2）對於瀏覽器，所有樣式規則都會被解析後索引起來，即使是當前頁面無匹配的規則！故移除無匹配的規則，減少索引項，加快瀏覽器查詢速度。
web前端效能優化
01 減少http請求 使用css sprite 合併js css02 使用cdn 當頁面中有很多資源的時候可以從不同伺服器中讀取 設定長的expires時間將直接減少http請求 如果資源設定了expires頭為將來的某個時間,下次訪問時候瀏覽器 發現資源還沒有過期,會直接從快取中讀取,不會再次產...
web前端效能優化
一 網路相關的一切，包括dns解析 http請求等等 二 web優化，就是前端頁面相關部分，也就是我們日常擼 能夠做到的一些 1 設定dns多級快取 瀏覽器快取，系統快取，路由器快取，ips伺服器快取，根網域名稱伺服器快取，頂級網域名稱伺服器快取，主網域名稱伺服器快取。2 dns負載均衡 dns重定...
前端web效能優化
使用cdn 進行dns預解析 每個請求都需建立連線消耗一定時間，請求數越多則網頁載入時長越長。我們可以將資源盡可能的合併從而減少請求 合併，使用sprites精靈圖 css 檔案合併 動態指令碼載入 defer html解析完成後才執行，按載入順序依次執行 async 載入完立即執行，和載入順序無關...