一、如何優化
用戶在訪問網頁時， 最直觀的感受就是頁面內容出來的速度，我們要做的優化作業， 也主要是為了這個目標，那么為了提高頁面加載（或者渲染）速度呢？一般來說有三個方面：
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/ 即可使用，
本文出自： https://www.cnblogs.com/wetest/p/7738862.html
如果對使用當中有任何疑問，歡迎聯系騰訊WeTest企業QQ：800024531
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/21575.html
標籤：HTML5
下一篇：前端之道