1. 程式人生 > >前端性能的方法

前端性能的方法

asc ont 文件 帶寬 流量 頁面 知識 利用 目前

減少HTTP請求

http協議是無狀態的應用層協議,意味著每次http請求都需要建立通信鏈路、進行數據傳輸,而在服務器端,每個http都需要啟動獨立的線程去處理。這些通信和服務的開銷都很昂貴,減少http請求的數目可有效提高訪問性能

減少http的主要手段是合並CSS、合並JavaScript、合並圖片。將瀏覽器一次訪問需要的javascript和CSS合並成一個文件,這樣瀏覽器就只需要一次請求。圖片也可以合並,多張圖片合並成一張,如果每張圖片都有不同的超鏈接,可通過CSS偏移響應鼠標點擊操作,構造不同的URL。將圖片base64,這樣也可以減少請求

開啟HTTP 協議壓縮

查看前端性能優化-HTTP壓縮這篇文章

CSS放在頁面最上部,javascript放在頁面最下面

瀏覽器會在下載完成全部CSS之後才對整個頁面進行渲染,因此最好的做法是將CSS放在頁面最上面,讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中,則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了,這就導致頁面由無 CSS狀態跳轉到 CSS狀態,用戶體驗比較糟糕,所以可以考慮將CSS放在HEAD中

Javascript則相反,瀏覽器在加載javascript後立即執行,有可能會阻塞整個頁面,造成頁面顯示緩慢,因此javascript最好放在頁面最下面。但如果頁面解析時就需要用到javascript,這時放到底部就不合適了。

Lazy Load Javascript(只有在需要加載的時候加載,在一般情況下並不加載信息內容。)隨著 Javascript框架的流行,越來越多的站點也使用起了框架。不過,一個框架往往包括了很多的功能實現,這些功能並不是每一個頁面都需要的,如果下載了不需要的腳本則算得上是一種資源浪費 -既浪費了帶寬又浪費了執行花費的時間。目前的做法大概有兩種,一種是為那些流量特別大的頁面專門定制一個專用的 mini版框架,另一種則是 Lazy Load。

圖片懶加載(lazyload image)

查看這篇文章:前端性能優化--圖片懶加載(lazyload image)

非核心代碼異步加載

查看這篇文章:前端性能優化-異步加載

利用瀏覽器緩存(重點)

查看這篇文章:前端性能優化-利用瀏覽器緩存

使用CDN

預解析DNS

前端性能的方法