前端開發優化的一些常見方法彙總

WEB前端開發經常使用的優化技巧彙總

減小HTTP請求的次數或者減少請求數據的大小

頁面中每發送一次HTTP請求，都須要完成請求加響應這個完整的HTTP事務，會消耗一些時間，也可能會致使HTTP連接通道的阻塞，爲了提升頁面的加載速度和運行的性能，咱們應該減小HTTP的請求次數和減小請求內容的大小（請求的內容越大，消耗的時間越長）。

1. 採用CSS雪碧圖（CSS Sprit/CSS 圖片精靈）技術，把一些小圖合併在一張大圖上，使用的時候經過背景圖片定位，定位在具體的某一張小圖上

   .pubBg{
       background: url('../img/sprit.png') no-repeat;
       background-size: x y; /*和圖片的大小保持一致*/
   }
   .box{
       background-position: x y; /*經過背景定位，定位到具體的位置，展現不一樣的圖片便可*/
   }
   <div class="pubBg box"></div>
   複製代碼

2. 真實項目中，咱們最好把CSS或者JS文件進行合併壓縮。尤爲是在移動端開發的時候，若是css或者js內容不是不少，咱們能夠採起內嵌式，以此減小HTTP請求的次數，加快頁面的加載速度

   1. CSS合併成一個，JS最好也合併成一個
   2. 首先經過一些工具（例如：webpack）把合併後的CSS或者JS壓縮成xxx.min.js，減小文件的大小
   3. 服務器端開啓資源文件的GZIP壓縮
      • 經過一些自動化工具完成CSS以及JS的合併壓縮，或者在完成LESS轉CSS，ES6轉ES5等操做，咱們把這種自動化構建模式，稱之爲前端工程化開發

3. 採用圖片的懶加載技術，在頁面開始加載的時候，不請求真實圖片的地址，而是用默認圖佔位，當頁面加載完成後，再根據相關的條件依次加載真實圖片（減小頁面首次加載HTTP請求的次數）

   真實項目中，咱們開始圖片都不加載，頁面首次加載完成，先把第一屏幕中能夠看見的圖片進行加載，隨着頁面的滾動，再把下面區域中可以呈現出來的圖片進行加載

   根據圖片的懶加載技術，咱們還能夠擴充出數據的懶加載

   1. 開始加載頁面的時候，咱們只把首屏或者前兩屏的數據從服務端進行請求（有些網站首屏數據是後臺渲染好，總體返回給客戶端呈現的）
   2. 當頁面下拉，滾動到哪一個區域，在把這個區域須要的數據進行請求（用請求回來的數據進行數據的綁定以及圖片的延遲加載等）
   3. 分頁展現技術採用的也是數據的懶加載思想實現的：若是咱們請求獲取不少的數據，咱們最好分批請求，開始只請求第一頁的數據，當用戶點擊第二頁（微博是下拉到必定距離後，在請求第二頁數據...）的時候在請求第二頁的數據

4. 對於不常常更新的數據，最好採用瀏覽器的304緩存作處理（主要由服務器端處理）

   例如:

   第一次請求CSS和JS下來，瀏覽器會把請求的內容緩存起來，若是作了304處理，用戶再次請求CSS和JS，直接從緩存中讀取，不須要再去服務器獲取了（減小了HTTP請求的次數）

   當用戶強制刷新頁面（CTRL+F5）或者當前緩存的CSS或者JS發生了變更，都會從新從服務器端拉取

   ...

   對於客戶端來說，咱們還能夠基於localStorage來作一些本地存儲，例如：第一次請求的數據或者不常常更新的CSS和JS，咱們均可以把內容存儲到本地，下一次頁面的加載，咱們從本地獲取便可，咱們設定必定的期限或者一些標識，能夠控制在某個階段從新從服務器獲取

5. 使用字體圖標代替頁面中的一些位圖（圖片），這樣不只作適配的時候方便，並且更加輕量級，並且減小了HTTP請求次數（相似於雪碧圖）

6. 若是當前頁面中出現了Audio或者Video標籤，咱們最好設置他們的preload=none；當頁面加載的時候，音視頻資源不進行加載，播放的時候在進行加載（減小頁面首次加載HTTP請求的次數）

   preload=auto；頁面首次加載的時候就把音視頻進行加載了

   preload=metadata；頁面首次加載的時候只把音視頻資源的頭部信息進行加載

7. 在客戶端和服務器端進行數據通訊的時候，咱們儘可能採用JSON格式進行數據傳輸

[優點]

1. JSON格式的數據，可以清晰明瞭的展現出數據結構，並且也方便咱們獲取和操做
2. 相對於很早之前的XML傳輸，JSON格式的數據更加輕量級
3. 客戶端和服務器端都支持JSON數據的處理，處理起來很是的方便

在真實項目中，並非全部的數據都要基於JSON，咱們儘量這樣作，可是對於某些特殊需求（例如：文件流的傳輸或者文檔傳輸），使用JSON就不合適了

1. 採用CDN加速

   CDN: 分佈式（地域分佈式）

關於編寫代碼時候的一些優化技巧

除了減小HTTP請求次數和大小能夠優化性能，咱們在編寫代碼的時候，能夠進行一些優化，讓頁面的性能有所提高（有些很差的代碼編寫習慣，會致使頁面性能消耗太大，例如：內存泄漏）

1. 在編寫JS代碼的時候，儘可能減小對DOM的操做

   • VUE和REACT框架在這方面處理的很是不錯

   在JS中操做DOM是一個很是消耗性能的事情，可是咱們又不可避免的操做DOM，咱們只能儘可能減小對於他的操做

   【操做DOM的弊端】

   1. DOM存在映射機制（JS中的DOM元素對象和頁面中的DOM結構是存在映射機制的，一改則都改），這種映射機制，是瀏覽器按照W3C標準完成對JS語言的構建和DOM的構建（其實就是構建了一個監聽機制），操做DOM是同時要修改兩個地方，相對於一些其餘的JS編程來講是消耗性能的
   2. 頁面中的DOM結構改變或者樣式改變，會觸發瀏覽器的迴流（瀏覽器會把DOM結構從新進行計算，這個操做很耗性能）和重繪（把一個元素樣式從新渲染）

2. 編寫代碼的時候，更多使用的是異步編程

   同步編程會致使：上面東西完不成，下面任務也作不了，咱們開發的時候，能夠把某一個區域模塊都設置爲異步編程，這樣只要模塊之間沒有必然的前後順序，均可以獨立進行加載，不會受到上面模塊的堵塞影響（用的很少）

   尤爲是AJAX數據請求，咱們都要使用異步編程，最好是基於promise設計模式進行管理（項目中常用fetch，vue axios等插件來進行AJAX請求處理，由於這些插件中就是基於promise設計模式對ajax進行封裝處理）

3. 在真實項目中，咱們儘可能避免一次性循環過多數據（由於循環操做是同步編程），尤爲是要避免while致使的死循環操做

4. CSS選擇器優化

   1. 儘可能減小標籤選擇器的使用
   2. 儘量少使用ID選擇器，多使用樣式類選擇器（通用性強）
   3. 減小選擇器前面的前綴，例如：.headerBox .nav .left a{} (選擇器是從右向左查找的)

5. 避免使用CSS表達式

   /*CSS表達式*/
   .box{
       background-color:expression((new Data()).getHours()%2?'red':'blue')
   }
   複製代碼

6. 減小頁面中的冗餘代碼，儘量提升方法的重複使用率：「低耦合高內聚」

7. 最好CSS放在HEAD中，JS放在BODY尾部，讓頁面加載的時候，先加載CSS，在加載JS（先呈現頁面，再給用戶提供操做）

8. JS中避免使用eval

   1. 性能消耗大
   2. 代碼壓縮後，容易出現代碼執行錯亂問題

9. JS中儘可能減小閉包的使用

   1. 閉包會造成一個不銷燬的棧內存，過多的棧內存累積會影響頁面的性能
   2. 還會容易致使內存泄漏

   閉包也有本身的優點：保護和保存，咱們只能儘可能減小，但不可避免

10. 在作DOM事件綁定的時候，儘可能避免一個個的事件綁定，而是採用性能更高的事件委託來實現

    事件委託（事件代理）

    把事件綁定給外層容器，當裏面的後代元素相關行爲被觸發，外層容器綁定的方法也會被觸發執行（冒泡傳播機制致使），經過事件源是誰，咱們作不一樣的操做便可

11. 儘可能使用CSS3動畫代替JS動畫，由於CSS3動畫或者變形都開啓了硬件加速，性能比JS動畫好

12. 編寫JS代碼的時候儘量使用設計模式來構建體系，方便後期的維護，也提升了擴充性等

13. CSS中減小對濾鏡的使用，頁面中也減小對於FLASH的使用

關於頁面的SEO優化技巧

1. 頁面中杜絕出現死連接（404頁面），並且對於用戶輸入的一個錯誤頁面，咱們要引導到404提示頁面中（服務器處理的）

2. 避免瀏覽器中異常錯誤的拋出

   儘量避免代碼出錯

   使用TRY CATCH作異常信息捕獲

3. 增長頁面關鍵詞優化