【前端性能優化】 不懂優化的前端 不是好前端…

不懂優化的前端 不是好前端…

減少浏覽器的回流和重繪

1. CSS 方面

• 避免過多樣式嵌套
• 避免使用

  CSS

  表達式
• 使用絕對定位，可以讓動畫元素脫離文檔流
• 避免使用

  table

  布局
• 盡量不要使用

  float

  布局
• 圖檔最好設定好

  width

  和

  height

• 盡量簡化浏覽器不必要的任務，減少頁面重新布局
• 使用

  Viewport

  設定螢幕縮放級别
• 避免頻繁設定樣式，最好把新

  style

  屬性設定完成後，進行一次性更改
• 避免使用引起回流/重繪的屬性，最好把相應變量緩存起來

2. JS方面

• 最小化回流和重排
  • 為了減少回流發生次數，避免頻繁或操作

    DOM

    ，可以合并多次對

    DOM

    修改，然後一次性批量處理。
• 控制繪制過程和繪制區域
  • 繪制過程開銷比較大的屬性設定應該盡量避免減少使用
  • 減少繪制區域範圍

DOM優化： 控制DOM大小并簡化DOM操作

1. 控制DOM大小

• 總所周知，頁面互動卡頓和流暢度很大一部分原因就是頁面 有大量DOM元素。

  想象一下，從一個上萬節點的DOM樹上，使用

  querySelectorAll

  或

  getElementByTagName

  方法查找某一個節點，是非常耗時的。另外元素綁定事件，事件冒泡和事件捕獲的執行也會相對耗時。
• 通常控制

  DOM

  大小的技巧包括：
  • 合理的業務邏輯
  • 延遲加載即将呈現的内容

2. 簡化DOM操作

• 對

  DOM

  節點的操作統一處理後，再統一插入到

  DOM Tree

  中
• 可以使用

  fragment

  ,盡量不要在頁面

  DOM Tree

  裡直接操作
• 現在流行的架構

  Angular

  ,

  React

  ,

  Vue

  都在使用虛拟DOM技術，通過

  diff算法

  簡化和減少DOM操作

靜态檔案打包方案

• 公共元件拆分
• 壓縮： JS/CSS/圖檔
• 合并： JS/CSS檔案合并，

  CSS Sprite

• Combo: JS/CS S 檔案 Combo http://cdn.com/??a.js,b.js内容 （ 服務端處理的方式，比較建議）

靜态檔案：版本号更新，應遵循哪些政策？

• 緩存更新

  • CDN

    或 nginx背景重新整理檔案路徑 ，更新檔案

    header

    頭
• 加版本号 檔案名列如： name.v1-v100.js
  • 大功能疊代每次新增一個大版本，比如v1到v2
  • 小功能疊代新增加0.0.1 或者0.1.0， 比如從 v1.0.0 至 v1.0.1
  • 年末 nginx 統一配置所有版本至最新版
• 加時間戳 時間戳.檔案 name.js
  • 以每次上線時間點做差異
• 加哈希值 檔案 hash.檔案 name.js
  • 以檔案内容hash值做key
  • 每次上線，檔案路徑不一緻

  算法中，什麼是哈希值，哈希值怎麼生成的，有什麼用？

  1、你可以把哈希值簡單地了解成是一段資料（某個檔案，或者是字元串）的DNA，或者身份證；

  2、通過一定的雜湊演算法（典型的有MD5，SHA-1等），将一段較長的資料映射為較短小的資料，這段小資料就是大資料的哈希值。他有這樣一個特點，他是唯一的，一旦大資料發生了變化，哪怕是一個微小的變化，他的哈希值也會發生變化。另外一方面，既然是DNA，那就保證了沒有兩個資料的哈希值是完全相同的。

  3、正是因為這樣的特點，它常常用來判斷兩個檔案是否相同。比如，從網絡上下載下傳某個檔案，隻要把這個檔案原來的哈希值同下載下傳後得到的檔案的哈希值進行對比，如果相同，則表示兩個檔案完全一緻，下載下傳過程沒有損壞檔案。而如果不一緻，則表明下載下傳得到的檔案跟原來的檔案不同，檔案在下載下傳過程中受到了損壞。

前端建構工具介紹和選型建議

1. Grunt

最早，一個項目需要定制多個小任務和引用多個插件（品質參差不齊）

2. Gulp

通過流（Stream）來簡化多個任務間的配置和輸出，配置代碼相對較少

3. Webpack

預編譯，中間檔案在記憶體中處理，支援多種子產品化，配置相對很簡單

4. FIS (百度)

5.JDF（京東）

打包優化： 提升webpack打包效率的6個小技巧

• 定位體積大的子產品
• 删除沒有使用的依賴
• 生産模式進行公共依賴包抽離
• 開發模式進行DLL & DllReference方式優化

浏覽器渲染過程

1. 浏覽器解析HTML, 生成DOM Tree (Parse HTML)
2. 浏覽器解析CSS, 生成CSSOM (CSS Object Model) Tree
3. JavaScript 會通過DOM API 和 CSSOM API 來操作DOM Tree 和CSS Rule Tree, 浏覽器将DOM Tree 和 CSSOM Tree 合成渲染樹（Render Tree）
4. 布局（Layout）根據生成的Render Tree,進行回流，以計算每個節點的幾何資訊（位置，大小，字型樣式等等）
5. 繪制（Painting）據渲染樹和回流得到的幾何資訊，得到每個節點的絕對像素
6. 展示（Display） 将像素發送給圖形處理器（GPU），展示在頁面上

   

頁面渲染： 頁面渲染技術架構和方案總覽

1. 服務端渲染

• 後端同步渲染，同構直出，BigPipe

2. 用戶端渲染

• JavaScript渲染：靜态化，前後端分離，單頁面應用
• Web App: Angular,React,Vue等，PWA
• 原生 App: iOS,Android
• Hybrid App: PhoneGap,AppCan等
• 跨平台開發： RN,Flutter,小程式等

後端同步渲染： JSP是如何同步渲染出頁面？

• 同步渲染步驟（以JSP為例）
  • 步驟1： JSP Servlet 映射以.jsp結尾的URL,當.jsp檔案請求時，servlet容器知道要調用哪個Servlet
  • 步驟2：Servlet容器檢查Servlet是否被編譯
  • 步驟3：如果未在步驟2中進行編譯，則Servlet容器會将JSP轉換為Servlet代碼，并進行編譯
  • 步驟4：Servlet容器将JSP請求轉發到編譯JSP Servlet類
  • 步驟5： JSP Servlet 類傳回并發送給用戶端浏覽器HTML
• 技術優點
  • 快速實作業務開發并上線
• 技術不足
  • 需要先實作業務邏輯和功能，再輸出HTML内容給浏覽器，使用者等待HTML頁面完全加載之後才能看到頁面内容；代碼耦合嚴重，不太好業務邏輯和頁面模闆；需求變更上線周期相對較長
• 協作方式
  • 前端出靜态頁面，後端套頁面
• 選型建議
  • 如果是創業初期驗證階段，或者20個研發人員以内的項目，為了滿足業務快速驗證并一天内多次上線，技術選型上使用服務端同步渲染沒有任何問題，一個字就是“快”
• 協作利器
  • jSmart
  • Velocity.js

頁面靜态化：動态頁面靜态化要如何實施？

靜态化

• 定義
  • 靜态化是使動态化的網站生成靜态HTML頁面以供使用者更好通路的技術，一般分為純靜态化和僞靜态化
• 技術優勢
  • 提高了頁面通路速度，降低了伺服器的負擔，因為通路頁面時不需要每次去通路資料庫
  • 提高網站内容被搜尋引擎搜尋到的幾率，因為搜尋引擎更喜歡靜态頁面
  • 網站更穩定，如果後端程式，資料庫出現問題，會直接影響網站的正常通路，而靜态化頁面有緩存，更不容易出現問題
• 技術不足
  • 伺服器存儲占用問題，應為頁面量級在增加，要占用大量硬碟空間
  • 靜态頁面中的連結更新問題會有死鍊或者錯誤連結問題
• 技術實作
  • 跑定時任務，将已有的動态内容重新定時生成靜态的HTML頁面
  • 利用模闆技術，将模闆引擎中的模闆字元替換為從資料庫中取出來的值，同時生成HTML檔案
• 協作方式
  • 前端統一寫好帶有互動的完整靜态頁面
  • 後端拆分出靜态頁面檔案，并嵌套在後端模闆檔案中
• 選型建議
  • 後端研發人員充分，又需要考慮使用者體驗，伺服器負載的業務

前後端分離：如何正确了解和實作前後端分離？

• 定義
  • 前後端分離是指研發人員分離，業務代碼分離，後端實作業務接口，前端渲染頁面
• 技術實作
  • 後端隻負責功能接口實作，提供按照約定的資料格式并封裝好的API接口
  • 前端負責業務具體實作，擷取到API接口資料後，進行頁面模闆拼接和渲染，獨立上線
• 協作方式
  • 前端負責實作頁面前端互動，根據後端API接口拼裝前端模闆
  • 後端專注于業務功能實作和API接口封裝
• 技術優勢
  • 團隊更加專注
  • 提升了開發效率
  • 增加代碼可維護性
• 技術架構
  • 後端架構： Java, PHP + Nginx, 使用微服務（比如 dubbo 等） 等實作業務的解耦，所有的服務使用某種協定提供不同的服務（比如 JSF 等）
  • 前端架構： 使用Angular, React, Vue 前端架構并部署頁面至CDN
  • 前端架構2：使用Angular, React, Vue前端架構部署在Node Server
• 技術不足
  • 因為前端需要負責一大部分業務邏輯實作和伺服器同步，靜态化，需要前端人力非常多
  • 頁面資料異步渲染，不利于SEO,搜尋引擎更喜歡純靜态頁面
• 選項建議
  • 這是大型網際網路公司正在采用的開發模式，一句話，如果考慮使用者體驗，以及前端人力夠用，可以積極采用

單頁面應用：什麼情況下該選擇單頁面應用？怎樣實作？

• 定義
  • 單頁應用（single-page application, 縮寫SPA）通過動态重寫目前頁面，來與使用者互動，而非傳統的從伺服器重新加載整個新頁面。這種方法在使用過程中不需要重新加載頁面，避免了頁面之間切換打斷使用者體驗，使應用程式更像一個桌面應用程式
• 技術優點
  • 不錯的加載速度：使用者往往感覺頁面加載非常快，因為一進入頁面就能看到頁面元素
  • 良好的互動體驗：進行局部渲染，避免不必要的頁面跳轉和重複渲染
  • 前後端職責分離：前端進行頁面互動邏輯，後端負責業務邏輯
  • 減輕伺服器負載：伺服器隻處理資料接口輸出，不用考慮頁面模闆渲染和HTML展示
• 技術缺點
  • 開發成本相對較高
  • 首次頁面加載時間過多
  • SEO難度比較大
• 技術實作
  • 使用Angular, React, Vue架構
• 選型建議
  • 重互動頁面業務
  • 核心鍊路場景業務