前言
在日常開發中，經常會碰到包含有大量動效的需求，當一個頁面包含有大量動效時，經常會出現卡頓、性能不佳的問題，
正所謂開發三天，優化兩星期，為了優化這些動效，很多同學只能一點點摳代碼，探尋加載時間點、渲染速度、資源體積等優化點的極限，前端、設計以及測驗都疲于奔命，
古語有云，因材施教，話句話說，給合適的人，合適的東西，套用在開發中，可以理解為，為不同用戶提供不同的產品效果以提升用戶體驗，
在動效開發上運用這一點，最后得到的方案就是動效降級，
簡介
一句話概括動效降級，即根據機型性能對不同機型進行分級，不同級別提供不同動效，
舉個例子，面對高中低端機型，從高到低可以分別提供：視頻影片、Lottie 影片以及 CSS 影片，
個人認為，針對中低端機型，更重要的是讓用戶流暢地體驗功能，而不是執著于華麗的效果，
方案設計
機型劃分
動效降級的核心在于為合適的機型提供合適的動效，所以，動效降級的第一步是根據規則對不同機型劃分不同級別，
IOS 的機型劃分相對簡單，只需依據機型判斷即可，如 iphone6 以下為低端機，iphone8 以下為中端機，
Android 的機型、系統繁多，一個個判斷明顯不可行，所以需要機型打分平臺對 Android 機型進行打分，最終使用評分劃分機型級別，
除此之外，還需要維護一個機型黑名單，黑名單主要包括硬體尚可，但是實際顯示效果不佳的機型，當命中黑名單時，可以直接降級，
注意，分為高中低三種機型只是一種比較常見的做法，但不是唯一的做法，在實踐中，將所有機型分為兩種、四種甚至五種級別都是可以的，根據專案自行劃分即可，
規則獲取
確定完機型規則后，我們還需要獲取規則，此時，有兩種處理方案：規則寫在代碼中或服務端下發，
規則寫在代碼中相對更加簡單，性能相對較好（因為省略了請求規則的程序），但是維護不便，
服務端下發方案則剛好相反，易于維護但是性能相對差一些，
如何取舍可以看具體需求，
降級策略
動效降級的策略可以根據不同專案不同背景自行制定，總體來說，按照越高級的機型使用越消耗性能的動效，
舉個栗子：
在活動頁首頁有一個視頻影片，針對高端機型保持不變，而中端機型可以使用 Lottie / Canvas 影片，最后的低端機型可以使用 CSS 影片或者 GIF 圖片，在最極端情況下，甚至直接使用靜態圖片或者直接置為空，
TIPS：由于降級流程相對固定，所以可以封裝組件，統一使用降級組件進行開發，
特殊場景處理
雖然從原則上來說，所有動效都需要進行動效降級，但是存在部分特殊場景需要特殊處理，
舉個栗子：
有一個倒計時頁面，使用了很絢麗視頻影片，按照制定規則，需要降級為 Lottie 影片，但是產品經理要求降級為 CSS 影片，此時，就需要進行特殊處理，
由于動效場景變化較多，所以降級組件需要提供足夠靈活的鉤子和配置才能適應更多場景，
兜底處理
前面說的都是根據機型判斷、場景判斷主動使用動效降級，其實，進行兜底處理的時候，也可以被動使用動效降級，
舉個栗子：
在某個高端機上，照理說應該播放視頻影片，結果對應的 CDN 資源出問題了，無法拉取到視頻影片資源，最終導致播放視頻影片失敗，此時，可以使用被動動效降級，自動將視頻影片降級為 Lottie 影片，以此類推，高端動效降級為中端動效，中端動效降級為低端動效，最終效果是雖然出了 BUG，但是用戶沒有感知到 BUG，
這就是傳說中的：用戶都沒有感知到 BUG，那就沒有 BUG，
埋點統計
完成了動效降級之后，還需要進行埋點統計，
動效降級埋點的意義在于，統計降級占比以及對應機型等，只有獲取了相關資訊，才能動態調節規則配置，達到最好的動效降級效果，
總體效果
優勢
動效降級的優勢非常明顯：
- 大幅提升了原本難以優化的中低端機型幀率（性能指標狂喜系列
- 大幅降低資源消耗，如 CDN（真 · 我為公司省了幾千萬系列
- 兜底處理可以顯著提高穩定性，預防 BUG、雪崩、擊穿等問題（半夜安心睡個好覺系列
可以發現，動效降級通過犧牲了一部分效果，大幅提升了性能、穩定性以及資源消耗，這在大型專案中非常重要，
劣勢
動效降級其實也有一定的缺點，比如：
- 前端需要實作多套動效方案（前端想要打人系列
- 設計師需要提供多套動效方案（設計師想要打人系列
- 更多的動效方案，帶來了更大的測驗壓力（QA 想要打人系列
- 產品經理不一定同意動效降級（產品經理正在打人系列
可以發現，動效降級的主要劣勢在于需要更多的人力，以及會為了性能犧牲一部分效果，
綜上所述，不能盲目使用動效降級方案，必須想辦法克服動效降級的缺點，發揮它的長處，方能揚長避短，達到最好效果，
總結
動效降級與其說是一個技術方案，更可以認為是一個理念：為不同機型提供不同的但更合適的體驗，這種理念不止可以作用于動效，還可以作用于圖片等其他方面，
在我看來，用戶的整體體驗不僅僅依賴于各種華麗的特效，也不僅僅依賴于極致流暢，而是在兩者之間的平衡，兩者就像天平的兩端，一側的失衡都會導致體驗的斷崖式下滑，身為研發工程師，所做的就是維持二者的平衡，以實作最好的用戶體驗，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/432015.html
標籤：JavaScript
上一篇：ES6入門