每個人都有各自的代碼習慣，就一般而言，在一個小程序裡面，不良的代碼習慣一般不會引起太大的性能障礙，但是在一個大的系統裡面，不良的代碼習慣往往導致內存無法回收，性能浪費。接下來我就給大家展示幾個JavaScript優化的小技巧，讓大家無形中優化了JavaScript執行效率。
1.並列申明變量
往往前端開發者會採用一個個申明變量的方式去申明變量，但是如果是條件允許的情況下，請儘量並列申明變量。並列申明變量在一方面有利於代碼閱讀，另一方面有利於瀏覽器提前確定變量，分配空間，加快後續操作，而從其他方面來講，也可以在一定程度上避免了變量提升的問題。
2.優雅的選擇元素，還是高效的選擇元素
由於JQuery的易用性，導致前端開發者隨意使用JQuery提供的方法，$(.Selector )便是如此。在選擇元素方面，性能的排名從高到低依次是：document.getElementBy**，document.querySelector，$(.Selector )，尤其是在低端幾下，重複使用$(.Selector )往往會造成代碼性能下降，因此在能確定並且具備特殊的單一標記，如Id，classname的情況下，請使用document.getElementBy**，在要求靈活性選擇的時候，請使用$(.Selector )。
3.儘量使用三元運算代替 if 判斷
如果不是特殊要求，儘量在代碼過程使用三元運算代替 if 判斷，三元運算一方面有利於維護與代碼閱讀，另一方面可以減少性能消耗，因為 if 判斷每次執行完畢需要判斷下續是否存在 else 以及 else if，導致性能消耗增加。
4.使用 do...while 代替 for 循環
由於for循環每次都需要進行變量操作，可以使用do...while循環，從而減少性能消耗，同時do..while屬於條件後置，可以稍微提升運行的速度，當循環次數越多的時候效果越明顯。
5. 插入元素，有固定模版用cloneNode更快
如果插入元素的時候，每次元素的結構都一樣，僅僅是文字改變，那你可以考慮編寫成模版元素，使用cloneNode插入。createElement每一次都會創建新的內存重新處理，而直接 操作innerHtml會引起頁面局部重新解析，而使用cloneNode是複用現有內存，效率更快，在現代瀏覽器中測試，重複一萬次的運行效率從高到低對比為：cloneNode，操作innerHtml，createElement。
6.如非必要，儘量減少閉包
閉包本身不會過多的影響性能，但是閉包中生成的變量會一直存在內存中，並不會因為不需要了而被瀏覽器清除，這設計的是內存佔用問題，如非必要，請儘量減少閉包寫法。
7.代碼格式標準
這與性能無關，完全是代碼質量問題，儘量讓代碼看起來舒服，不要讓代碼看起來太過緊湊，這有利維護者理解，消化你的代碼。
希望大家在開發的過程中，能注意以上幾點，擇優而行。畢竟前端的世界，SPA和WEBAPP是很火的一個概念，那麼有效的構建一個高性能的頁面和方法也顯得更外重要了。
閱讀更多 Zion程序猿 的文章
