jquery 各類dom 操作效能比較

dom jquery javascript

Zaku 2017-11-17 11:21:01 ‧ 6526 瀏覽

分享至

想請問各位大大對於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 }} |

直播中

1 個回答

Go7hic

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

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

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

回應 3
分享
檢舉

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，像可能就要一次要設一萬個，可能用迴圈去組合之類的

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙