提升網頁的加載速度淺析

加快網頁的加載速度，無疑是提升用戶體驗的一個很好的方法。可是這裏咱們如何提升網頁的加載速度呢？這裏我總結了幾點。
    固然，這也是我第一天上班來的第一個任務。。。
    一、使用良好的結構
        好比說XHTML具備很大的優點，至少你的頁面會更加的符合標準！可是他大量的使用了標記（<start> , <end>等），而這就意味着瀏覽器須要下載更多的代碼，因此嘗試在你的頁面中使用較少的XHTML，減小頁面的大小。
    二、儘可能減小HTTP的請求次數
        終端用戶響應的時間中，有80%用於下載各項內容。這部分時間包括下載頁面中的圖像、樣式表、腳本、Flash等。經過減小頁面中的元素能夠減小HTTP請求的次數。這是提升網頁速度的關鍵步驟。
        減小頁面組件的方法其實就是簡化頁面設計。那麼有沒有一種方法既能保持頁面內容的豐富性又能達到加快響應時間的目的呢？這裏有幾條減小HTTP請求次數同時又可能保持頁面內容豐富的技術。
        合併文件是經過把全部的腳本放到一個文件中來減小HTTP請求的方法，如能夠簡單地把全部的CSS文件都放入一個樣式表中。當腳本或者樣式表在不一樣頁面中使用時須要作不一樣的修改，這可能會相對麻煩點，但即使如此也要把這個方法做爲改善頁面性能的重要一步。
    三、優化網頁圖片文件
        你的網頁必定有圖片，加載一個網頁每每圖片的總尺寸是最大的，特別是那些顏色豐富的背景圖片和大副廣告圖片。因此通常要在同等圖片質量的狀況下要儘量地 減少圖片尺寸。在Photoshop中咱們能夠用保存爲Web圖片的選項試一下。圖片也有幾種經常使用的文件格式。如JPEG通常是用來存儲照片或全綵色圖片 的，好比照片、屏幕截圖等。GIF圖片格式的顏色要比JPEG少，適合作小圖，如製做按鈕、Logo等，另外GIF支持動態效果。PNG跟GIF比較相 似，但它的尺寸較大，支持的顏色也比GIF要多，而且PNG支持背景透明。咱們能夠試試使用一種不一樣的格式保存圖片試下，如將PNG和JPEG換成GIF 試試
    四、CSS Sprites是減小圖像請求的有效方法
        把全部的背景圖像都放到一個圖片文件中，而後經過CSS的background-image和background-position屬性來顯示圖片的不一樣部分；
        圖片地圖是把多張圖片整合到一張圖片中。雖然文件的整體大小不會改變，可是能夠減小HTTP請求次數。圖片地圖只有在圖片的全部組成部分在頁面中是緊挨在一塊兒的時候才能使用，如導航欄。肯定圖片的座標和可能會比較繁瑣且容易出錯，同時使用圖片地圖導航也不具備可讀性，所以不推薦這種方法；
        內聯圖像是使用data:URL scheme的方法把圖像數據加載頁面中。這可能會增長頁面的大小。把內聯圖像放到樣式表（可緩存）中能夠減小HTTP請求同時又避免增長頁面文件的大小。可是內聯圖像如今尚未獲得主流瀏覽器的支持。減小頁面的HTTP請求次數是你首先要作的一步。這是改進首次訪問用戶等待時間的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所說，HTTP請求在無緩存狀況下佔去了40%到60%的響應時間。
        關於CSS Sprites後續我會嘗試使用下，若是有什麼心得仍是會分享。
    五、合併Js文件和CSS
        將JS代碼和CSS樣式分別合併到一個共享的文件，這樣不只能簡化代碼，並且在執行JS文件的時候，若是JS文件比較多，就須要進行屢次「Get」請求，延長加載速度，將JS文件合併在一塊兒後，天然就減小了Get請求次數，提升了加載速度。
    六、懶加載技術的應用
        延遲顯示可見區域外的內容，爲了確保用戶能夠更快地看見可見區域的網頁能夠延遲加載或展示可見區域外的內容，爲了不頁面變形，可使用佔位符標籤制定正確的高度和寬度。好比WP的jQueryImage LazyLoad插件就能夠在用戶停留在第一屏的時候，不加載任何第一屏如下的圖片信息，只有當用戶把鼠標往下滾動的時候，這些圖片纔開始加載。這樣很明顯提高可見區域的加載速度，提升用戶體驗。
    七、延遲加載和執行非必要腳本
        網頁中有不少腳本是在頁面徹底加載完前都不須要執行的，能夠延遲加載和執行非必要腳本。這些腳本能夠在onload事件以後執行，避免對網頁上重要內容的呈現形成影響。這些腳本多是你本身網頁的甲苯，每每更多的是一些第三方腳本，這樣的有不少，好比評論、廣告、智能推薦、百度雲圖、分享等等，這些徹底能夠等主體內容加載完後再執行。
    八、使用AJAX
        AJAX即「Asynchronous Javascript +XML「，是指一種建立交互式網頁應用的網頁開發技術。經過在後臺與服務器進行少許數據交換，AJAX可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁(不使用AJAX)若是須要更新內容，必須重載整個網頁面。
    九、精簡代碼
        這個能夠說是最直接的一個方法，也是用得比較多的，對網頁代碼進行瘦身，刪除沒必要要的沉冗代碼，好比沒必要要的空格、換行符、註釋等，包括JS代碼中的無用代碼也須要清除。其中對於註釋代碼的清除可能有些人存在誤區，甚至有的在裏面堆砌關鍵詞。
    十、使用 Progressive JPEGs
        ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名爲「高級JPEG」。在建立高級JPEG文件時，數據是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨着數據的裝入，圖像逐步變得清晰。它至關於交織的GIF格式的圖片。高級JPEG主要是考慮到使用調制解調器的慢速網絡而設計的，快速網絡的使用者一般不會體會到它和正常JPEG格式圖片的區別。對於網速比較慢的用戶，這無疑有很好的體驗。
    十一、壓縮文本和圖片
        壓縮技術如gzip能夠有效減小頁面加載的時間。包括HTML，XML，JSON(JavaScript對象符號)，JavaScript和CSS等，壓縮率均可以在大小70%左右。文本壓縮用得比較多，通常直接在空間開啓就行，而圖片的壓縮就比較隨意，不少都是直接上傳，其實還有很大的壓縮空間。
    十二、圖片使用height和width屬性
        你會給每一個圖片加上height和width屬性嗎？這兩個屬性可讓瀏覽器在加載圖片以前就知道圖片的長和寬，並預留出指定的長寬待圖片加載後顯示。如 果沒有這兩個屬性，瀏覽器還須要在讀取圖片成功後再處理一次頁面佈局樣式，這無疑減慢了網頁加載速度。因此在固定圖片大小的狀況下最好都使用上長和寬屬性。
    1三、使用 HTTP 壓縮，並始終使用小寫的 div 和類名
        可使用 HTTP 壓縮來減小服務器與瀏覽器之間的通訊量。能夠在 Apache 中配置 HTTP 壓縮（.htaccess 文件），或者能夠將其包含到頁面中（對於 PHP，可使用一個 HTTP_ACCEPT_ENCODING 選項）。可是請注意：不是全部瀏覽器都支持壓縮。即便是支持壓縮的瀏覽器，壓縮和解壓縮都會加劇處理器的負載。要在 Apache 中啓用地毯式（blanket）壓縮（即壓縮全部文本和 HTML），使用如下命令：
        AddOutputFilterByType DEFLATE text/html text/plain text/xml
        另外，考慮一下您想要壓縮的內容。圖像、音樂和視頻在建立時已經進行了壓縮，所以您能夠將壓縮對象限制爲 HTML、CSS 和 JavaScript 文件。另外一種減小壓縮工做的技巧是使用小寫形式的 <div> 元素和類名。因爲大小寫敏感性，而且使用的是無損壓縮，<header> 與 <Header> 不一樣，它們被壓縮爲兩個不一樣的標記。