前面講到 Paint 時有提到 jank ，說了很多理論，沒有看到還是很難感受一下是什麼感覺。請大家再次訪問我們的測試專案。

接著請點擊「啟動瘋狂模式」的按鈕，並且上下滑動看看，你就可以感受什麼叫做 jank 了，那種卡卡的感覺很討厭吧？

讓我們看一下到底開發者寫了什麼鬼東西：

<script>
  function jank(){
    var x = Math.floor((Math.random() * 500) + 50);
    var left_float  = $(".left").css("float");
    var right_float = $(".right").css("float");
    $(".left").css("float",right_float);
    $(".left").css("width",x);
    $(".right").css("float",left_float);
    $(".right").css("width",x);
  }

  $(document).ready(function(){
    $("#start").click(function(){
      setInterval("jank()", 250);
    });
  });  
</script>

<button id="start">啟動瘋狂模式</button>

<div class="hellobox">
<div class="left"></div>
<div class="right"></div>
</div>

<div class="hellobox">
<div class="left"></div>
<div class="right"></div>
</div>

當我們點擊「啟動瘋狂模式」後，瀏覽器每 250ms 就會交換 class=left 以及 class=right（一黑ㄧ橘）的 div 的位置，也取亂數改變它們的寬度。

讓我們打開 Chrome 的 Dev tool 來看看有多麼的可怕（小插播一下：移動中間兩個小灰點，可以看到更多 Frame Data）：

之前我們說過如果要達到 60FPS ，產生一個 Frame 最多只能花費 16ms ，然而觀測一下發現這裡每產生一個 Frame 至少都花費了 100~200ms ！！實在太可怕了！

到底沒有達到 60FPS 會發生什麼事情，各位透過這一個測試專案應該可以很實體地感受到了吧？當然一般網站不會寫這種奇怪、惡搞的東西，但是還是有很多時候會做出瀏覽體驗不是非常流暢的功能，因此各位除了調校 Page Load Time 之外（調整 critical rendering path），也應該要留意 Runtime 的 Performance 。初次 Render 網站的速度太慢，使用者會跑光光，但是使用時體驗很糟，也會讓很多使用者離開，因此兩方面的 Performance Issue 都應該要注意。