Q: 終於要講效能了！
A: 以Loading為範例講黑～

Animation Loading 直線版本

前幾篇有做過Loading效果的動畫，今天延續下去！同時說明操作css在改變不同屬性時會帶來不同效能的影響。

首先先來做出Loading的點點。

<style>
  .container {
    width: 600px;
    height: 300px;
    margin: 120px auto;
    display: flex;
  }
  .dot {
    width: 15px;
    height: 15px;
    background-color: gray;
    border-radius: 50%;
    margin-right: 10px;
  }
  .container .dot:nth-child(1) {
    background-color: Maroon;
    animation-delay: 0s;
  }
  .container .dot:nth-child(2) {
    background-color: FireBrick;
    animation-delay: .2s;
  }
  .container .dot:nth-child(3) {
    background-color: IndianRed;
    animation-delay: .4s;
  }
  .container .dot:nth-child(4) {
    background-color: LightCoral;
    animation-delay: .6s;
  }
</style>
<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

再來加上動畫效果

這裡我們會希望Loading時點點有跳動的感覺，這裏給元素在演繹動畫時使用 margin-top 做位移。

<style>
  .container .dot {
    animation: jump 1s infinite;
  }

  @keyframes jump {
    35% {
      margin-top: -25px;
    }
    0%, 60%, 100% {
      margin-top: 0;
    }
  }
</style>

演繹 animation 動畫時，如果使用 margin 做位移顯示，這時候元素會重新計算、重新佈局、最後重繪畫面，這樣的過程在渲染畫面時是相當耗費效能的！在本次演繹的動畫中，每一秒都有四個元素不停的在輪迴計算、佈局、繪製畫面的過程，如果開啟畫面的電腦是頂級的，那麼簡單的動畫不停地重繪看起來是不會有影響的；但如果使用大量動畫或是電腦及手機負荷不來，那麼網頁可能會看起來卡卡的。

<style>
  @keyframes jump {
    35% {
      /* margin-top: -25px; */
      transform: translateY(-25px);
    }
    0%, 60%, 100% {
      /* margin-top: 0; */
      transform: translateY(0);
    }
  }
</style>

但如果把 margin 改成 transform 製作位移效果，這時候只會讓元素重新繪製，不會重新計算也不會重新佈局。還記得 transform 屬性控制元素的什麼嗎？ transform 控制的是該元素的變形，所以當元素使用 transform 做位移時，只有該元素在做位移的變形，不會影響其他元素的位置；而 margin 被改變時，會影響到別的元素的位置，所以會需要花費更多時間重新計算、佈局及繪製。

各種屬性在改變時都會讓網頁重新繪製，只是改變不同的屬性在渲染時的成本都不盡相同，如果像是 margin border-width等等這種會影響別的元素的位置的屬性產生變化時，就會需要耗費比較高的成本重新計算、佈局及繪製；但如果像是 transform 這種只會影響自己本身的樣式的屬性，那麼重新渲染的成本就會比較低。

本篇就基礎的帶到概念，明天將繼續說明～

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後敘述～