Вкладки jQuery и проблемы с производительностью Firefox

Question

Подумайте о наличии нескольких тысяч обычных кнопок, кнопок ввода (с пользовательским интерфейсом jQuery .button ()) и ввода текста на странице.

В Firefox, если я нажимаю кнопку, событие нажатия кнопки запускается мгновенно.

Но, если я помещу все эти объекты на вкладку jQuery, потребуется некоторое время, чтобы открыть меню выбора или вызвать нажатие кнопки.

В Chrome с вкладками или без них все запускается мгновенно.

Пожалуйста, проверьте эту ссылку http://jsbin.com/awubo3/5/edit в Firefox, затем удалите комментарий на вкладках и попробуйте снова. Кнопки сработают немного позже, когда вкладки включены.

На моей странице это даже хуже, иногда требуется 3-4 секунды, чтобы вызвать щелчок или открыть меню выбора.

Можно ли исправить эту проблему?

Answer 1

jQuery, несмотря на все его сильные стороны, делает многое. Рассмотрим $ (# element) против getElementByID. последний встроен в javascript, и если у вас их много, запуск чистого javascript выполняется быстрее. Но селектор jQuery проходит через множество вызовов функций jQuery. Также, пройдя по шагу, я обнаружил, что jQuery также много клонирует. Скажем, вы даете ему анонимную функцию в обработчике кликов. JQuery не просто прикрепляет событие, а завершает его. Вместо этого она берет эту функцию, проходит через связку isString, isObject, isArray и, наконец, isFunction. Как только он обнаруживает, что это функция, он разрывает ее на части и перестраивает все это в частную внутреннюю функцию, затем он может присоединить ее к событию.

Answer 2

На странице определенно есть проблемы с производительностью.Из-за интенсивной работы, которую вы проделываете страницу, вы воочию видите разницу в производительности между реализациями движка javascript.Вы ничего не можете с этим поделать, кроме как попытаться найти более эффективный метод выполнения того, что вы хотите делать.

Например, вы можете оставить архитектуру своего кода такой же, но уменьшить количество элементовна странице.Внедрите какое-то решение для пейджинга, чтобы пользователи могли получить доступ ко всем записям, но ограничить количество просмотров, чтобы производительность была приемлемой.

Если вам нужно было отображать всю эту информацию одновременно, подумайте о внедрении более легкойвесовые версии используемых вами элементов пользовательского интерфейса jquery.Реализация системы «табуляции» может быть очень легкой (, вот пример , который выполняется в очень мало строк кода).Если вы используете кнопку пользовательского интерфейса исключительно из соображений стиля, посмотрите, сколько вы можете достичь, используя только CSS.