小柚智匯-Vue專案之淺談性能優化

江頭月底，新詩舊夢，孤恨清香，

概述

隨著EDG奪冠的喜訊從7777公里外的冰島傳來，我也完成了自己的 第一個主導團隊開發的Vue專案：

• 小柚智匯
• 以我們卓越班同學的實際需求出發，解決周報，檔案，計劃，打卡，考勤等實際辦公學習的協同網站，共七大板塊，
• 團隊由7人開發
• 開發周期為3個7天

專案前端演示地址： 小柚智匯-卓越生態管理平臺 http://39.105.118.190:5000
專案前端代碼倉庫： github地址(專案代碼不完整，只做部分展示)

前端使用技術：

• vue——主要技術堆疊
• vue-cli——初始化專案和打包專案
• vue-fullpage——首頁的全屏切換
• element-ui——主要UI庫
• moment.js——格式化時間和日期
• github-markdown-css——富文本編輯器
• vue-router——路由和權限控制
• axios——封裝請求
• npm——包管理工具
• 其他第三方庫（今日詩詞，時間流，驗證碼，tab切換）

后端技術方案

雖然專案昨天上線，也提供班級使用，但是從內測反饋結果來看，有很多的問題：

經過反復思考，決定做出性能優化之路：

路由懶加載

像vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的檔案將會例外的大，造成進入首頁時，需要加載的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時，

統一根路徑

靜態資源處理

可以看到此專案中的assets目錄竟是空的，我將所有圖片等引入OSS存盤或者圖床技術，
當然對于比較小的圖片可以考慮做Base64處理，

圖片優化

就圖片這塊來說，與其說我們是在做“優化”，不如說我們是在做“權衡”，因為我們要做的事情，就是去壓縮圖片的體積（或者一開始就選取體積較小的圖片格式），但這個優化操作，是以犧牲一部分成像質量為代價的，因此我們的主要任務，是盡可能地去尋求一個質量與性能之間的平衡點，

對于圖片的處理，讓我想起了那句：做電商就是做圖片，
打開某東，某寶，里面處處可見，都是流量巨大、技術成熟的站點，

那么我專案中的【柚子小組】模塊，對于圖片是高需求的，時下應用較為廣泛的 Web 圖片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等，對于不同的圖片所應用的位置不同，

1. JPG 適用于呈現色彩豐富的圖片，在我們日常開發中，JPG 圖片經常作為大的背景圖、輪播圖或 Banner 圖出現，
2. 考慮到 PNG 在處理線條和顏色對比度方面的優勢，我們主要用它來呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等，
3. 和性能關系最密切的一點就是：SVG 與 PNG 和 JPG 相比，檔案體積更小，可壓縮性更強，
4. Base64 并非一種圖片格式，而是一種編碼方式，Base64 和雪碧圖一樣，是作為小圖示解決方案而存在的，

分頁處理

還是這個頁面，參考了<el-pagination>的系結，但僅僅是對前端的分頁，如果一次性請求大量資料，效果還是一樣甚微，只是利用v-for對渲染進行了回圈控制，

利用v-for切出前8個陣列索引：

v-for="(item, index) in docs.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index"

建議交給后端做分頁處理，

長串列優化

對于自己的個性化屆面，將來會有大量的串列資料下滑展示，需求如下：

• 長串列，大約超過1000行資料
• 每一行至少8列，每一列都不是單純的文本節點，都是input，select，checkbox之類的復雜組件
• 每行最后一列有洗掉按鈕，可以進行洗掉行操作，
• 鎖列

這里我們要提到虛擬化串列：

借用此圖，有四個概念:

1. 可視串列
   容器的寬高 height: 800px
2. 真實串列
   舉個栗子：現在需要被渲染出來的串列數量一共有100條，但是實際上在頁面需要被渲染的串列數量只需要10條，這個10條就是所謂的真實串列，
3. startIndex
   我的總串列(陣列)的長度為1000，而需要渲染的串列片段為100—200，那么這個開始的位置，也就是陣列的index則為99，
4. endIndex
   最后一個元素的index是199，

實作：主要就是通過v-if去控制串列的展示，通過startIdx和endIdx的增減，去展示不同位置的資料，讓這兩個值遞增就可以實作串列滾動，

首屏渲染時間

當我們第一次在url輸入http://xxx.xxx.xxx.xxx:xxx時候，瀏覽器會有白屏現象，為此：

1. 將白屏等待加入影片，寫在index.html中
   
2. 引入cdn外鏈，對于一些專案依賴，可以不用打包發布，
   在自己的vue.config.js中配置:忽略打包第三方庫

 externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      'element-ui': 'ELEMENT',
      moment: 'moment'
    },

在index.html中按需引入cdn外鏈

<!-- built files will be auto injected -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

• 利用webpack生成專案體積藍圖，檢查專案依賴和插件的占比
  
  這個是優化后的：
  
  甚至cdn外鏈也可以自行購買，但是需要系結域名(備案)
  

• 由于CDN部署在網路運營商的機房，這些運營商又是終端用戶的網路服務提供商，因此用戶請求路由的第一跳就到達了CDN服務器，當CDN中存在瀏覽器請求的資源時，從CDN直接回傳給瀏覽器，最短路徑回傳回應，加快用戶訪問速度，減少資料中心負載壓力

• CDN快取的一般是靜態資源，如圖片、檔案、CSS、script腳本、靜態網頁等，但是這些檔案訪問頻度很高，將其快取在CDN可極大改善網頁的打開速度，
  反向代理

啟動GZIP壓縮

我們可以看到，webpack打包時候，名為chunk-vendors.js的檔案，也是瀏覽器首要渲染的檔案，在使用gzip壓縮后明顯體積大幅縮小，

websocket代替ajax輪詢

對于訊息中心，【一鍵簽到】的功能，目前還是ajax長輪詢/lang loop

ws = new WebSocket(target); //實體化一個ws長鏈接物件
ws.onopen = function() {
     console.log("onopen"); //長鏈接打開
 };
 ws.onmessage = function(e) {
     console.log(e);  //長鏈接資料傳輸 主要用這個
 };
 ws.onclose = function() {
     console.log("onclose");//長鏈接關閉
 };
 ws.onerror = function() {
     console.log("onerror");//長鏈接出錯
 };

使用瀏覽器快取

• 對一個網站而言，CSS、javascript、logo、圖示這些靜態資源檔案更新的頻率都比較低，而這些檔案又幾乎是每次http請求都需要的，如果將這些檔案快取在瀏覽器中，可以極好的改善性能，通過設定http頭中的cache-control和expires的屬性，可設定瀏覽器快取，快取時間可以是數天，甚至是幾個月
• 在某些時候，靜態資源檔案變化需要及時應用到客戶端瀏覽器，這種情況，可通過改變檔案名實作，即更新javascript檔案并不是更新javascript檔案內容，而是生成一個新的JS檔案并更新HTML檔案中的參考，
• 在某些時候，靜態資源檔案變化需要及時應用到客戶端瀏覽器，這種情況，可通過改變檔案名實作，即更新javascript檔案并不是更新javascript檔案內容，而是生成一個新的JS檔案并更新HTML檔案中的參考，

減少cookie傳輸

一方面，cookie包含在每次請求和回應中，太大的cookie會嚴重影響資料傳輸，因此哪些資料需要寫入cookie需要慎重考慮，盡量減少cookie中傳輸的資料量，另一方面，對于某些靜態資源的訪問，如CSS、script等，發送cookie沒有意義，可以考慮靜態資源使用獨立域名訪問，避免請求靜態資源時發送cookie，減少cookie傳輸次數，

Js代碼優化

這是專案中用的比較多的樣式布局，是從外網搬用的，對于自己造的比較好用的輪子，可以封裝成組件進行復用，避免代碼的冗余，

一次200多行，最好封裝成vue組件，

輸入框防抖和登錄處理

這篇文章很好的解釋了防抖和節流，

啊這，，，，必要性，

利用本地存盤

從 Cookie 到 Web Storage、IndexDB

• Cookie 是有體積上限的，它最大只能有 4KB，當 Cookie 超過 4KB 時，它將面臨被裁切的命運，這樣看來，Cookie 只能用來存取少量的資訊，
• Web Storage 是 HTML5 專門為瀏覽器存盤而提供的資料存盤機制，它又分為 Local Storage 與 Session Storage，
• Local Storage 是持久化的本地存盤，存盤在其中的資料是永遠不會過期的，使其消失的唯一辦法是手動洗掉；而 Session Storage 是臨時性的本地存盤，它是會話級別的存盤，當會話結束（頁面被關閉）時，存盤內容也隨之被釋放，
• Local Storage、Session Storage 和 Cookie 都遵循同源策略，但 Session Storage 特別的一點在于，即便是相同域名下的兩個頁面，只要它們不在同一個瀏覽器視窗中打開，那么它們的 Session Storage 內容便無法共享，
• IndexDB 是一個運行在瀏覽器上的非關系型資料庫，既然是資料庫了，那就不是 5M、10M 這樣小打小鬧級別了，理論上來說，IndexDB 是沒有存盤上限的（一般來說不會小于 250M），它不僅可以存盤字串，還可以存盤二進制資料，

// 將介面回傳的用戶存盤到本地方便應用
            window.sessionStorage.setItem('user', JSON.stringify(res.data.data))
            // 通過編程式導航跳轉到后臺主頁
            this.$router.push('/page')

一般的操作都只是把token存到web storage里面，但其實還有很多不長更新的頁面，和css等，都可以暫存到瀏覽器本地中，

總結下來，對于專案還有很多細化和優化的地方需要去做，但是這次專案的實戰對個人和團隊的提升是非凡的，無論是從產品設計，業務流程，前端渲染，后端服務，git協同，聯調互動等，每個人對于自己的任務都非常清晰，希望它能成為每個人簡歷上的閃光點，

望大家共同努力，不止“小有智慧”，更能大有成就，