高性能網(wǎng)站搭建-前端性能優(yōu)化 (附Vue首屏加載時間優(yōu)化詳細方案)

xingqiba 發(fā)布于2019-07-25 14:47 / 2220人閱讀

摘要：附首屏加載時間過長詳細優(yōu)化方案首先附一張優(yōu)化過后的圖首屏加載時間從原來的到，測試的個人站點注我在優(yōu)化項目的時候使用的是。如果是的項目影響也不大，優(yōu)化的方案是結(jié)合服務(wù)端和的。

前言

事實上, 只有10%-20%的最終用戶響應(yīng)時間是發(fā)在從Web服務(wù)器獲取HTML文檔并傳送到瀏覽器中的。如果希望能夠有效地減少頁面的響應(yīng)時間，就必須關(guān)注剩余80%-90%的最終用戶體驗。
--Steve Souders在這篇博客中，我根據(jù)工作中的實際項目經(jīng)驗和一些測試的經(jīng)驗中總結(jié)出了前端頁面在性能上優(yōu)化方案。其中一些經(jīng)驗吸收自《高性能網(wǎng)站建設(shè)指南》Steve Souders 著 電子工業(yè)出版社。

一、代碼相關(guān)優(yōu)化 1. 將樣式表放在首部-使用link標(biāo)簽將樣式表放在文檔的HEAD中

遵循HTML規(guī)范，將樣式表放在頭部，可以有效避免白屏和無樣式內(nèi)容的閃爍。

2. 將腳本放在底部

將腳本放在頂部會造成的影響: 腳本阻塞對其后面內(nèi)容的顯示; 腳本會阻塞對其后面組件的下載;

將腳本放在底部標(biāo)簽之前, 類似于document.body.appendChild(yourScript), 不會阻塞頁面內(nèi)容的呈現(xiàn)，而且頁面中的可視組件可以盡早下載。

3. 減少HTTP請求 1) CSS Sprites (雪碧圖)

將多個圖片合成一張圖片，通過background-position來定位所需要的圖片。每次請求的話只需要請求一張圖片減少http請求。(如果使用圖標(biāo)的話建議使用svg,也可以使用iconfont)

合成雪碧圖的工具有很多

本地工具：https://github.com/iwangx/sprite（國人寫的）

在線工具https://www.toptal.com/develo...

本地工具：

在線工具：

2) 內(nèi)聯(lián)圖片和腳本

通過內(nèi)聯(lián)圖片和腳本無需額外的HTTP請求，圖片小于10K的可以設(shè)置內(nèi)聯(lián)為base64位。

bad

使用外部Javascript和Css的主要作用有: 可以配置緩存 有利于組件重用

5. 使用CDN (內(nèi)容分發(fā)網(wǎng)絡(luò) Content Delivery Network)

CDN是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲和分發(fā)技術(shù)。--摘自百度百科

通過CDN引入的資源目前基本都是使用目前最新的HTTP2協(xié)議，所以在性能上可以做到極致優(yōu)化，感謝CDN。

BootCDN - Bootstrap 中文網(wǎng)開源項目免費 CDN 加速服務(wù)

UNPKG

6. 代碼壓縮 1) Gzip 壓縮

gzip壓縮可以節(jié)省50%-70%的網(wǎng)絡(luò)開銷

瀏覽器支持的壓縮類型可以通過network的Accept-Encoding: gzip, deflate來查看。支持deflate的瀏覽器也支持gzip，但很多瀏覽器支持gzip卻不支持deflate，因此gzip是最理想的壓縮方法

node端使用compression如果是webpack項目可以看下面的Vue首屏加載時間優(yōu)化方案里的gzip壓縮

// npm install compression --save-dev
const compression = require("compression")

2) 代碼壓縮

前端打包壓縮的有g(shù)runt，gulp，webpack，可以對HTML，CSS，Javascript代碼壓縮

二、服務(wù)器相關(guān)優(yōu)化

本文中使用nginx服務(wù)器進行相關(guān)配置，使用apache同樣可以做到相關(guān)優(yōu)化，具體操作請另Google

1. 開啟gzip壓縮

服務(wù)端配置gzip壓縮

gzip on; # 開啟Gzip
gzip_static on; # 開啟靜態(tài)文件壓縮
gzip_min_length  1k; # 不壓縮臨界值，大于1K的才壓縮
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 進行壓縮的文件類型
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6].";

我的服務(wù)器nginx相關(guān)的配置:

2. 開啟HTTP2

HTTP2在前端性能上主要表現(xiàn)在：請求和響應(yīng)的多路復(fù)用、頭部壓縮

感受下多路復(fù)用

nginx服務(wù)器配置HTTP2

使用http2需要配合https使用

使用https需要ca證書阿里云https證書購買 (有免費的ca證書)

3. 開啟緩存 添加Expires頭（強緩存）

個人站點相關(guān)配置

nginx配置

location ~.*.(svg|woff|js|css){
    root /yourFilePath;
    expires 1d;
}

Web服務(wù)器使用Expires頭來告訴Web客戶端它可以使用一個組件的當(dāng)前副本，直到指定的時間為止 HTTP規(guī)范中簡要地稱該頭為“在這一日期時間之后，響應(yīng)將被認為是無效的”。它在HTTP響應(yīng)中發(fā)送

expires: Thu, 30 May 2019 20:51:42 GMT

上面的Expires頭告訴瀏覽器該響應(yīng)的有效性持續(xù)到2019年5月30日為止。如果為頁面中的一個圖片返回了這個頭，瀏覽器在后續(xù)的頁面瀏覽中會使用緩存的圖片，將HTTP請求的數(shù)量減少一個

Max-Age和mod_expires

個人站點的css文件使用強緩存cache-control: max-age

nginx配置

server {
    add_header Cache-Control max-age=72000;
}

在解釋緩存如何很好地改善傳輸性能之前，需要提及除了Expires 頭之外的另一種選擇。HTTP 1.1引入了Cache-Control頭來克服Expires頭的限制

因為Expires頭使用一個特定的時間，它要求服務(wù)器和客戶端的時鐘嚴格同步。另外，過期日期需要經(jīng)常檢查，并且一旦未來這天到來了，還需要在服務(wù)器配置中提供個新的日期。

Cache-Control使用max-age指令指定組件被緩存多久, 如果從組件被請求開始過去的秒數(shù)少于max-age,瀏覽器就使用緩存的版本，這就避免了額外的HTTP請求。一個長久的max-age頭可以將刷新窗設(shè)置為未來10年。

Cache-Control: max-age=315360000

Expires 和Cache-Control max-age.如果兩者同時出現(xiàn)，HTTP規(guī)范規(guī)定max-age指令將重寫Expires頭。

建議使用Cache-Control max-age，如果使用expires你需要擔(dān)心它帶來的時鐘同步和配置維護問題。

配置ETag（協(xié)商緩存）

Vue官方文檔的Expires相關(guān)配置

瀏覽器必須產(chǎn)生這個HTTP請求，執(zhí)行有效性檢查, 但這仍比簡單地下載所有已過期的組件效率要高(對比強緩存)。如果瀏覽器緩存中的組件是有效的(即它能夠和原始服務(wù)器上的組件相匹配)，原始服務(wù)器不會返回整個內(nèi)容，而是返回一個304 Not Modifed狀態(tài)碼。

附：Vue首屏加載時間過長詳細優(yōu)化方案

首先附一張優(yōu)化過后的圖

首屏加載時間從原來的10s到2s，測試的個人站點

注：我在優(yōu)化vue項目的時候使用的是vue@2.6.6, vue-cli@3.4。 如果是cli2的項目影響也不大，優(yōu)化的方案是結(jié)合服務(wù)端和webpack的。

vue-cli腳手架默認配置已經(jīng)大幅度優(yōu)化了前端整體的性能，在此基礎(chǔ)上，我又使用了三個優(yōu)化項增加了大幅度提升

1. gzip壓縮

結(jié)合服務(wù)器相關(guān)優(yōu)化第一條：開啟gzip壓縮

下面是前端項目中vue.config.js中的配置

// 需要 npm install compression-webpack-plugin --save-dev
const CompressionWebpackPlugin = require("compression-webpack-plugin")

// 定義當(dāng)前環(huán)境
const ENV = process.env.NODE_ENV || "development"

module.exports = {
    configureWebpack: config => {
        // 如果是開發(fā)環(huán)境的話，開啟壓縮
        if (ENV === "production") {
            //  參數(shù)配置文檔: https://www.webpackjs.com/plugins/compression-webpack-plugin/
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: "gzip",
                test: /.(js|css|html)$/,
                threshold: 10240,
                minRatio: 0.8
            }))
        }
    }
}

2. 使用CDN內(nèi)容分發(fā)網(wǎng)絡(luò)

在index.html文件中通過環(huán)境來判斷是否引入cdn文件，在vue.config.js文件中webpack通過環(huán)境判斷是否使用cdn引入文件的全局變量

使用CDN需要在webpack和index.html進行相關(guān)配置

第一步配置vue.config.js，只需要在剛才配置Gzip壓縮的基礎(chǔ)上再加一段代碼：

const CompressionWebpackPlugin = require("compression-webpack-plugin")

const ENV = process.env.NODE_ENV || "development"

module.exports = {
    configureWebpack: config => {
        if (ENV === "production") {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: "gzip",
                test: /.(js|css|html)$/,
                threshold: 10240,
                minRatio: 0.8
            }))
            // 配置externals就是當(dāng)使用CDN進入的js文件在當(dāng)前項目中可以引用
            // 比如在開發(fā)環(huán)境引入的vue是import Vue from "vue", 這個大寫的Vue就是對應(yīng)的下面的大寫的Vue
            config.externals = {
              "vue": "Vue",
              "vue-router": "VueRouter",
              "axios": "axios"
            }
        }
    }
}

第二步配置index.html,在body里使用EJS語法判斷是否為生產(chǎn)環(huán)境


  
  <% if (NODE_ENV === "production") { %>
    
    
    
  <% } %>

3. 配置sourceMap

devtool | webpack中文網(wǎng) 你可以根據(jù)官網(wǎng)來對開發(fā)環(huán)境和生產(chǎn)環(huán)境進行詳細配置

當(dāng)然也可以像我一樣直接productionSourceMap: false干掉生產(chǎn)環(huán)境的sourceMap

const CompressionWebpackPlugin = require("compression-webpack-plugin")

const ENV = process.env.NODE_ENV || "development"

module.exports = {
    configureWebpack: config => {
        if (ENV === "production") {
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: "gzip",
                test: /.(js|css|html)$/,
                threshold: 10240,
                minRatio: 0.8
            }))
            config.externals = {
              "vue": "Vue",
              "vue-router": "VueRouter",
              "axios": "axios"
            }
        }
    },
    // 禁用生產(chǎn)環(huán)境的sourceMap
    productionSourceMap: false
}

4. 使用HTTP2

請參考服務(wù)端優(yōu)化第二條

結(jié)語

前端性能優(yōu)化至關(guān)重要，文中提及的是我認為比較重要的幾點，以后遇到更好的方案會補充進來。當(dāng)然你也可以在評論區(qū)留言我們一起探討，有錯誤的地方歡迎指出。

GPU云服務(wù)器云服務(wù)器前端性能優(yōu)化前端開發(fā)性能優(yōu)化網(wǎng)站性能優(yōu)化網(wǎng)站性能監(jiān)測與優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/40453.html

發(fā)表評論

登陸后可評論

0條評論

xingqiba

男|高級講師

我要關(guān)注我要私信

TA的文章

奈學(xué)P7業(yè)務(wù)架構(gòu)師

閱讀 1242·2021-11-22 15:24
lisahost：美國新的全解鎖原生IP 206段上架開售，支持tiktok等，季付122元起

閱讀 4650·2021-09-23 11:51
如何使用python制作一款屏幕顏色提取器，附帶exe文件

閱讀 2397·2021-09-08 09:36
css盒模型理解

閱讀 3570·2019-08-30 15:43
手機端適配策略以及實現(xiàn)

閱讀 1359·2019-08-30 13:01
工欲善其事，必先利其器 _SUBLIME TEXT 3_使用心得（上篇）

閱讀 1165·2019-08-30 12:48
CSS Grid 初識

閱讀 597·2019-08-29 12:52
CSS display 屬性詳解

閱讀 3436·2019-08-29 12:41

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

高性能網(wǎng)站搭建-前端性能優(yōu)化 (附Vue首屏加載時間優(yōu)化詳細方案)

相關(guān)文章

**前端每周清單：Node.js 微服務(wù)實踐，Vue.js 與 GraphQL，Angular 組件技巧**

**前端黑科技：美團網(wǎng)頁首幀優(yōu)化實踐**

前端經(jīng)驗 - 收藏集 - 掘金

**移動web開發(fā)問題和優(yōu)化小結(jié)**

**移動web開發(fā)問題和優(yōu)化小結(jié)**

發(fā)表評論

0條評論

xingqiba

男|高級講師

TA的文章

奈學(xué)P7業(yè)務(wù)架構(gòu)師

lisahost：美國新的全解鎖原生IP 206段上架開售，支持tiktok等，季付122元起

如何使用python制作一款屏幕顏色提取器，附帶exe文件

css盒模型理解

手機端適配策略以及實現(xiàn)

工欲善其事，必先利其器 _SUBLIME TEXT 3_使用心得（上篇）

CSS Grid 初識

CSS display 屬性詳解

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

高性能網(wǎng)站搭建-前端性能優(yōu)化 (附Vue首屏加載時間優(yōu)化詳細方案)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！