前端效能優化

2022-09-11 16:39:27 字數 973 閱讀 7238

1.減少http請求

在瀏覽器(客戶端)和伺服器發生通訊時,就已經消耗了大量時間,尤其是在網路情況比較糟糕的時候,這個問題尤其突出。

乙個正常http請求的流程簡述:如在瀏覽器中輸入"www.******.com"並按下回車,瀏覽器再與這個url指向的伺服器建立連線,然後瀏覽器才能向伺服器傳送請求資訊,伺服器在接受到請求的資訊後再返回相應的資訊,瀏覽器接收到來自伺服器的應答資訊後,對這些資料解釋執行。

而當我們請求的網頁檔案中有很多、css、js甚至**等資訊時,將會頻繁的與伺服器建立連線,與釋放連線,這必定會造成資源的浪費,且每個http請求都會對伺服器和瀏覽器產生效能負擔。

解決辦法:

合併(css sprites),合併css和js檔案;較多的頁面也可以使用 lazyload 等技術進行優化。

2.請正確理解 repaint 和 reflow

repaint(重繪)就是在乙個元素的外觀被改變,但沒有改變布局(寬高)的情況下發生,如改變visibility、outline、背景色等等。

reflow(重排)就是dom的變化影響到了元素的幾何屬性(寬和高),瀏覽器會重新計算元素的幾何屬性,會使渲染樹中受到影響的部分失效,瀏覽器會驗證dom樹上的所有其它結點的visibility屬性,這也是reflow低效的原因。如:改變窗囗大小、改變文字大小、內容的改變、瀏覽器視窗變化,style屬性的改變等等。如果reflow的過於頻繁,cpu使用率就會噌噌的往**,所以前端也就有必要知道 repaint 和 reflow的知識。

上面提到通過設定style屬性改變結點樣式的話,每設定一次都會導致一次reflow,所以最好通過設定class的方式; 有動畫效果的元素,它的position屬性應當設為fixed或absolute,這樣不會影響其它元素的布局;如果功能需求上不能設定position為fixed或absolute,那麼就權衡速度的平滑性。

總之,因為 reflow 有時確實不可避免,所以只能盡可能限制reflow的影響範圍。

3.請減少對dom的操作

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...

前端效能優化

隨著現在 越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s,網民就會流失70 以上。這種說法我覺得不是很正確的,除非是非常重要 必須要使用的 否則超過5s我基本直接關了,體驗太差。所以,使用者 忍讓 是有極限...