為什麼要用用visibility:hidden;代替display:none;？因為後者更加消耗瀏覽器：
css繪製畫面有兩種形式：repaint 和reflow，當我們更改css屬相如background時，瀏覽器只需repaint就行，dom節點的大小、位置均未發生改變，我理解為：原地不動只是換個顏色填充而已。這時的開銷就小。
當我們操作dom節點要改變其大小和位置時，對瀏覽器來說就比較麻煩了，必須要進行reflow，重新定位，重新佈局，只不過對於現在的電腦硬體和高版本瀏覽器來說這倒不是顯而易見的效能問題，但作為開發人員，核心的價值和最大的滿足感就是節省了記憶體，優化了效率。
SO，這也是本文標題的原因。visibility:hidden;對瀏覽器來說只需一次repaint就OK。但display:none;瀏覽器要進行reflow，也就是要銷燬原先繪製的frame，然後還要再次重繪frame，浪費，不環保。
好，說了這麼多，那麼問題來了，挖掘機。。。。不！怎樣才能減少瀏覽器開銷呢？
那就要儘量改動讓瀏覽器用repaint就能完成的屬性，少改動那些要做大手術的屬性。實不相瞞，對dom節點的增刪改都是大手術。尤其是動畫，當初年少無知，為了追求刺激，總搞一些沒啥用途的大而空的亂串特效，想必瀏覽器也挺辛苦吧。還有少用表格，表格總是牽一髮而動全身，開銷更大。
以後可以這麼幹：對要多次修改的dom元素，儘量一步到位，我用的是先設定一個空的class如.XX{aa:num; bb:num; cc:num}，然後用js直接更改其dom的classname屬性為XX即可。此外，優化的方法從各個方面各個角度，還有很多很多，寫這篇部落格時的我目前還處於菜鳥階段，關於優化問題總結的很多很雜，具體說不出個123來，這個知識點對我的意義就是：別拿瀏覽器不當幹部，要儘可能的讓她乾的輕鬆（沒錯，是“她”），為此以後要養成時刻優化程式碼的習慣，不以善小而不為。