關於前端優化的一些方案

時間 2019-11-07

標籤關於前端優化一些方案简体版

原文原文鏈接

前言

對於前端的性能話題,這絕對是老生常談的話題，無論是在工做中換是生活中，多多少少都會提到關於前端性能優化的問題，做爲一個前端開發者，性能是咱們關注的指標。公司的大佬也會關注這方面的發展，畢竟它直接影響着咱們的用戶，同時也影響着產品自己。前端發展以來，優化方式，所以，準備一篇經常使用的優化方式進行總結，或許，並不全面，不足的地方但願路過的大佬指點迷津。歡迎關注個人博客~javascript

1、減少資源大小

1、壓縮css

HTML壓縮HTML代碼壓縮就是壓縮在文本文件中有意義，可是在HTML中不顯示的字符，包括空格，製表符，換行符等.
CSS壓縮CSS壓縮包括無效代碼刪除與CSS語義合併以及空格，製表符，換行符。
JS壓縮與混淆JS壓縮與混亂包括無效字符及註釋的刪除、代碼語義的縮減和優化、下降代碼可讀性，實現代碼保護
圖片壓縮針對真實圖片狀況，捨棄一些相對可有可無的色彩信息
gzip壓縮HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。大流量的WEB站點經常使用GZIP壓縮技術來讓用戶感覺更快的速度。這通常是指WWW服務器中安裝的一個功能，當有人來訪問這個服務器中的網站時，服務器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來。通常對純文本內容可壓縮到原大小的40%.

2、減小請求數量

2-一、合併文件

公共庫合併
不一樣頁面單獨合併

2-二、圖片處理html

一、雪碧圖前端

CSS雪碧圖是之前很是流行的技術，把網站上的一些圖片整合到一張單獨的圖片中，能夠減小網站的HTTP請求數量，可是當整合圖片比較大時，一次加載比較慢。隨着字體圖片、SVG圖片的流行，該技術漸漸退出了歷史舞臺java

二、Base64webpack

將圖片的內容以Base64格式內嵌到HTML中，能夠減小HTTP請求數量。可是，因爲Base64編碼用8位字符表示信息中的6個位，因此編碼後大小大約比原始值擴大了 33%程序員

三、使用字體圖標來代替圖片web

2-三、減小重定向ajax

儘可能避免使用重定向，當頁面發生了重定向，就會延遲整個HTML文檔的傳輸。在HTML文檔到達以前，頁面中不會呈現任何東西，也沒有任何組件會被下載，下降了用戶體驗canvas

若是必定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302臨時重定向。由於，若是使用302，則每一次訪問http，都會被重定向到https的頁面。而永久重定向，在第一次從http重定向到https以後，每次訪問http，會直接返回https的頁面

2-四、使用緩存

因爲瀏覽器會在DNS解析步驟中消耗必定的時間，因此，對於一些高訪問量網站來講，作好DNS的緩存工做，就會必定程度上提高網站效率。

CDN緩存，CDN做爲靜態資源文件的分發網絡，自己就已經提高了，網站靜態資源的獲取速度，加快網站的加載速度，同時也給靜態資源作好緩存工做，有效的利用已緩存的靜態資源，加快獲取速度。
http緩存，也是給資源設定緩存時間，防止在有效的緩存時間內對資源進行重複的下載，從而提高總體網頁的加載速度。

使用Cache-control或expires這類強緩存時，緩存不過時的狀況下，不向服務器發送請求。強緩存過時時，會使用last-modified或etag這類協商緩存，向服務器發送請求，若是資源沒有變化，則服務器返回304響應，瀏覽器繼續從本地緩存加載資源；若是資源更新了，則服務器將更新後的資源發送到瀏覽器，並返回200響應.

2-五、不使用CSS @import避免使用空的src和href

CSS的@import會形成額外的請求
a標籤設置空的href，會重定向到當前的頁面地址
form設置空的method，會提交表單到當前的頁面地址

3、網絡鏈接的優化

【使用CND】CDN全稱是Content Delivery Network，即內容分發網絡，它可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。
【使用DNS預解析】當瀏覽器訪問一個域名的時候，須要解析一次DNS，得到對應域名的ip地址。在解析過程當中，按照瀏覽器緩存、系統緩存、路由器緩存、ISP(運營商)DNS緩存、根域名服務器、頂級域名服務器、主域名服務器的順序，逐步讀取緩存，直到拿到IP地址

DNS Prefetch，即DNS預解析就是根據瀏覽器定義的規則，提早解析以後可能會用到的域名，使解析結果緩存到系統緩存中，縮短DNS解析時間，來提升網站的訪問速度.

方法是在 <head> 標籤裏面寫上幾個 <link> 標籤

<link rel="dns-prefecth" href="xxxx.css">
<link rel="dns-prefecth" href="xxxxxxxx.css">
複製代碼

因爲它是並行的，不會堵塞頁面渲染，這樣能夠縮短資源加載的時間

4、優化資源加載

（一）、資源加載位置

經過優化資源加載位置，更改資源加載時機，使盡量快地展現出頁面內容，儘量快地使功能可用

CSS文件放在head中，先外鏈，後本頁

JS文件放在body底部，先外鏈，後本頁

處理頁面、處理頁面佈局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件

body中間儘可能不寫style標籤和script標籤

css文件 放在「head中」，能夠保證解析DOM的同時，解析css文件。由於，CSS（外鏈或內聯）會阻塞整個DOM的渲染，然而DOM解析會正常進行，因此將css文件放在頭部進行解析，能夠加快網頁的構建速度。

js文件，將js文件放在尾部或者異步加載的緣由是JS（外鏈或內聯）會阻塞後續DOM的解析，後續DOM的渲染也將被阻塞，並且一旦js中遇到DOM元素的操做，極可能會影響。

（二）、資源加載時機

一、異步script標籤

defer: 異步加載，在HTML解析完成後執行。defer的實際效果與將代碼放在body底部相似

async: 異步加載，加載完成後當即執行

二、模塊按需加載

在SPA等業務邏輯比較複雜的系統中，須要根據路由來加載當前頁面須要的業務模塊
複製代碼

按需加載，是一種很好的優化網頁或應用的方式。這種方式其實是先把代碼在一些邏輯斷點處分離開，而後在一些代碼塊中完成某些操做後，當即引用或即將引用另一些新的代碼塊。這樣加快了應用的初始加載速度，減輕了它的整體體積，由於某些代碼塊可能永遠不會被加載

webpack 提供了兩個相似的技術，優先選擇的方式是使用符合 ECMAScript 提案的import() 語法。第二種則是使用 webpack 特定的 require.ensure

三、使用資源預加載preload和資源預讀取prefetch

preload讓瀏覽器提早加載指定資源，須要執行時再執行，能夠加速本頁面的加載速度

prefetch告訴瀏覽器加載下一頁面可能會用到的資源，能夠加速下一個頁面的加載速度

四、資源懶加載與資源預加載

資源延遲加載也稱爲懶加載，延遲加載資源或符合某些條件時才加載某些資源.
資源預加載是提早加載用戶所需的資源，保證良好的用戶體驗.
資源懶加載和資源預加載都是一種錯峯操做，在瀏覽器忙碌的時候不作操做，瀏覽器空間時，再加載資源，優化了網絡性能.

5、減小重繪與迴流

5-一、DOM操做優化

儘可能減小css表達式的使用

適當使用canvas

使用class代替大量的內聯樣式修改

儘可能使用css動畫

HTML 中標籤元素越多，標籤的層級越深，瀏覽器解析DOM並繪製到瀏覽器中所花的時間就越長，因此應儘量保持 DOM 元素簡潔和層級較少

避免在document上直接進行頻繁的DOM操做

因爲DOM操做比較耗時，且可能會形成迴流，所以要避免頻繁操做DOM，能夠批量操做DOM，先用字符串拼接完畢，再用innerHTML更新DOM

使用requestAnimationFrame代替setInterval操做

對於複雜的UI元素，設置position爲absolute或fixed

使用事件代理

函數節流（throttle）或函數去抖（debounce），限制某一個方法的頻繁觸發

及時消除對象引用，清除定時器，清除事件監聽器，建立最小做用域變量，能夠及時回收內存

5-二、css樣式操做優化

避免使用層級較深的選擇器，或其餘一些複雜的選擇器，以提升CSS渲染效率

二、避免使用CSS表達式，CSS表達式是動態設置CSS屬性的強大但危險方法，它的問題就在於計算頻率很快。不只僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動鼠標時都會要從新計算一次

三、元素適當地定義高度或最小高度，不然元素的動態內容載入時，會出現頁面元素的晃動或位置，形成迴流

四、給圖片設置尺寸。若是圖片不設置尺寸，首次載入時，佔據空間會從0到徹底出現，上下左右均可能位移，發生迴流

五、不要使用table佈局，由於一個小改動可能會形成整個table從新佈局。並且table渲染一般要3倍於同等元素時間

六、可以使用CSS實現的效果，儘可能使用CSS而不使用JS實現

這篇文章對你仍是有幫助的CSS書寫規範和順序

5-三、性能更好的API

一、用對選擇器

選擇器的性能排序以下所示，儘可能選擇性能更好的選擇器

id選擇器（#myid）
類選擇器（.myclassname）
標籤選擇器（div,h1,p）
相鄰選擇器（h1+p）
子選擇器（ul > li）
後代選擇器（li a）
通配符選擇器（*）
屬性選擇器（a[rel="external"]）
僞類選擇器（a:hover,li:nth-child）
複製代碼

二、使用requestAnimationFrame來替代setTimeout和setInterval

但願在每一幀剛開始的時候對頁面進行更改，目前只有使用 requestAnimationFrame 可以保證這一點。使用 setTimeout 或者 setInterval 來觸發更新頁面的函數，該函數可能在一幀的中間或者結束的時間點上調用，進而致使該幀後面須要進行的事情沒有完成，引起丟幀.

三、使用IntersectionObserver來實現圖片可視區域的懶加載

傳統的作法中，須要使用scroll事件，並調用getBoundingClientRect方法，來實現可視區域的判斷，即便使用了函數節流，也會形成頁面迴流。使用IntersectionObserver，則沒有上述問題

四、使用web worker

客戶端javascript一個基本的特性是單線程：好比，瀏覽器沒法同時運行兩個事件處理程序，它也沒法在一個事件處理程序運行的時候觸發一個計時器。Web Worker是HTML5提供的一個javascript多線程解決方案，能夠將一些大計算量的代碼交由web Worker運行，從而避免阻塞用戶界面，在執行復雜計算和數據處理時，這個API很是有用

可是，使用一些新的API的同時，也要注意其瀏覽器兼容性.

6、數據方面

數據，也能夠說是前端優化方面比較重要的一塊內容。頁面與用戶的交互響應，每每伴隨着數據交互，處理，以及ajax的異步請求等內容。

「圖片預加載」，預加載的寓意就是提早加載內容。而圖片的預加載每每會被用在圖片資源比較大，即時加載時會致使很長的等待過程時，纔會被使用的。常見場景：圖片漫畫展現時。每每會預加載一張到兩張的圖片。
「圖片懶加載」，懶加載或許你是第一次據說，可是，這種方式在開發中會被常用。首先，咱們須要明白一個道理：每每只有看到的資源是必須的，其餘資源是能夠隨着用戶的滾動，隨即顯示的。因此，特別是對於圖片資源特別多的網站來講，作好圖片的懶加載是能夠大大提高網頁的載入速度的。

常見的圖片懶加載的方式就是：在最初給圖片的src設置一個比較簡單的圖片，而後將圖片的真實地址設置給自定義的屬性，作一個佔位，而後給圖片設置監聽事件，一旦圖片到達視口範圍，從圖片的自定義屬性中獲取出真是地址，而後賦值給src，讓其進行加載。

「首屏loading的顯示」：每每對於首屏優化後的數據量並不滿意的話，同時也不能進一步縮短首屏包的長度了，就可使用進度條的方式，來提醒用戶進行等待。
「JSON交互」，JSON的數據格式輕巧，結構簡單，每每能夠大大優化先後端的數據通訊。
「經常使用數據的緩存」，能夠將一些用戶的基本信息等經常使用的信息作一個緩存，這樣能夠保證ajax請求的減小。同時，HTML5新增的storage的內容，也不用怕cookie暴露，引發的信息泄漏問題。
「數據埋點和統計」，對於資深的程序員來講，比較瞭解。並且目前的大部分公司也會作這方面的處理。

7、webpack優化

【打包公共代碼】

使用CommonsChunkPlugin插件，將公共模塊拆出來，最終合成的文件可以在最開始的時候加載一次，便存到緩存中供後續使用。這會帶來速度上的提高，由於瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件

webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個新的配置項optimization.splitChunks和 optimization.runtimeChunk 經過設置 optimization.splitChunks.chunks: "all" 來啓動默認的代碼分割配置項

【動態導入和按需加載】

webpack提供了兩種技術經過模塊的內聯函數調用來分離代碼，優先選擇的方式是，使用符合 ECMAScript 提案的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure

【剔除無用代碼】

tree shaking 是一個術語，一般用於描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴於 ES2015 模塊系統中的靜態結構特性，例如 import 和 export。這個術語和概念其實是興起於 ES2015 模塊打包工具 rollup

JS的tree shaking主要經過uglifyjs插件來完成，CSS的tree shaking主要經過purify CSS來實現的

【長緩存優化】

一、將hash替換爲chunkhash，這樣當chunk不變時，緩存依然有效

二、使用Name而不是id

每一個 module.id 會基於默認的解析順序(resolve order)進行增量。也就是說，當解析順序發生變化，ID 也會隨之改變

下面來使用兩個插件解決這個問題。第一個插件是 NamedModulesPlugin，將使用模塊的路徑，而不是數字標識符。雖然此插件有助於在開發過程當中輸出結果的可讀性，然而執行時間會長一些。第二個選擇是使用 HashedModuleIdsPlugin，推薦用於生產環境構建

【公用代碼內聯】

使用html-webpack-inline-chunk-plugin插件將mainfest.js內聯到html文件中