優化頁面加載速度的方式

 

一、減小請求css

 

最大的性能漏洞就是一個頁面須要發起幾十個網絡請求來獲取諸如樣式表、腳本或者圖片這樣的資源,這個在相對低帶寬和高延遲的移動設備鏈接上來講影響更嚴重。web

 

二、整合資源瀏覽器

 

對開發者來講,將Javascript代碼和CSS樣式放到公共的文件中供多個頁面共享是一種標準的優化方法,這個方法能很簡單的維護代碼,而且提升客戶端緩存的使用效率。緩存

在Javascript文件中,要確保在一個頁面中相同的腳本不會被加載屢次,當大團隊或者多個團隊合做開發的時候,這種冗餘的腳本就很容易出現,你可能會對它的發生頻率並不低感到很是吃驚。安全

Sprites是css中處理圖片的一項技術,Sprites就是將多張圖片整合到一個線性的網狀的大圖片中,頁面就能夠將這個大圖片一次性獲取回來而且作爲css的背景圖,而後使用css的背景定位屬性展現頁面須要的圖片部分,這種技術將多個請求整合成一個,能顯著地改善性能。服務器

 

 

三、使用瀏覽器緩存和本地緩存網絡

 

如今全部的瀏覽器都會使用本地資源去緩存住那些被Cache一Control或者Expires頭標記的資源,這些頭能標記資源須要緩存的時間,另外,ETag(實體標籤)和Last一Modified頭來標識當資源過時後是否須要從新請求,瀏覽器爲了減小沒必要要的服務器請求,儘量地從本地緩存中獲取資源,而且將那些已通過期的、或者當緩存空間減少的時候將那些好久不用的資源進行清理,瀏覽器緩存一般包括圖片,CSS,Javascript代碼,這些緩存能合理地提升網站的性能(好比爲了支持後退和前進的按鈕,使用一個單獨的緩存來保存整個渲染的頁面)。多線程

 

 

四、首次使用的時候在HTML中嵌入資源框架

 

 

HTML的標準是使用連接來加載外部資源,這使得更容易在服務器上(或者在CDN上)操做更新這些資源,而不是在每一個頁面上修改更新這些資源,根據上文討論的,這種模式也使得瀏覽器能從本地緩存而不是服務器上獲取資源。post

 

 

五、使用HTML5服務端發送事件

Web應用已經使用了各類從服務器上輪詢資源的方法來持續地更新頁面,HTML5的EventSource對象和Server一Sent事件能經過瀏覽器端的JavaScript代碼打開一個服務端鏈接客戶端的單向通道,服務端可使用這個寫通道來發送數據,這樣能節省了HTTP建立多個輪詢請求的消耗。

這種方式比HTML的WebSocket更高效,WebSocket的使用場景是,當有許多客戶端和服務端的交互的時候(好比消息或者遊戲),在全雙工鏈接上創建一個雙向通道。

這個技術是基於具體的技術實現的,若是你的網站當前是使用其餘的Ajax或者Comet技術來輪詢的,轉變成Server一Sent事件須要重構網站的Javascript代碼。

六、消除重定向

 

當用戶在一個移動設備上訪問桌面PC網站的時候,Web網站應用一般讀取HTTP的user一agent頭來判斷這個用戶是不是來自移動設備的,而後應用會發送帶有空HTTP body和重定向HTTP地址頭的HTTP 301(或者302)請求,把用戶重定向到網站的移動版本上去,可是這個額外的客戶端和服務端的交互一般在移動網絡上會消耗幾百毫秒,所以,在原先的請求上傳遞移動的web頁會比傳遞一個重定向的信息並讓客戶端再請求移動頁面更快。

七、減小資源負載

關於移動端頁面的大小問題,渲染小頁面更快,獲取小資源也更快,減少每一個請求的大小一般不如減小頁面請求個數那麼顯著地提升性能。

可是有些技術在性能方面,特別是在須要對帶寬和處理器性能精打細算的移動設備環境下,仍然是能帶來很大利益的。

八、壓縮文本和圖像

諸如gzip這樣的壓縮技術,依靠增長服務端壓縮和瀏覽器解壓的步驟,來減小資源的負載,可是,通常來講,這些操做都是被高度優化過了,並且測試代表,壓縮對網站仍是起到優化性能的做用的,那些基於文本的響應,包括HTML,XML,JSON(Javascript Object Notation),Javascript,和CSS能夠減小大約70%的大小。

九、代碼簡化

 

簡化帶來的好處並不侷限於減小帶寬和延遲,對於那些移動設備上緩存沒法保存的過大資源來講,也是頗有改善的,Gzip在這個方面並無任何幫助,由於資源是在被解壓後才被緩存起來的。

 

十、調整圖片大小

圖片一般是佔用了Web頁面加載的大部分網絡資源,也佔用了頁面緩存的主要空間,小屏幕的移動設備提供了經過調整圖片大小來加速傳輸和渲染圖片資源的機會,若是用戶只是在小的移動瀏覽器窗口中看圖片的話,高分辨率的圖片就會浪費帶寬、處理時間和緩存空間。

十一、使用HTML5和CSS 3.0來簡化頁面

這個就不解釋了吧!!!!

十二、延遲渲染」BELOW一THE一FOLD」內容

一些好的Javascript庫能夠用來處理這些below一the一fold 延遲加載的圖像。

1三、延遲讀取和執行的腳本

在一些移動設備上,解析Javascript代碼的速度能達到100毫秒每千字節,許多腳本的庫直到頁面被渲染之後都是不須要的加載的,下載和解析這些腳本能夠很安全地被推遲到onload事件以後來作。

1四、使用Ajax來加強進程

Ajax(Asynchronous JavaScript and XML)是一項使用XHR(XMLHttpRequest)對象來從Web服務器上獲取數據的技術,它並不須要更新正在運行的頁面,Ajax能更新頁面上的某個部分而不須要從新構建整個頁面,它一般用來提交用戶的交互相應,可是也能夠用來先加載頁面的框架部分,而後當用戶準備好瀏覽網頁的時候再填充詳細的內容。

1五、根據網絡情況進行適配處理

因爲使用更多帶寬會使用更多移動網絡的費用,因此只有能檢測網絡的類型才能使用針對特定網絡的優化技術。

1六、對多線程來講儘可能使用HTML5的WEB WORKER特性

對提升移動站點的性能來講,Web Worker中的代碼很適合用來預處理用戶完成進一步操做所須要的資源的,特別是在用戶的帶寬資源不緊缺的狀況下,在低處理器性能的移動設備上,過多的預加載可能會干擾當前頁面的UI響應,使用多線程代碼,讓Web Worker對象(而且儘量使用localStorage來緩存數據)在另一個線程中操做預加載資源,這樣就能不影響當前的UI表現了。

1七、將CLICK事件替換成TOUCH事件

確保不會產生用戶不指望的行爲,應該要使用touchstart和touchmove事件

1八、支持SPDY協議

SPDY自動使用gzip壓縮全部內容,和HTTP不一樣的是,它連header的數據也使用gzip壓縮,SPDY使用多線程技術讓多個請求流或者響應流能共用一個TCP鏈接,另外SPDY容許請求設置優先級,好比,頁面中心的視頻會比邊框的廣告擁有更高的優先級。

相關文章
相關標籤/搜索