前端的效能對於一個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('
知識星球