歡迎光臨
每天分享高質量文章

Web前端優化最佳實踐及工具集錦

前端的性能對於一個Web應用來說非常重要,如果一個Web應用的頁面加載速度非常快、對於用戶的操作可以及時響應,那麼產品的用戶體驗將會極大地提升。下圖顯示了頁面加載速度對於用戶體驗的影響。

你的Web頁面的速度是否已經足夠快了?其實可能還有很多可以提升的地方。Google和雅虎也提出了一些Web應用的前端優化建議,併發布了一些工具,你可以逐一檢驗你的Web應用,以便達到更高的性能。

這些優化不僅僅可以給用戶提供更好的體驗,從開發者角度來說,進行優化還可以減少頁面的請求數、降低請求所占的帶寬、減少資源的浪費。

下麵來看看Google和雅虎提供的Web頁面優化最佳實踐。

一、Google的Web優化最佳實踐

1. 避免壞請求

有時頁面中的HTML或CSS會向服務器請求一個不存在的資源,比如圖片或HTML檔案,這會造成瀏覽器與服務器之間過多的往返請求,類似於:

  • 瀏覽器:“我需要這個圖像。”
  • 服務器:“我沒有這個圖像。”
  • 瀏覽器:“你確定嗎?這個文件說你有。”
  • 服務器:“真的沒有。”

如此一來,會降低頁面的加載速度。因此,檢查頁面中的壞鏈接非常有必要,你可以通過 Google的PageSpeed工具 來檢測,找到問題後,補充相應的資源檔案或者修改資源的鏈接地址即可。

2. 避免CSS @import

使用 @import方法取用CSS檔案可以能會帶來一些影響頁面加載速度的問題,比如導致檔案按順序加載(一個加載完後才會加載另一個),而無法並行加載。

你可以使用 CSS delivery工具 來檢測頁面代碼中是否存在@import方法。比如,如果檢測結果中存在

@import url("style.css")

則建議你使用下麵的代碼來替代。

 	 	 	 	 	
3. 避免使用document.write

在JavaScript中,可以使用 document.write在網頁上顯示內容或呼叫外部資源,而通過此方法,瀏覽器必須採取一些多餘的步驟——下載資源、讀取資源、運行JavaScript來瞭解需要做什麼,呼叫其他資源時需要重新再執行一次這個過程。由於瀏覽器之前不知道要顯示什麼,所以會降低頁面加載的速度。

要知道,任何能夠被document.write呼叫的資源,都可以通過HTML來呼叫,這樣速度會更快。檢查你的頁面代碼,如果存在類似於下麵的代碼:
document.write('

赞(0)

分享創造快樂