前端效能優化之CSS詳細解讀

2022-07-15 14:57:17 字數 1299 閱讀 7014

外部的css檔案中使用@import會使得頁面在載入時增加額外的延遲。

什麼是alphaimageloader?ie獨有屬性,用於修正7.0以下版本中顯示png的半透明效果。

解決方案:1、png8格式來代替,這種格式能在ie中很好地工作。

2、確實需要使用alphaimageloader,使用下劃線_filter,使ie7以上版本的使用者無效。

例:background-color:expression((newdate()).gethours()%2?"#ffffff":"#000000");

css表示式是動態設定css屬性的強大(但危險)方法。internet explorer從第5個版本開始支援css表示式。

問題:在頁面顯示和縮放、滾動、移動滑鼠時都會要 重新計算一次。給css表示式增加乙個計數器可以跟蹤表示式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上的計算量。

解決:減少css表 達式計算次數的方法就是使用一次性的表示式,它在第一次執行時將結果賦給指定的樣式屬性,並用這個屬性來代替css表示式。如果樣式屬性必須在頁面週期內 動態地改變,使用事件控制代碼來代替css表示式是乙個可行辦法。如果必須使用css表示式,一定要記住它們要計算成千上萬次並且可能會對你頁面的效能產生影 響。

在學習css初期,我們在做網頁的時候經常會使用*,以此來消除標籤的預設布局和不同瀏覽器對於同乙個標籤的渲染。

而我們有時候會看到reset的寫法。body,p,h1,h2,h3,h4,h5,input,select,textarea,table

這些人為什麼要這麼寫,下面的內容我們會得到答案

例:#header>a

css選擇器是從右到左進行規則匹配。所以在瀏覽器中這條語句實現為:

瀏覽器遍歷頁面中所有的a元素——>其父元素的id是否為header。

例:#header a

這個例子比上乙個消耗的時間更多

遍歷頁面中所有a元素——>向其上級遍歷直到根節點

例:.selected*

匹配文件中所有的元素——>分別向上逐級匹配class為selected的元素,直到文件的根節點

所以我們應該避免使用通配選擇器。

第二,對於瀏覽器而言,所有的樣式規則的都會被解析後索引起來,即使是當前頁面無匹配的規則。移除無匹配的規則,減少索引項,加快瀏覽器查詢速度;

瀏覽器匹配所有的元素——>檢查是否有href屬性並且herf屬性值等於」#index」——>分別向上逐級匹配class為selected的元素,直到文件的根節點。

正規表示式匹配會比基於類別的匹配會慢很多。大部分情況下我們應盡量避免使用 *=, |=, ^=, $=, 和 ~=語法的屬性選擇器。

解讀前端效能優化之「配置ETag」

1 什麼是etag?實體標籤 entitytag 是唯一標識了乙個元件的乙個特定版本的字串,是web伺服器用於確認快取元件的有效性的一種機制,通常可以使用元件的某些屬性來構造它。總結 實體標籤是web伺服器和瀏覽器用於確認快取元件的有效性的一種機制。條件get請求 那麼伺服器是根據什麼判斷快取是否還...

前端css效能優化

1.避免使用 important 外部的css檔案中使用 important會使得頁面在載入時增加額外的延遲。最好使用link 2.避免使用css表示式 表示式可能會造成極大的計算量 3.避免通配選擇器 在初期使用 以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。4.移除無匹配的樣式...

前端css效能優化

1.避免使用 important 外部的css檔案中使用 important會使得頁面在載入時增加額外的延遲。最好使用link 2.避免使用css表示式 表示式可能會造成極大的計算量 3.避免通配選擇器 在初期使用 以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。4.移除無匹配的樣式...