template.find（）vs document.querySelector vs jquery vs template。$ performance in Meteor

我知道使用template.find()或template.$來搜索Meteor中的DOM比搜索所有與document.querySelector()或jQuery的DOM更快。但我不知道有多快。我想它會直接與應用程序的DOM節點數量有關，但我不知道是否是這種情況，或者如果Meteor中有任何其他優化/降級使得這種假設不成比例。有沒有人知道關於此性能測試/結果？

來源

2015-06-26 Paulo Janeiro

template不等於document。 A document可以包含許多template。 template.find abstracts $，但template.find不添加任何功能。所以template.$和template.find或多或少會有同樣的表現。 $是jQuery的常見別名，當您將單個字符串傳遞給jQuery函數時，它會經過幾次抽象，並且可能是土地上的document.querySelector。這就是爲什麼document.querySelector is a lot faster than jQuery（jsperf現在下降，所以我不能告訴你多快）。 jQuery太慢了，在大多數情況下，它可能會在document.querySelector和template.$之間關閉。

通過獲取包裝目標的節點並使用native-DOM函數，您將獲得最佳性能。如果您的模板中有一個包裝元素，則可以使用template.firstNode屬性。否則，你可以做些什麼：template.firstNode.parentElement。然後我使用getElementsByClassName或getElementById。他們比querySelector更快，因爲使用querySelector查詢必須先被解析。至少大部分時間取決於包裝節點中的節點數量以及樹中搜索元素的距離。

來源

2015-06-26 21:06:20 Kriegslustig

你說得對。我使用jperf來查看這些DOM遍歷差異有多大。從你說的我想象通過使用模板。$查詢首先完成，然後結果被傳遞給一個jQuery對象，而不是相反。此外，你建議使用本地getElementByClassName（我不使用元素中的ID），而不是在文檔上，但在template.firstNode上。但是，這不會搜索我認爲的兄弟姐妹，所以我必須將我的模板元素包含在div中，例如？ –

'模板。$'通過抽象層執行'$'。它隱藏了[深入內部]（https://github.com/meteor/meteor/blob/master/packages/blaze/dombackend.js#L177）。所以它很慢。搜索我發現了一個替代纏繞'div'的艱難。看看我的[最新版本]（https://stackoverflow.com/posts/31082153/revisions）。另外，要回答你的問題：正確。 – Kriegslustig

@PauloJaneiro我發現blaze使用'_domrange.parentNode'作爲'$'-selector的上下文。這意味着'template。$'的範圍等同於'template.firstNode.parentElement'。 [所以我更新了我的答案]（https://stackoverflow.com/posts/31082153/revisions） – Kriegslustig

我不能說我注意到我的用戶有任何真正的性能提升，但我會說template.find（）似乎讓我在編碼方面有了性能提升。

例如

var someID = $('#some-id');

不會是可控的，直到我添加一個數組插槽，像這樣：

var someID = $('#some-id')[0];

凡爲

var someID = template.find('#some-id')

只返回HTML元素，意思是我不必每次都像數組一樣對待它。

來源

2015-06-26 21:02:23 thatgibbyguy

關於該數組的事情..流星只是執行'jQuery'並返回'[0]'。 [源代碼]（https://github.com/meteor/meteor/blob/master/packages/blaze/template.js#L311）。我知道它有點更好，但它需要jQuery的整個鏈接。正如我所看到的那樣，它是唯一的好處。 – Kriegslustig

我也有這個問題。然後仔細查看文檔（Meteor和jQuery），我發現這正是使用模板的好處之一。$（selector）特別是當使用類作爲選擇器時：將搜索的範圍縮小到模板我得到JUST元素I希望它工作正常，我可以應用jQuery方法與使用jQuery完全相同。當我使用jQuery時，有時我會得到更多其他元素與同一個類，並且我遇到同樣的問題。 –

感謝Paulo，是的，確切的問題是我無法將jQuery方法應用到它。很高興知道。 – thatgibbyguy

template.find（）vs document.querySelector vs jquery vs template。$ performance in Meteor

回答

相關問題