轉載地址：http://www.alloyteam.com/2012/10/high-performance-front-end-high-performance-javascript/ 感謝原作者！

使用事件代理

有時候我們會感覺到頁面反應遲鈍，這是因為DOM樹元素中附加了過多的事件句柄并且些事件句病被頻繁地觸發。這就是為什么說使用事件代理是一種好方法了。如果你在一個div中有10個按鈕，你只需要在div上附加一次事件句柄就可以了，而不用去為每一個按鈕增加一個句柄。事件冒泡時你可以捕捉到事件并判斷出是哪個事件發出的。

緩存選擇器查詢結果

選擇器查詢是開銷很大的方法。所以，使用選擇器的次數應該越少越好，并且盡可能緩存選中的結果，便于以后反復使用。比如，下面這樣的寫法就是糟糕的寫法：

jQuery('#top').find('p.classA'); jQuery('#top').find('p.classB');

更好的寫法是：

?

var cached = jQuery('#top'); cached.find('p.classA'); cached.find('p.classB');

?

避免頻繁的IO操作

對 cookie 與 localstorage 操作的API是同步的，且cookie與localstorage是多個tab頁面間共享的，多頁面同時操作時會存在同步加鎖機制，建議應盡量少的對cookie或localStorage進行操作。

避免頻繁的DOM操作

使用JavaScript訪問DOM元素是比較慢的，因此為了提升性能，應該做到：

緩存已經查詢過的元素；

線下更新完節點之后再將它們添加到文檔樹中；

避免使用JavaScript來修改頁面布局；

使用微類庫

通常開發者都會使用JavaScript類庫，如jQuery、Mootools、YUI、Dojo等，但是開發者往往只是使用JavaScript類庫中的部分功能。為了更大的提升性能，應盡量避免使用這類大而全的類庫，而是按需使用微類庫來輔助開發。

再次感謝原作者：元彥

?

轉載于:https://www.cnblogs.com/xmmcn/archive/2012/11/22/2783126.html

總結

以上是生活随笔為你收集整理的【转】高性能前端3-高性能javascript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。