當Html5,css3已漸漸成為主流的時候，我還非常習慣的用js去做一些簡單的動畫。因為在桌面浏覽器上， 並非所有的都支持css3。用戶也倒是很奇怪，用戶習慣並不是每個用戶都可以被培養。總有不少人會覺得win7.win8沒xp好用。但手機方面就大不一樣了，手機浏覽器對html5和css3的支持還是很不錯的。但手機硬件處理能力卻又十分有限。在四核、八核手機橫行的今天，依然有像我這樣使用雙核或單核手機的。js雖好，單奈何接觸不多，調不好那種感覺。一個簡單的頁面滑動，在i7的pc上運行十分流暢，可是，在我的雙核手機上就卡、頓、卡、頓。令人十分郁悶。為此，我也是尋找了很久很久，看了很多很多。終於在不就之前，找到了一種還算簡單的方法：使用css3去執行動畫。
在以前，對於動畫除了Jquery的animate等動畫函數外，更多的是使用setTimeout,setInterval，這樣循環的去改變一個元素的margin、width、top等屬性。也正是如此，才有了我的困惑。
首先，setTimeout,setInterval 這貨並非你設置0ms它就能一直一直的去執行。曾經在iscroll裡調試的時候無意中發現了這個秘密。原來Timer延時的計算依靠的是浏覽器的內置時鐘，而時鐘的精確度又取決於時鐘更新的頻率。IE8及其之前的IE版本更新間隔為15.6毫秒。完了，我想它10ms執行1px位移，它還不能准時的干這事。
而卡又是怎麼回事呢？卡，因為代碼寫的不好。畢竟js是單線程的，一旦有耗時的動作那麼UI就可能不響應了。雖然我們使用了setTimeout，但正是因為setTimeout讓我們看上去界面沒死可動作卻又不流暢了。因為這次setTimeout執行之後，在下次執行前，中間這個間隔裡很可能遇到另一個耗時的動作，那麼，setTimeout的執行就無限後延。然後呢？卡！然而，卡還能有下一個原因，改變原始屬性時不小心觸發浏覽器Layout（即：重布局）。這個問題說它不耗時呢，卻又耗時，說它耗時呢，很多時候卻又可以忽略。但很多時候其實是不能忽略的。
除了上面這兩段，還有一個問題，就是在很多手機上總感覺是一幀一幀的，而且還可能是一幀長一幀短。這真是能把人都搞廢的節奏。為何會這樣呢，依然和settimeout的推遲有一定的關系。丟幀。這個問題有涉及到顯示器的刷新頻率問題。實在太復雜了。
最後選擇了CSS3，js動態的改變元素的屬性，使用transition來控制動畫執行時間。舉個例子：
復制代碼 代碼如下:
<div id="test" style="transition:all 1s ease; width:100px;" ></div>
js:
復制代碼 代碼如下:
$("#test").width(200);
這樣1秒之後這個div的寬度會變成200px。不是孫悟空變桃子一樣瞬間變大，慢慢的趕腳，不卡不頓。而且使用css動畫有個好處，它不受耗時js的影響。雖然浏覽器中UI線程與js線程是互斥，但這一點對css動畫不成立，並且很多浏覽器還能啟用硬件加速（比如：Chrome）。雖然浏覽器重布局普通情況下感覺不是很明顯，但還是應該盡量避免大面積的重布局。so在動畫元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);這樣浏覽器會獨立渲染這一層。即便是重布局無法避免，這樣面積也小些。而使用translate取代margin也確實是一個十分明智的決定。
最後附上一些常用的改變時會觸發重布局的屬性：
復制代碼 代碼如下:
width
height
padding
margin
display
border-width
border
min-height
以上就是本文所述的全部內容了，希望對大家學習javascript和CSS3能夠有所幫助，同時不足之處煩請補充，諒解。