CSS Animation 使 Mobile 网页崩溃！? 效能优化篇(1) - 避免过长的背景图～

崩溃的起因
- 开发时期,我在网页内放置了一段 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) - 查看网页效能并发现问题～