對一名前端工作人員來說,性能的優化還是很重要的.

減少http請求

? 1.圖片地圖:假設導航欄有多張圖片,點擊每張圖片都會進入一個連接,這樣在加載時就會產生多個htttp請求.而此時如果我們用圖片地圖——所有點擊提交到同一個url,同時提交用戶點擊的x,y坐標,服務端再根據坐標映射響應,如此一來就只需一個http請求即可,大大提高效率.

? 2.CSS Sprites: CSS精靈.將多張圖片融合到一張圖里面,通過css的一些技術布局得到網頁上.

? 3.字體圖標:在可以大量使用字體圖標的地方我們盡可能使用字體圖標,可以減少很多圖片的使用,從而減少http請求.

使用CDN

? CDN的全稱Content Delivery Network,即內容分發網絡.其基本思路就是盡可能避開互聯網上有可能影響數據闡述速度和穩定性的瓶頸和環節,使內容傳輸更快/更穩定.

? 如果應用程序web服務器離用戶更近,那么一個http請求的響應時間將縮短.

? CDN(內容分發網絡)是一組分布在多個不同地理位置的web服務器,用于更加有效的向用戶發布內容. CDN系統能夠實時地根據網絡流量(網絡上傳輸的數據量)和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。

添加Expires

? 頁面的初次訪問者會進行很多http請求,但是通過使用一個長久的Expires頭,可以使這些組件被緩存,下次訪問的時候,就可以減少不必要的http請求,從而提高加載速度.

壓縮組件

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

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

將樣式表放在頭部

? 將樣式表寫在頭部對于實際頁面加載的事件并不能造成太大影響,但這回減少首屏出現的時間,使內容逐步呈現,改善用戶體驗,防止白屏.

將腳本放在底部

? 更樣式表相同,腳本放在底部對實際頁面加載的時間并不能造成太大影響,但會減少首屏出現的時間,是內容逐步呈現.

? js的下載和執行會阻塞DOM樹的構建(中斷了DOM樹的更新),所以script標簽放在首屏范圍內的HTML代碼段了會截斷首屏的內容.

避免CSS表達式

? CSS表達式是動態設置CSS屬性的一種強大并且危險的方式,它受到了IE5到IE8之間版本的支持.

? 用js事件處理機制來動態改變元素的樣式,使函數運行次數在可控范圍之內.

使用外部的js和CSS

? 當腳本或者樣式是從外部引入的文件時,瀏覽器就有可能緩存它們,從而在以后加載的時候能夠直接使用緩存,而HTML文檔的大小減小,從而提高加載速度.

減少DNS查找

? 域名解析是頁面加載的第一步.當我們在瀏覽器的地址欄輸入網址,按回車后,先從域名解析開始,過程是域名解析→發起TCP的3次握手→建立TCP連接后發起http請求→服務器響應http請求,瀏覽器得到html代碼→瀏覽器解析html代碼,并請求html代碼中的資源(如css,js圖片等)→瀏覽器對頁面進行渲染呈現給用戶.

精簡javascript

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

精簡CSS

? 除了移除空白、注釋之外，CSS可以通過優化來獲得更多的節省：合并相同的類；移除不使用的類；使用縮寫(屬性連寫)

避免重定向

? 重定向的含義:將用戶從一個url重新跳轉到另一個url.

? 當頁面發生了重定向，就會延遲整個HTML文檔的傳輸。在HTML文檔到達之前，頁面中不會呈現任何東西，也沒有任何組件會被下載。

刪除重復腳本

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

? 重復的腳本會造成不必要的HTTP請求（如果沒有緩存該腳本的話），并且執行多余的JavaScript浪費時間，還有可能造成錯誤。

配置ETag

? ETag含義:實體標簽(EntityTag)是唯一標識了一個組件的一個特定版本的字符串，是web服務器用于確認緩存組件的有效性的一種機制，通常可以使用組件的某些屬性來構造它。

? 為什么要引入ETag

? ETag主要是為了解決Last-Modified無法解決的一些問題：

一些文件也許會周期性的更改，但是他的內容并不改變(僅僅改變的修改時間)，這個時候我們并不希望客戶端認為這個文件被修改了，而重新GET;

某些文件修改非常頻繁，比如在秒以下的時間內進行修改，(比方說1s內修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒);

某些服務器不能精確的得到文件的最后修改時間。

使Ajax可緩存

? 什么樣的AJAX請求可以被緩存？

? POST的請求，是不可以在客戶端緩存的，每次請求都需要發送給服務器進行處理，每次都會返回狀態碼200。（可以在服務器端對數據進行緩存，以便提高處理速度）

? GET的請求，是可以（而且默認）在客戶端進行緩存的，除非指定了不同的地址，否則同一個地址的AJAX請求，不會重復在服務器執行，而是返回304。

? Ajax請求使用緩存

? 在進行Ajax請求的時候，可以選擇盡量使用get方法，這樣可以使用客戶端的緩存，提高請求速度。

總結

以上是生活随笔為你收集整理的web前端性能优化--如何提高页面加载速度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。