讓你的頁面打開速度飛快-Web 前端優化技術

下載腳本時並行下載是被禁用的——即使使用了不同的主機名,也不會啟用其他的下載。因為腳本可能修改頁面內容,因此瀏覽器會等待;另外,也是為了保證腳本能夠按照正確的順序執行,因為後面的腳本可能與前面的腳本存在依賴關係,不按照順序執行可能會產生錯誤。


6. 壓縮組件

從 HTTP1.1 開始,Web 客戶端可以通過 HTTP 請求中的 Accept-Encoding 頭來表示對壓縮的支持

Accept-Encoding: gzip,deflate

如果 Web 服務器看到請求中有這個頭,就會使用客戶端列出來的方法中的一種來進行壓縮。Web 服務器通過響應中的 Content-Encoding 來通知 Web 客戶端。

Content-Encoding: gzip

7. 使用外部的 JavaScript 和 CSS

內聯腳本或者樣式可以減少 HTTP 請求,按理來說可以提高頁面加載的速度。然而在實際情況中,當腳本或者樣式是從外部引入的文件,瀏覽器就有可能緩存它們,從而在以後加載的時候能夠直接使用緩存,而 HTML 文檔的大小減小,從而提高加載速度。

影響因素:

  • 每個用戶產生的頁面瀏覽量越少,內聯腳本和樣式的論據越強勢。譬如一個用戶每個月只訪問你的網站一兩次,那麼這種情況下內聯將會更好。而如果該用戶能夠產生很多頁面瀏覽量,那麼緩存的樣式和腳本將會極大減少下載的時間,提交頁面加載速度。
  • 如果你的網站不同的頁面之間使用的組件大致相同,那麼使用外部文件可以提高這些組件的重用率。

加載後下載:

有時候我們希望內聯樣式和腳本,但又可以為接下來的頁面提供外部文件。那麼我們可以在頁面加載完成止嘔動態加載外部組件,以便用戶接下來的訪問。


8. 精簡 JavaScript 和 CSS

精簡就是從代碼中移除不必要的字符以減少文件大小,降低加載的時間。代碼精簡的時候會移除不必要的空白字符(空格,換行、製表符),這樣整個文件的大小就變小了。


9. 減少 DNS 查找

DNS 也是開銷,通常瀏覽器查找一個給定域名的 IP 地址要花費 20~120毫秒,在完成域名解析之前,瀏覽器不能從服務器加載到任何東西。那麼如何減少域名解析時間,加快頁面加載速度呢?

當客戶端 DNS 緩存(瀏覽器和操作系統)緩存為空時,DNS 查找的數量與要加載的 Web 頁面中唯一主機名的數量相同,包括頁面 URL、腳本、樣式表、圖片、Flash 對象等的主機名。減少主機名的 數量就可以減少 DNS 查找的數量。

讓你的頁面打開速度飛快-Web 前端優化技術

減少唯一主機名的數量會潛在減少頁面中並行下載的數量(HTTP 1.1 規範建議從每個主機名並行下載兩個組件,但實際上可以多個),這樣減少主機名和並行下載的方案會產生矛盾,需要大家自己權衡。建議將組件放到至少兩個但不多於 4個主機名下,減少 DNS 查找的同時也允許高度並行下載。


10. 刪除重複腳本

在團隊開發一個項目時,由於不同開發者之間都可能會向頁面中添加頁面或組件,因此可能相同的腳本會被添加多次。

重複的腳本會造成不必要的 HTTP 請求(如果沒有緩存該腳本的話),並且執行多餘的 JavaScript 浪費時間,還有可能造成錯誤。


分享到:


相關文章: