iT邦幫忙

1

jquery 各類dom 操作效能比較

Zaku 2017-11-17 11:21:016415 瀏覽

想請問各位大大對於jquey的操作效能有沒有些基底概念,

好比說我使用.attr()去取代數值,跟直接用.html()去改掉整個內容,哪個一效能會比較好,
或是,children()find()next()三種方法的效能,

同一個操作可以不同方式去實現,因為現在有會操作大量DOM的問題,所以可能要挑選一下實作方法,已改善效能,目前未有導入前端框架的計畫,因此已用框架來改善暫不再考量範圍內

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2017-11-17 11:53:12 檢舉
https://sites.google.com/site/getsnippet/javascript/dom/repaints-and-reflows-manipulating-the-dom-responsibly
Zaku iT邦新手 3 級 ‧ 2017-11-17 14:26:14 檢舉
Reflowing is very expensive, but unfortunately it can be triggered easily........
Zaku iT邦新手 3 級 ‧ 2017-11-17 14:43:22 檢舉
補充一篇邦友的: https://ithelp.ithome.com.tw/articles/10095237
Rach iT邦新手 4 級 ‧ 2017-11-19 17:24:29 檢舉
效能的關鍵應該不是這種挑選,而是你怎麼對dom做操作,每一次對dom直接操作就是重大的成本
Zaku iT邦新手 3 級 ‧ 2017-11-21 11:57:58 檢舉
恩,是說在盡量降低DOM操作次數等方面後,不能捨棄的話該怎麼決定用哪些方法比較不會耗能
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
Go7hic
iT邦新手 5 級 ‧ 2017-11-24 17:10:52

如果只是少量的 dom 操作,选择器的性能问题不大。
dom 操作多的话,无论用哪个选择器都记得要缓存,不要每次都去操作 dom。

关于 children()find()next() 这几个应该是 find()方法性能更慢,因为它找的是所有后代元素,具体的选择器实现你可以去看 jquery 的源码

Zaku iT邦新手 3 級 ‧ 2017-11-26 01:52:05 檢舉

請問大大提的緩存是什麼樣的概念?

Go7hic iT邦新手 5 級 ‧ 2017-12-14 14:16:12 檢舉

就是对要多次操作的 DOM 元素做变量缓存。比如你要多次获取操作网站的 title,如果不缓存的话就是每次需要的时候通过 $('.title') 这样去取 title,但其实你可以定义一个变量 var $title = $('.title');这样每次直接用 $title 就可以了。

Zaku iT邦新手 3 級 ‧ 2017-12-19 17:44:35 檢舉

恩這個平常有注意,但量大的時候還可能就要註冊很多個$title,像可能就要一次要設一萬個,可能用迴圈去組合之類的

我要發表回答

立即登入回答