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

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)

分享創造快樂