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

1. 削減 HTTP 懇求

兼併腳本和樣式表 將多個樣式表或腳本文件兼併到一個文件中,能夠削減 HTTP 懇求的數量然後縮短呼應時刻。不過兼併一切的樣式文件或者腳本文件可能會導致在一個頁面加載時加載了多於自己所需求的樣式或者腳本,關於只訪問該網站一個頁面的人來說反而增加了下載量,所以在兼併的時分要權衡利弊。

2. 增加 Expires 頭

頁面初度訪問者會進行許多 HTTP 懇求,可是通過運用一個持久的 Expires 頭,能夠使這些組件被緩存,下次訪問的時分,就能夠削減不必要的 HTTP 懇求,然後進步加載速度。

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

3. 運用 CDN

假如應用程序 Web 服務器離用戶更近,那麼一個 HTTP 懇求的呼應時刻將縮短。另外一方面,假如組件web服務器離用戶更近,則多個 HTTP 懇求的呼應時刻將縮短。

4. 將款式表放在頭部

將款式表放在頭部關於實踐頁面加載的時刻並不能形成太大影響,可是這會削減頁面首屏出現的時刻,使頁面內容逐漸出現,改善用戶體會,避免“白屏”。

將款式表放在文檔底部會阻止瀏覽器中的內容逐漸出現。為了避免當款式變化時重繪頁面元素,瀏覽器會阻塞內容逐漸出現,形成“白屏”。這源自瀏覽器的行為:假如款式表仍在加載,構建出現樹便是一種糟蹋,因為一切款式表加載解析結束之前無需繪之任何東西。

5. 將腳本放在底部

與款式表相同,腳本放在底部關於實踐頁面加載的時刻並不能形成太大影響,可是這會削減頁面首屏出現的時刻,使頁面內容逐漸出現。

js 的下載和執行會阻塞 Dom 樹的構建,所以>

6. 緊縮組件

從 HTTP1.1 開始,Web 客戶端可以通過 HTTP 懇求中的 Accept-Encoding 頭來表明對緊縮的支撐

7. 運用外部的 JavaScript 和 CSS

內聯腳本或許款式可以削減 HTTP 懇求,按理來說可以進步頁面加載的速度。然而在實踐情況中,當腳本或許款式是從外部引進的文件,瀏覽器就有或許緩存它們,然後在今後加載的時分可以直接運用緩存,而 HTML 文檔的鉅細減小,然後進步加載速度。

8. 精簡 JavaScript 和 CSS

精簡便是從代碼中移除不必要的字符以削減文件鉅細,下降加載的時刻。代碼精簡的時分會移除不必要的空白字符(空格,換行、製表符),這樣整個文件的鉅細就變小了。

9. 削減 DNS 查找

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

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

10. 刪去重複腳本

在團隊開發一個項目時,因為不同開發者之間都或許會向頁面中增加頁面或組件,因此或許相同的腳本會被增加屢次。重複的腳本會形成不必要的 HTTP 懇求(假如沒有緩存該腳本的話),而且執行剩餘的 JavaScript 糟蹋時刻,還有或許形成過錯。

深入的瞭解才能更好的學習,千鋒重慶web前端培訓為學員提供了2周的課程試聽,你可以去看看,免費試聽一下。


分享到:


相關文章: