web前端優化

2021-09-01 21:52:04 字數 642 閱讀 7248

做為乙個好的優秀前端,不僅能夠寫出優雅的**,也要更加關注於效能性的問題,但由於我們在專案過程中可能會考慮到一些成本性的問題,不可能讓我們的專案在效能方面面面俱到,但我們可以做到最為基本的做優化。

我們可以從以下幾點進行優化:

1.減少對伺服器方面的請求

我們使用外部檔案

css 和js

css sprite

的方式

2.減少系統資源的損耗(事件**)

對於一些從頁面上清除的元素,如果元素是有繫結事件的,在清除頁面之前把元素事件移除,否則事件會一直存留在記憶體中,這樣會加大記憶體資源的浪費。

3.外部指令碼、

css樣式的分布位置

頁面渲染的流程是從上到下的乙個過程,我們要遵守

css樣式在上,

js指令碼在下這個標準,

css樣式在上,避免頁面的重繪和回流。js

指令碼在下避免頁面的阻塞渲染。

4.外部資源的壓縮

對於css 和js

5.ajax

資料快取

對於一些固定不變的資料進行快取,減少對於伺服器的請求

6.減少重定向

重定向會進行網域名稱的查詢,會比較損耗資源,

7.影象優化

格式最好使用

png8.

web前端優化

盡量避免使用eval函式 多了一步解析的步驟 function testnoeval var endtime new date console.log 耗時1 endtime starttime ms function testeval var endtime new date console.lo...

web前端效能優化

01 減少http請求 使用css sprite 合併js css02 使用cdn 當頁面中有很多資源的時候可以從不同伺服器中讀取 設定長的expires時間將直接減少http請求 如果資源設定了expires頭為將來的某個時間,下次訪問時候瀏覽器 發現資源還沒有過期,會直接從快取中讀取,不會再次產...

web前端優化(3)

預載入 懶載入lazyload.js實現原理 首先通過document的clientheight屬性獲取當前的可視高度 選中所有帶有懶載入屬性的標籤,迴圈遍歷 通過元素的getboundingclientrect方法獲得當前元素的top值 如果top值小於可視介面的高度,就將設定的懶載入屬性去掉,同...