Web 前端性能優化實戰

基礎知識

瞭解從地址欄輸入URL到頁面加載完成總體過程

DNS域名解析

TCP鏈接

HTTP請求

處理請求返回HTTP響應

頁面渲染

關閉鏈接

分析項目

項目部署環境：美國服務器

webpagetest是一款很是優秀的網頁前端性能測試工具，用它來測試生產環境上的項目

由上面的概覽最直觀的就能夠看出如下問題：

一、圖片沒處理

二、沒有緩存靜態內容

三、沒有使用CDN

四、加載時間長

五、http請求過多

再看看Performance Review

 

六、存在404資源

分析問題

 一、圖片沒處理

首頁直接展現熱銷的產品，熱銷的產品愈來愈多，請求的圖片就越多,對於非產品圖，該合併的沒有合併成一張圖

二、沒有緩存靜態內容

每一個網站都.js、.css、靜態圖片等資源，這樣的資源不會常常更新

三、沒有使用CDN

若是國際化網站，CDN就不適合

四、加載時間長

是各項問題致使的結果

五、http請求過多

基本是圖片連接佔據

六、存在404資源

每一個網站其實默認都應該有一個favicon.ico文件（規定是放在網站的根目錄下面），它用來在瀏覽器中爲網站顯示一個小圖標。這個文件是由瀏覽器自動請求的，若是找不到，則天然會報告404錯誤

 

解決問題

一、處理圖片

爲了減小http請求，採用延遲加載方式，產品圖片在但是區域纔去加載

echo.js是一個獨立的延遲加載圖片的JavaScript插件，不依賴任何第三方庫

<img src="images/load.gif" alt="" data-echo="images/test.jpg" />
<script src="https://toddmotto.com/labs/echo/js/echo.js"></script>
    <script>
        echo.init({
            offset: 100,
            throttle: 250,
            unload: false,
            callback: function (element, op) {
                element.width = "300";
                element.height = "300";
            }
        });
</script>

二、CSS Sprites

.bg-sale {
    width: 88px;
    height: 88px;
    background: url("images/bg-art.png") no-repeat;
    background-position: -15px -170px;
}

 

三、避免404錯誤

 上傳favicon.ico文件到生產環境根目錄

四、使favicon.ico文件儘量小而且能夠緩存

經過上面的優化看看效果