前言
相親交友原始碼效能優化是相親交友原始碼前端開發人員的必備知識，可以說是每個開發人員必須會的知識了，不僅平時會用到，連面試都會問到。那如何優化前端的效能呢？總共有七大手段
七大手段包括減少請求數量、減小資源大小、優化網路連線、優化資源載入、減少重繪迴流、使用效能更好的API和構建優化。
減少請求數量
1、檔案與檔案之間有插入的上行請求，增加了N-1個網路延遲
2、受丟包問題影響更嚴重
3、經過代理伺服器時可能會被斷開
CSS雪碧圖是以前非常流行的技術，把網站上的一些圖片整合到一張單獨的圖片中，可以減少網站的HTTP請求數量，但是當整合圖片比較大時，一次載入比較慢。隨著字型圖片、SVG圖片的流行，該技術漸漸退出了歷史舞臺
將圖片的內容以Base64格式內嵌到HTML中，可以減少HTTP請求數量。但是，由於Base64編碼用8位字元表示資訊中的6個位，所以編碼後大小大約比原始值擴大了 33%
儘量避免使用重定向，當相親交友原始碼頁面發生了重定向，就會延遲整個HTML文件的傳輸。在HTML文件到達之前，頁面中不會呈現任何東西，也沒有任何元件會被下載，降低了使用者體驗
如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302臨時重定向。因為，如果使用302，則每一次訪問http，都會被重定向到https的頁面。而永久重定向，在第一次從http重定向到https之後 ，每次訪問http，會直接返回https的頁面
使用cach-control或expires這類強快取時，快取不過期的情況下，不向相親交友原始碼伺服器傳送請求。強快取過期時，會使用last-modified或etag這類協商快取，向伺服器傳送請求，如果資源沒有變化，則伺服器返回304響應，瀏覽器繼續從本地快取載入資源；如果資源更新了，則伺服器將更新後的資源傳送到瀏覽器，並返回200響應
a標籤設定空的href，會重定向到當前的頁面地址
form設定空的method，會提交表單到當前的頁面地址
減小資源大小
HTML程式碼壓縮就是壓縮在相親交友原始碼文字檔案中有意義，但是在HTML中不顯示的字元，包括空格，製表符，換行符等
JS壓縮與混亂包括無效字元及註釋的刪除、程式碼語義的縮減和優化、降低程式碼可讀性，實現程式碼保護
【webp】
在安卓下相親交友原始碼可以使用webp格式的圖片，它具有更優的影像資料壓縮演算法，能帶來更小的圖片體積，同等畫面質量下，體積比jpg、png少了25%以上，而且同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性
HTTP協議上的GZIP編碼是一種用來改進WEB應用程式效能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓使用者感受更快的速度。這一般是指WWW伺服器中安裝的一個功能，當有人來訪問這個伺服器中的相親交友原始碼時，伺服器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來。一般對純文字內容可壓縮到原大小的40%
優化網路連線
CDN全稱是Content Delivery Network，即內容分發網路，它能夠實時地根據網路流量和各節點的連線、負載狀況以及到使用者的距離和響應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。其目的是使使用者可就近取得所需相親交友原始碼內容，解決 Internet網路擁擠的狀況，提高使用者訪問網站的響應速度
當相親交友原始碼訪問一個域名的時候，需要解析一次DNS，獲得對應域名的ip地址。在解析過程中，按照瀏覽器快取、系統快取、路由器快取、ISP(運營商)DNS快取、根域名伺服器、頂級域名伺服器、主域名伺服器的順序，逐步讀取快取，直到拿到IP地址
DNS Prefetch，即DNS預解析就是根據瀏覽器定義的規則，提前解析之後可能會用到的域名，使解析結果快取到系統快取中，縮短DNS解析時間，來提高網站的訪問速度
方法是在 head 標籤裡面寫上幾個 link 標籤
<link rel="dns-prefecth" href="
對以上幾個網站提前解析 DNS，由於它是並行的，不會堵塞頁面渲染，這樣可以縮短資源載入的時間
由於在HTTP1.1協議下，chrome每個域名的最大併發數是6個。使用多個域名，可以增加併發數
使用keep-alive或presistent來建立持久連線，持久連線降低了時延和連線建立的開銷，將連線保持在已調諧狀態，而且減少了開啟連線的潛在數量
在HTTP2協議中，可以開啟管道化連線，即單條連線的多路複用，每條連線中併發傳輸多個資源，這裡就不需要新增域名來增加併發數了
優化資源載入
通過優化資源載入位置，更改資源載入時機，使盡可能快地展示出頁面內容，儘可能快地使功能可用
3、相親交友原始碼處理頁面、處理頁面佈局的JS檔案放在head中，如babel-polyfill.js檔案、flexible.js檔案
4、body中間儘量不寫style標籤和script標籤
defer: 非同步載入，在HTML解析完成後執行。defer的實際效果與將程式碼放在body底部類似
async: 非同步載入，載入完成後立即執行
在SPA等業務邏輯比較複雜的系統中，需要根據路由來載入當前頁面需要的業務模組
按需載入，是一種很好的優化相親交友原始碼的方式。這種方式實際上是先把程式碼在一些邏輯斷點處分離開，然後在一些程式碼塊中完成某些操作後，立即引用或即將引用另外一些新的程式碼塊。這樣加快了應用的初始載入速度，減輕了它的總體體積，因為某些程式碼塊可能永遠不會被載入
webpack 提供了兩個類似的技術，優先選擇的方式是使用符合 ECMAScript 提案 的 import() 語法。第二種則是使用 webpack 特定的 require.ensure
3、使用資源預載入preload和資源預讀取prefetch
preload讓相親交友原始碼提前載入指定資源，需要執行時再執行，可以加速本頁面的載入速度
prefetch告訴相親交友原始碼載入下一頁面可能會用到的資源，可以加速下一個頁面的載入速度
相親交友原始碼資源延遲載入也稱為懶載入，延遲載入資源或符合某些條件時才載入某些資源
相親交友原始碼資源預載入是提前載入使用者所需的資源，保證良好的使用者體驗
資源懶載入和資源預載入都是一種錯峰操作，在瀏覽器忙碌的時候不做操作，瀏覽器空間時，再載入資源，優化了網路效能
減少重繪迴流
1、避免相親交友原始碼使用層級較深的選擇器，或其他一些複雜的選擇器，以提高CSS渲染效率
2、避免使用CSS表示式，CSS表示式是動態設定CSS屬性的強大但危險方法，它的問題就在於計算頻率很快。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次
3、元素適當地定義高度或最小高度，否則元素的動態內容載入時，相親交友原始碼會出現頁面元素的晃動或位置，造成迴流
4、給圖片設定尺寸。如果圖片不設定尺寸，首次載入時，佔據空間會從0到完全出現，上下左右都可能位移，發生迴流
5、不要使用table佈局，因為一個小改動可能會造成整個table重新佈局。而且table渲染通常要3倍於同等元素時間
6、能夠使用CSS實現的效果，儘量使用CSS而不使用JS實現
1、此外，將需要多次重繪的元素獨立為render layer渲染層，如設定absolute，可以減少重繪範圍
2、對於一些進行動畫的元素，使用硬體渲染，從而避免相親交友原始碼重繪和迴流
const div = document.getElementById('div')
由於查詢DOM比較耗時，在同一個節點無需多次查詢的情況下，可以快取DOM
HTML 中標籤元素越多，標籤的層級越深，相親交友原始碼解析DOM並繪製到瀏覽器中所花的時間就越長，所以應儘可能保持 DOM 元素簡潔和層級較少。
由於DOM操作比較耗時，且可能會造成迴流，因此要避免相親交友原始碼頻繁操作DOM，可以批量操作DOM，先用字串拼接完畢，再用innerHTML更新DOM
通過切換class或者使用元素的style.csstext屬性去批量操作元素樣式
使用DocumentFragment物件，讓DOM操作發生在記憶體中，而不是頁面上
對DOM進行相關操作時，例、appendChild等都可以使用Document Fragment物件進行離線操作，帶元素“組裝”完成後再一次插入頁面，或者使用display:none 對元素隱藏，在元素“消失”後進行相關操作
瀏覽器具有惰性渲染機制，連線多次修改DOM可能只觸發瀏覽器的一次渲染。而如果修改DOM後，立即讀取DOM。為了保證讀取到正確的DOM值，會觸發相親交友原始碼的一次渲染。因此，修改DOM的操作要與訪問DOM分開進行
事件代理是指將事件監聽器註冊在父級元素上，由於子元素的事件會通過事件冒泡的方式向上傳播到父節點，因此，可以由父節點的監聽函式統一處理多個子元素的事件
利用事件代理，可以減少記憶體使用，提高效能及降低程式碼複雜度
使用函式節流（throttle）或函式去抖（debounce），限制某一個方法的頻繁觸發
及時消除物件引用，清除定時器，清除事件監聽器，建立最小作用域變數，可以及時回收相親交友原始碼記憶體
效能更好的API
選擇器的效能排序如下所示，儘量選擇效能更好的選擇器
id選擇器（#myid）
類選擇器（.myclassname）
標籤選擇器（div,h1,p）
相鄰選擇器（h1+p）
子選擇器（ul > li）
後代選擇器（li a）
萬用字元選擇器（*）
屬性選擇器（a[rel="external"]）
偽類選擇器（a:hover,li:nth-child）
2、使用requestAnimationFrame來替代setTimeout和setInterval
希望在每一幀剛開始的時候對相親交友原始碼頁面進行更改，目前只有使用 requestAnimationFrame 能夠保證這一點。使用 setTimeout 或者 setInterval 來觸發更新頁面的函式，該函式可能在一幀的中間或者結束的時間點上呼叫，進而導致該幀後面需要進行的事情沒有完成，引發丟幀
3、使用IntersectionObserver來實現圖片可視區域的懶載入
傳統的做法中，需要使用scroll事件，並呼叫getBoundingClientRect方法，來實現可視區域的判斷，即使使用了函式節流，也會造成頁面迴流。使用IntersectionObserver，則沒有上述問題
相親交友原始碼客戶端javascript一個基本的特性是單執行緒：比如，瀏覽器無法同時執行兩個事件處理程式，它也無法在一個事件處理程式執行的時候觸發一個計時器。Web Worker是HTML5提供的一個javascript多執行緒解決方案，可以將一些大計算量的程式碼交由web Worker執行，從而避免阻塞使用者介面，在執行復雜計算和資料處理時，這個API非常有用
但是，使用一些新的API的同時，也要注意其瀏覽器相容性
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來實現的
1、將hash替換為chunkhash，這樣當chunk不變時，快取依然有效
每個 module.id 會基於預設的解析順序(resolve order)進行增量。也就是說，當解析順序發生變化，ID 也會隨之改變
下面來使用兩個外掛解決這個問題。第一個外掛是 NamedModulesPlugin，將使用模組的路徑，而不是數字識別符號。雖然此外掛有助於在開發過程中輸出結果的可讀性，然而執行時間會長一些。第二個選擇是使用 HashedModuleIdsPlugin，推薦用於生產環境構建
【公用程式碼內聯】
使用html-webpack-inline-chunk-plugin外掛將mainfest.js內聯到html檔案中
本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：https://juejin.cn/post/7016868803069886471
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2806951/，如需轉載，請註明出處，否則將追究法律責任。