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

無敵UFO發表於2019-04-10
前端優化

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. 增加頁面關鍵詞優化

相關文章