jQuery選項卡和Firefox性能問題

Question

考慮在頁面上有幾千個常規輸入按鈕（帶有jQuery.button（）UI）和輸入文本。

在Firefox上，如果我點擊一個按鈕，點擊事件即刻觸發。

但是，如果我把所有這些對象放入一個jQuery選項卡，需要一些時間來打開選擇菜單或觸發點擊按鈕。

在Chrome瀏覽器中，無論有沒有標籤，一切都會立即觸發。

請在Firefox上檢查此鏈接http://jsbin.com/awubo3/5/edit，然後刪除標籤上的評論，然後重試。當選項卡啓用時，按鈕會稍微晚一些。

在我的頁面上更糟，有時需要3-4秒才能觸發點擊或打開選擇菜單。

可以解決這個問題嗎？

Answer 1

該頁面肯定有一些性能問題。由於您正在進行大量工作，您將親眼目睹JavaScript引擎實現之間的性能差異。除了嘗試找到更有效的方法來做你想做的事情之外，你可以做的不多。

例如，您可以保持您的代碼架構相同，但減少頁面上的元素數量。實施某種分頁解決方案，讓用戶獲得所有記錄，但限制查看的數量，以便表現可以接受。

如果您必須同時顯示所有這些信息，請考慮實施您正在使用的jQuery UI元素的輕量級版本。實現「標籤」系統可以非常輕量（here is an example，這是在很少的代碼行中完成的）。如果純粹出於風格原因使用UI按鈕，請參閱單獨使用CSS可以實現多少。

Answer 2

jQuery，所有它的優點，需要很長的時間來做事情。考慮$（＃元素）與getElementByID。後者是建立在JavaScript，如果你有很多，運行純JavaScript更快。但jQuery選擇器經歷了一堆jQuery函數調用。另外，通過我發現，jQuery也克隆了很多。假設你在一個點擊處理程序中給它一個匿名函數.jQuery不只是附加事件並且完成它。相反，它使用該函數，通過一堆isString，isObject，isArray，最後是isFunction。一旦發現它是一個函數，它將它分開並在私有內部函數中重建整個事物，然後它可以將它附加到事件中。