WeTest 導讀

此文總結了筆者在Web靜態資源方面的一些優化經驗。

一、如何優化

用戶在訪問網頁時， 最直觀的感受就是頁面內容出來的速度，我們要做的優化工作， 也主要是為了這個目標。那麽為了提高頁面加載（或者渲染）速度呢？一般來說有三個方面：

1、代碼邏輯：優秀的代碼邏輯結構可以有效減少渲染頁面使用的內存和速度（比如虛擬DOM），此方面不在本文討論範圍內。

2、SSR服務器渲染，也就是所謂的“直出”。將首屏所有內容在服務器端渲染成html靜態代碼後，直接輸出給瀏覽器，可以有效加快用戶訪問站點時首屏的加載時間。不過此方面也不在本文討論範圍內。

3、提升靜態文件的加載速度，這是本文會討論的點，而這方面大致又可分為下面幾點：

— 加快靜態文件下載速度

— 減少靜態文件的文件大小

— 減少靜態文件請求數量，從而減少發起請求的次數（對於移動端頁面來說，請求的開銷比網速的開銷要大）

（一）代碼壓縮

最常規的優化手段之一。

我們在平時開發的時候，JS腳本文件和CSS樣式文件中的代碼，都會依據一定的代碼規範（比如javascript-standard-style）來提高項目的可維護性，以及團隊之間合作的效率。

但是在項目發布現網後， 這些代碼是給客戶端（瀏覽器）識別的，此時代碼的命名規範、空格縮進都已沒有必要，我們可以使用工具將這些代碼進行混淆和壓縮，減少靜態文件的大小

這裏我們選擇使用Webpack，具體會在後面介紹。

（二）文件合並

在npm流行的今天，前端在進行項目開發的時候，往往會使用很多第三方代碼庫，比如jQuery，axios，weixin-js-sdk，lodash，bootstrap等等，每個庫都有屬於自己的腳本或者樣式文件。

按照最老的方式的話，我們會用<script>標簽或者<style>標簽分別引入這些庫文件，導致在打開一個頁面的時候會發起幾十個請求，這對於移動端來說是不可接受的。

在減少文件請求數量方面大致有以下三方面：

1、合並js腳本文件

2、合並css樣式文件

3、合並css引用的圖片，使用sprite雪碧圖。

對於雪碧圖 ，我們可以把頁面上用到的多個細碎的小圖片合並成一個大圖片，把N個圖片請求合並成了一個。然後在css樣式中指定圖片偏移，來實現顯示不同的圖片，如下圖：

這裏我們繼續選擇使用Webpack，具體會在後面介紹。

（三）gzip

我們的文件在壓縮合並之後，文件大小和文件數量都有了客觀的減少。但是一旦站點業務邏輯多了，或者引入的第三方庫多了之後，對於移動端來說，文件大小還是不太樂觀。

這個時候就是gzip壓縮登場的時候啦~我們在webpack的配置中增加gzip壓縮配置：

上面代碼會對文件大小大於10240，並且壓縮率好於0.8的js、css文件進行gzip壓縮，執行打包代碼後生成結果文件如下：

我們可以看到除了原有的js和css文件外，我們還得到了壓縮後的gz文件。

把所有這些文件一起部署到服務器上。（當然也可以直接nginx或其他web server配置gzip壓縮）

我們可以看到vendor.[hash].js文件的大小顯著減少，從318kb減少到了不到100kb。

（四）CDN和緩存

為什麽使用CDN?
CDN 是一個全球（或者只有國內，具體看供應商）分布式網絡，它把網站內容更快地傳遞給服務範圍內的一個具體位置，而往往這個具體的位置離實際的內容服務器距離很遠。舉個極端點的例子，你的網站主機在愛爾蘭（海南），而你的用戶則在澳大利亞（漠河）訪問。這時當你的用戶訪問你的網站的時候，延遲會很大，把你的（靜態）數據用 CDN 放到澳大利亞（漠河）則會很大程度上提高用戶訪問網站的體驗。

如果沒有CDN服務，我們可以添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存。

（五）安全方面: CSP

web前端對於xss安全漏洞一定不陌生。我們知道Javascript語句甚至是css表達式都可能導致xss攻擊，現在很多前端會使用CSP策略來進行腳本源的限制防禦。

而我們由於使用的cdn域名和業務域名不一樣：
cdn域名：https://cdn.xxx.qq.com
業務域名：https://xxx.qq.com

我們可以：

1. 在index.html靜態入口文件的meta http-equiv頭中做配置；

服務器端直接返回相應的HTTP response header頭信息；

例如：

這裏除了指定了cdn的域名源，告訴瀏覽器從這個域名加載的js文件都是可信的。同時因為我們使用的webpack打包壓縮代碼後的一些特性，我們還需要加上‘unsafe-inline‘標識。

使用CSP策略我們可以指定瀏覽器安全解析script、css、fonts、media等資源的源與方式。

參考資料有：

Content Security Policy Reference

Content Security Policy 入門教程

二、webpack2.0

使用webpack2最重要的地方就是使用它tree-shaking的特性。這個特性對於ES6的module管理有著非常優美的優化，大概能減少30%左右的包體積。

ES module和CommonJS的require模塊管理不同，前者是基於靜態的，而後者是動態的。

（一）CJS：

允許動態同步 require()

導出僅在模塊執行後才知道

導出可以在模塊初始化後添加，替換和刪除

（二）ES module：

只允許靜態同步 import

在模塊執行之前，導入和導出已經關聯

導入和導出是不可變的

現在我們來看一下如何使用webpack：

（三）代碼壓縮

我們自己寫的代碼因為在開發時需要遵循一定的代碼規範，所以會有很多多余的換行和空格字符，甚至是便於閱讀的長變量名，這些其實對於機器（瀏覽器）來說，都不是必要的。所以我們可以把這些都幹掉。比如我們寫的代碼可能是這樣的：

接著我們就使用Webpack來進行壓縮。首先，需要在工程根目錄的package.json（相信使用過npm包管理的前端同學一定不陌生）文件中添加webpack的依賴配置：

各個工程應該按需引入需要的loader和webpack-plugin庫。有一點需要註意的是：webpack本身是沒有對各個類型的文件進行分析處理的能力的，這個時候我們需要使用各種第三方庫的loader，比如css-loader等（當然我們也可以自己編寫loader）。同時webpack也有強大的第三方Plugin插件供我們對文件進行進一步處理。

接下來我們就可以在scripts中指向的腳本文件裏編寫webpack對應的構建代碼了。

例如在webpackConfig配置中的plugins屬性數組中，我們可以添加以下配置：

而最終生成的文件結構如下：

我們可以看到所有樣式代碼被壓縮後抽離到了一個app.[hash].css文件中，所有js邏輯代碼按照業務邏輯和第三方庫被抽離到了app.[hash].js和vendor.[hash].js文件中。

被打包文件的內容也已經被webpack壓縮混淆，減少了加載文件的Content Size。

關於其他的webpack用法配置，可以查詢官方文檔和中文文檔，這裏就不一一詳細說明了

目前webpack3 和webpack4使用了新的方式打包代碼，可以進一步提升js在瀏覽器中的執行效率。

三、題外話

跨域方面: CORS

我們知道由於現代瀏覽器安全策略的不斷完善，對跨域請求的限制也是各種各樣。

當我們保存在靜態資源文件中的script對其他域名發起請求時就會遇到跨域問題，如果沒有做任何措施，請求會被瀏覽器攔截。

當前主流的跨域解決方案主要是JSONP和CORS

由表可見，隨著前端不斷發展，CORS跨域是大趨勢。
CORS需要被請求端根據請求者的host，與白名單比對後返回正確的HTTP response header頭信息。

詳情內容建議閱讀MDN的官方文檔

四、優化效果的驗證

為了能夠對前端優化效果有一個系統的驗證，憑借肉眼來感受頁面響應速度肯定是遠遠不夠的，我們可以通過一些針對服務器性能測試的產品來驗證頁面的響應時間，這裏推薦一個“壓測大師”。可以通過配置訪問過程中的最大人數，獲取訪問後的性能效果，如圖：

騰訊WeTest壓測大師對包含Web，H5等頁面準備了針對性的方案，解決了多數壓測人員Web頁面壓測的問題。

壓測大師服務了包括王者榮耀、龍之谷手遊、軒轅傳奇手遊、火影忍者等多款高星級手遊，也包括QQ、NOW直播等明星產品，通過基於真實業務場景和用戶行為進行壓力測試，幫助開發者發現服務器端的性能瓶頸，進行針對性的性能調優，降低服務器采購和維護成本。

為了讓外部更多產品能夠享受到簡單易用的壓測產品，騰訊WeTest決定將這份服務器測試能力產品化，以產品”壓測大師“的形式，正式對外開放。目前更有低至四折的時效資源包優惠，歡迎大家使用！

點擊鏈接：http://wetest.qq.com/gaps/ 即可使用。

如果對使用當中有任何疑問，歡迎聯系騰訊WeTest企業QQ：800024531

Web前端性能優化——如何有效提升靜態文件的加載速度