我應該擔心會附加很多不需要的事件處理程序/偵聽器嗎？

我有一個站點，每個頁面上有許多jQuery事件處理程序，全部在一個大的.js文件中。我應該擔心會附加很多不需要的事件處理程序/偵聽器嗎？

這意味着對於任何頁面來說，大多數事件處理程序都是針對不存在並且根本不會使用的HTML。

請問這是我的表現嗎？

編輯：作爲一個例子，大多數事件處理程序會做這樣的事：

$(".page").on("click", ".notes .add", function(){ ... });

因爲.on()作品新的元素，將它總是被浪費的處理能力，或將只進來在ajax調用之後DOM發生變化時生效？爲了進一步澄清我的問題，我想我應該把它分成兩部分。

如果有一個表演ding，什麼時候會發生？（總是，在任何情況下，只在DOM上更改，僅在加載時）。
是否足夠擔心？我如何衡量這一點？如果有一千個這樣的聽衆，那麼這個時間是以秒，毫秒，微秒來衡量的嗎？我知道我可以加載頁面，看看它有什麼'感覺'，但是我希望有一個想法，如果我在開始之前構建了錯誤的東西！

來源

2012-08-07 brentonstrine

那麼如果你沒有像'if（$（element）.length）{//處理這裏}那樣做'你會產生不必要的開銷，這也會產生一個錯誤，說'找不到元素' – Ohgodwhy 2012-08-07 00:25:38

那麼，jQuery將嘗試查找元素，它不會成功，因此不會對處理程序做任何事情。只有您可以測試這是否實際影響您的網站/腳本的性能。顯然它正在做*某事*，這比什麼都沒有，但這並不意味着你會注意到一個區別。 – 2012-08-07 00:26:17

它在很大程度上取決於標記，但總的來說，刪除不必要的事件處理程序是一個好主意，如果它們不被使用。

使用Sizzle選擇引擎將jQuery事件附加到元素。這意味着對$('a').click()的調用仍然需要遍歷整個DOM搜索鏈接。由於您的元素不存在，因此不會綁定事件，但這並不妨礙jQuery不必搜索目標元素。減少jQuery工作負載的一種方法是在綁定必要事件之前測試是否存在已知元素，例如表單標記。

if ($('form').size() > 0) { 
    // bind events for form here 
}

如果事件與.on()，.delegate()，或.live()因爲這些堅持會吃更多的資源，因爲它們是設計來結合所有元素，包括那些尚未創建它變得更糟。

來源

2012-08-07 00:49:01

你擊敗了我！ – 2012-08-07 00:57:06

所有的jQuery事件都會使用'.on（）'，有時候會使用DOM樹中的對象（儘管從來沒有達到BODY）。 '.on（）'如何使它比正常的事件處理程序更糟？ – brentonstrine 2012-08-07 01:05:48

@brentonstrine，這是一個很好的觀點。使用bind（）顯然在後臺調用on（）。也就是說，標準的bind（）或click（）方法不會將選擇器傳遞給on（），所以在這種情況下沒有子元素的持久性。 – 2012-08-07 03:08:33

我認爲不言而喻，你應該只包括你實際需要的JavaScript。任何一段代碼，你不需要是在浪費處理能力但它是否影響性能真的取決於你的標記/其它代碼/等

而是擔心表現，我會擔心可維護性。你真的只想擁有一個大型的JavaScript文件，其中包含所有網站的所有代碼？它最終會變得混亂。

關於：$(".page").on("click", ".notes .add", function(){ ... });。這真的取決於。事件委託的好處是它只綁定一個事件處理程序來管理多個元素。

在此，它僅將事件處理程序綁定到.page。但處理程序正在檢查的任何單擊來自.page的後代的點擊事件以查看元素是否匹配.notes .add。很顯然，如果沒有.notes .add元素，這只是不必要的計算。

但是如果反而.page元素不存在，那麼事件處理程序甚至不會被綁定，這是可以的。 jQuery將嘗試找到.page元素，並會失敗。取決於選擇器的複雜性，這可能確實有影響（儘管類名不復雜）。

來源

2012-08-07 09:34:51

我應該擔心會附加很多不需要的事件處理程序/偵聽器嗎？

回答

相關問題