做好陪玩系統原始碼的前端效能優化，提升系統效能

雲豹科技程式設計師發表於2021-10-14
原始碼前端優化

前端效能優化

為什麼要做陪玩系統原始碼效能優化？效能優化有多重要？陪玩系統原始碼的效能對於使用者的留存率、轉化率有很大的影響，直白的說，提高陪玩系統原始碼的效能可以直接提高陪玩系統原始碼帶來的收益。

效能優化的分類

陪玩系統原始碼前端的效能優化主要分為兩類：

1、載入時優化；
2、執行時優化；

例如壓縮檔案、使用CDN載入靜態資源屬於載入時優化；及時的解綁事件、減少DOM的操作屬於執行時優化。

吉德林法則：遇到問題，只有先弄清楚問題，才能很好地解決問題。所以在做效能優化之前，最好先看一下網站的載入效能和執行效能。

手動檢查

檢查載入效能

陪玩系統原始碼看載入效能如何主要看首屏時間和白屏時間。

1、白屏時間：指點選陪玩系統原始碼圖示，到頁面開始顯示內容的時間；
2、首屏時間：指點選陪玩系統原始碼圖示，頁面完全載入完成之後的時間；

可以將以下程式碼放在前，就能獲取白屏頁面白屏時間。

<script>
    new Date().getTime() -performance.timing.navigationStart</script>

在 window.onload 事件裡執行 new Date().getTime() - performance.timing.navigationStart 可以獲取首屏完全載入所用時間。

載入時效能優化

1.減少HTTP請求

一個完整的http請求要經歷DNS查詢，TCP握手，陪玩系統原始碼發出http請求，伺服器接收請求，伺服器處理請求併發迴響應，陪玩系統原始碼接收響應過程。下圖為一個http請求例項：
在這裡插入圖片描述

名詞解釋：

  • Queueing: 在請求佇列中的時間；
  • Stalled: 從TCP連線建立完成，到真正可以傳輸資料之間的時間差，此事件包括代理協商時間。
  • Proxy negotiation：與代理伺服器連線進行協商所花費的時間。
  • DNS Lookup：執行DNS查詢所需要的時間，頁面上每個不同的域都需要進行DNS查詢。
  • Initial Connection/Connecting: 建立連線所花費的時間，包括TCP握手/重試和協商SSL。
  • SSL：完成SSL握手所花費的時間。
  • Request sent: 發出網路請求所花費的時間。
  • Waiting(TTFB): TTFB是發出頁面請求到接受到應答資料的第一個位元組的時間。
  • Content Download: 接收響應資料所花費的時間。

可以看出真正的下載資料時間為13.05 / 204.16 = 6.39%，要提高這個比例，就要將多個小檔案合併為一個大檔案，從而減少HTTP請求次數的原因。

2.使用HTTP2

解析速度快

HTTP/2採用二進位制格式傳輸資料，而非HTTP/1的文字格式，二進位制協議解析起來更高效。HTTP/1的請求和響應報文，都是由起始行，首部和實體正文組成，各部分之間以文字換行符分隔。HTTP/2將請求和響應資料分隔為更小的幀，並且它們採用二進位制編碼。 HTTP/2中，同域名下所有的通訊都在單個連線上完成，該連線可以承載任意數量的雙向資料流。

多路複用

HTTP/1中，如果想併發多個請求，必須使用多個TCP連結，且陪玩系統原始碼為了控制資源，還會對單個域名有6-8個的TCP連結請求限制。 HTTP/2中，不再依賴TCP連結去實現多流並行了，在HTTP/2中：

  • 同域名下所有通訊都在單個TCP連線上完成
  • 單個連線可以承載任意數量的雙向資料流
  • 資料流以訊息的形式傳送，而訊息又有一個或多個幀組成，多個幀之間可以亂序傳送，因為根據幀首部的流標識可以重新組裝

這一特性，使效能有了極大的提升。

優先順序

在HTTP/2中，每個請求都可以帶一個31bit的優先值，0表示最高優先順序，數值越大優先順序越低。陪玩系統原始碼伺服器收到這樣的請求後，可以優先處理。

伺服器推送

HTTP2 新增的一個強大的新功能，就是陪玩系統原始碼伺服器可以對一個客戶端請求傳送多個響應。

陪玩系統原始碼服務端可以在傳送頁面HTML時主動推送其它資源，而不用等到瀏覽器解析到相應位置，發起請求再響應。例如服務端可以主動把JS和CSS檔案推送給客戶端，而不需要客戶端解析HTML時再傳送這些請求。

陪玩系統原始碼服務端可以主動推送，客戶端也有權利選擇是否接收。如果服務端推送的資源已經被瀏覽器快取過，瀏覽器可以通過傳送RST_STREAM幀來拒收。主動推送也遵守同源策略，伺服器不會隨便推送第三方資源給客戶端。

3.使用服務端渲染

陪玩系統原始碼客戶端渲染：獲取HTML檔案，根據需要下載javascript檔案，執行檔案，生成DOM，再渲染。

服務端渲染：服務端返回HTML檔案，客戶端只需要解析HTML。

  • 優點：首屏渲染快，SEO友好；
  • 缺點：涉及構建設定和部署的更多要求，更多的伺服器負載。

4.靜態資源使用CDN

內容分發網路（CDN）是一組分佈在多個不同地理位置的 Web 伺服器。我們都知道，當陪玩系統原始碼伺服器離使用者越遠時，延遲越高。CDN 就是為了解決這一問題，在多個位置部署伺服器，讓使用者離伺服器更近，從而縮短請求時間。

5.將css放在頭部，javascript檔案放在底部

所有放在 head 標籤裡的 CSS 和 JS 檔案都會堵塞渲染。如果這些 CSS 和 JS 需要載入和解析很久的話，那麼陪玩系統原始碼頁面就會一直顯示空白。所以 JS 檔案要放在底部，等 HTML 解析完了再載入 JS 檔案。

CSS放在頭部是因為：如果CSS放在尾部，會讓使用者第一時間看到沒有樣式的頁面，比較的‘難看’，為了避免這種情況發生，將CSS放在頭部。

6.使用字型圖示iconfont代替圖片圖示

陪玩系統原始碼字型圖示就是將圖示製作成一個字型，使用時就跟字型一樣，可以設定屬性，例如 font-size、color 等等，非常方便。並且字型圖示是向量圖，不會失真。還有一個優點是生成的檔案特別小。

壓縮字型檔案

使用fontmin-webpack外掛對字型檔案進行壓縮，可以更進一步的減小字型的大小。

7.善用快取，不重複載入相同資源

為了避免陪玩系統原始碼使用者每次訪問網站都得請求檔案，我們可以通過新增 Expires 或 max-age 來控制這一行為。Expires設定了一個絕對時間，只要在這個時間之前，瀏覽器都不會請求檔案，而是直接使用快取。而 max-age 是一個相對時間，建議使用 max-age 代替Expires。

  • max-age: 設定快取儲存的週期，超過這個時間快取被認為過期。在這個時間前，瀏覽器讀取檔案不會發出新請求，而是直接使用快取。
  • no-cache: 表示客戶端可以快取資源，每次使用快取資源都必須重新驗證其有效性。

8.壓縮檔案

壓縮檔案可以減少陪玩系統原始碼檔案的下載時間，提升使用者的體驗。

在webpack可以使用如下外掛進行壓縮：

  • javascript: UglifyPlugin
  • CSS: MiniCssExtractPlugin
  • HTML: HtmlwebpackPlugin

還可以使用gzip壓縮，可以通過向HTTP請求頭中的Accept-Encoding新增gzip標識來開啟這一功能。當然，伺服器也得支援這一功能。

配置：

const CompressionPlugin = require('compression-webpack-plugin')module.exports = {
    plugins: [new CompressionPlugin()]}

9.圖片優化

  • 圖片延遲載入

在陪玩系統原始碼頁面中，先不給圖片設定路徑，只有當圖片出現在可視區域內時，再去載入真正的圖片，這就是延遲載入。對於圖片很多的網站，一次性的載入太多的圖片會對使用者的體驗造成很大的影響。可以參考這篇文章 web前端圖片懶載入實現

  • 降低圖片質量

例如 JPG 格式的圖片，100% 的質量和 90% 質量的通常看不出來區別，尤其是用來當背景圖的時候。

壓縮方式有兩種：一種是通過線上壓縮網站；一種是通過webpack外掛image-webpack-plugin;

npm i -D image-webpack-loader

webpack配置

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            loader: 'image-webpack-loader',
            options: {
                bypassOnDebug: true            }
        }
    ]}
  • 儘可能使用CSS3效果代替圖片

儘量使用CSS的效果，比如漸變、陰影等，因為程式碼大小通常比圖片小得多；

10.按需載入程式碼，提取第三方庫程式碼，減少冗餘程式碼

  • 根據陪玩系統原始碼檔案內容生成檔名，結合import動態引入元件實現按需載入

通過webpack配置output的filename屬性的值選項中有一個[contenthash],它將根據檔案內容建立出一個hash。當檔案有變化時，[contenthash]也會有變化。

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].js',
  path: path.resolve(__dirname, '../dist'),},
  • 提取第三方庫

由於引入的第三方庫一般比較穩定，不會經常改變。所以將它們單獨提取出來，作為長期快取是一個更好的選擇。這裡需要使用webpack4的splitChunk外掛cacheGroups選項。

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'async',
            minChunks: 30000,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20，
                    reuseExistingChunk: true                }
            }
        }
    }}

快取組因該是SplitChunksPlugin中最有趣的功能了。在預設設定中，會將 node_mudules 資料夾中的模組打包進一個叫 vendors的bundle中，所有引用超過兩次的模組分配到 default bundle 中。更可以通過 priority 來設定優先順序。

reuseExistingChunk：表示是否使用已有的 chunk，如果為 true 則表示如果當前的 chunk 包含的模組已經被抽取出去了，那麼將不會重新生成新的。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：https://juejin.cn/post/7016870764557107237


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2806293/，如需轉載，請註明出處，否則將追究法律責任。

相關文章