崩潰的起因
- 開發時期,我在網頁內放置了一段 CSS Animation的動畫,這個功能在電腦上執行一切正常,直到網頁被改成RWD版本,悲劇就發生了.....某些手機開啟後瀏覽器直接崩潰！

崩潰的原因
接下來讓我們談談崩潰發生的原因,以下雷小心,請勿重踩

1. 過長的背景連續圖
   當初為了方便製作動畫,我採用了animation + keyframes 搭配連續圖的方式製作動畫, 相信許多人都有使用這個方法, 此方法踩到第一個雷, 連續圖長度達到 30000多px, 而動畫中類似的DOM, 將近10個, 最長的圖甚至到了 150000px, 重點是圖片檔案其實都不大, 最大約200k, 但網頁就掛了！ ,以下是程式寫法

<div class="effect"></div>
<style>
    .effect {
      width: 750px;
      height: 422px;
      background-image: url(圖片位置);
    }

    .effect.is-play {
      animation: effect-keyframes 6.1s  step-end infinite paused;
      animation-play-state: running;
    }
    
    @keyframes effect-keyframes {
      0%
          background-position-y: 0px;
      5%
          background-position-y: 422px;
      .......
    }
</style>

這邊先不談 animation + keyframes 的效能問題，此問題後面章節再討論
先單純談背景大小問題
雖然實際元素只有 width: 750px height: 422px 但瀏覽器還是會建立巨大的背景好讓你進行位移
而這邊造成的瀏覽器崩潰原因之一，並非檔案容量大小, 而是尺寸

而是否崩潰, 最終決定於裝置效能, 我們發現在電腦, IPhone, 性能較高的Android上, 不會造成瀏覽器崩潰
主要會崩潰的裝置為 入門型Android 裝置上, 如果圖片一個一個慢慢載入似乎比較沒事, 但同時創建多個DOM就死掉了～

入門型Android超多人在用的RRRRRR
所以只好解決問題摟～

解決方法：
*把連續圖的動畫拆解成多個"零件圖", 並用css動畫產生同樣的動畫效果, 盡量避免"連續圖"或"換圖"的行為
*將連續圖高度盡量限制在10000px以內
*如果圖片內容不複雜(ex.連續圖為下雨或下雪)可以考慮用css繪製出來，並將連續圖動畫重新用css動畫重製

優化後成果：
*連續圖動畫剩下一組(過於複雜, 放棄重置)並高度在9000px, 其餘都使用拆圖或css重製
*手上效能最低的小米4S,原本直接崩潰變成可正常開啟

補充知識點
你知道 DOM 的 width,height 有上限嗎？
在W3C CSS 文件中說明, 理論上css數值沒有上限, 但User Agent對於數值的上下限可能會有限制

"CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions. Range extremes that are ideally unlimited are indicated using ∞ or −∞ as appropriate."

經測試數據大概如下(實際狀況可能因為版本有誤差，這邊單純當作冷知識提供給大家)

在寬度和高度為10000000000px的元素上測試結果：
Firefox: 33554400px
Chrome: 33554428px
Opera: 33554428px
IE: 21474836.47px

本篇先到這邊～
後面章節還會講關於Animation優化與如何查看網頁消耗的CPU與記憶體

傳送門： CSS Animation 使 Mobile 網頁崩潰！? 效能優化篇(2) - 查看網頁效能並發現問題～