【現象】
動畫出現了明顯的卡頓，且僅僅出現在 chrome 中。
【原因排查】
一開始使用了css動畫的時候已經出現了卡頓。找到如下的文章：css3 動畫卡頓解決方案、深入瀏覽器理解css animations 和 transitions的效能問題、
解決chrome動畫」卡頓」的辦法
文章中提到高度變化會引起 relayout、repaint。
做了如下修改：
移除改變高度的動畫，換成 transform 的動畫，以減少 relayout、repaint 的次數。
使用 transform: translatez(0)， 強制開啟gpu渲染。
加上 will-change 屬性，通知瀏覽器預處理。
動畫的確略變流暢了。
然而高度變化還是很有必要，並覺得只由js去控制**可維護性更好些，最後還是決定放棄了 css，改用js去做動畫。考慮到 jquery 封裝的 animate() 十分簡單易用，於是採用了 jquery。
此時動畫卡頓問題再次出現，而且在 ie、firefox 中非常流暢。檢視資料，jquery 的 animate 使用了老舊的setinterval方法實現動畫，並沒用使用 raf（reques tanimation frame），不會開啟 gui。（後來發現此說法可能不對，在 jquery 3 中原始碼中可以看出其使用了 raf，jquery 1中則同前描述）
最後決定改用velocity.js，velocity.js 已經可以脫離 jquery 直接使用。看官方文件，宣傳語是 「快」 。然而並沒有什麼用，使用之後，chrome 一如既往的卡，ie 和 firefox 則是一如既往的流暢。
開啟 chrome 除錯，檢視timeline，發現了神奇的事情。
每次 network 發請求的時候，fps 都會出奇地降至10一下。
嘗試把請求刪除，動畫恢復正常。雖沒有行雲流水般流暢，但是肉眼看來已經沒大問題了。
最後把請求放在動畫結束之後在執行，搞定。
velocity(div, 'slideup', });【結論】
問題雖然解決，還需進一步調查原因：
1、嘗試把傳送請求函式中的 dom 操作刪除，未見明顯改善；
2、嘗試把傳送請求函式中的 settimeout 定時器刪除，未見明顯改善；
3、嘗試把傳送請求函式中的 for in 迴圈刪除，不再卡頓。
在 for in 中做了乙個字串拼接，這個字串拼接的字元，傳值到請求中
for (j in測試push等效能並無問題，最終問題又回到了ajax請求中來了。至於為何非同步請求會引起動畫響應變慢，暫時不得而知。data)
}$.ajax();
解決Chrome動畫」卡頓」的辦法
為動畫dom元素新增css3樣式 webkit transform transition3d 0,0,0 或 webkit transform translatez 0 這兩個屬性都會開啟gpu硬體加速模式，從而讓瀏覽器在渲染動畫時從cpu轉向gpu，其實說白了這是乙個小伎倆，也可以算是乙個hack...
電腦卡頓的問題
最近筆記本非常的卡，開啟檔案管理器都要十幾秒，還動不動來個未響應，正好要弄乙個課程設計，弄了半天，啥也沒做，時間都花在了等待電腦響應上面，想來就氣，當時就想直接砸電腦了。電腦很卡，無論開啟什麼頁面或者軟體，總是很卡，就好像放ppt一樣，動不動還未響應，然後卡退。電腦雖然很卡，但啟動並不慢，基本上9秒...
mac下idea卡頓問題解決
idea在載入相對來說比較大的系統時，經常性出現卡頓，就是直接卡死，以至於寫起 特別難受.最後找到的解決方案是修改idea.vmoptions中的記憶體大小 執行 find name idea.vmoptions 來找到檔案的存放路徑 以下為參考配置，可以根據mac的硬體效能進行調整 xms750m...