Блог

Я создаю веб-приложение на одной странице. Я использую YUI для таких вещей, как триггеры событий. HTML Dom не такой большой, 50 кб, они содержат множество скриптов для YUI и прочего. Все загружается нормально — работает очень быстро в Chrome. Приложение не выполняет никаких внешних вызовов, таких как выборка URL / ajax и т.д. Моя проблема в том, что в Firefox Dom работает вяло / очень медленно. даже при нажатии кнопки она остается нажатой на мгновение, а затем появляется, т. Е. Dom замедляется, как будто что-то замедляет его работу в фоновом режиме. Мне было интересно, что может вызвать это. Может ли это быть вызвано слишком большим количеством кода, слишком сложными объектами — объектами ie json, слишком большим количеством обработчиков событий или слишком большим доступом к Dom в целом. Это не тот случай, когда код выполняется медленно. Это не сам код. Проблема в том, что сам Dom работает медленно, как будто у них слишком много кода и т.д. Хотя большинство фреймворков увесистые, я не вижу, чтобы мой код был таким большим. Любые идеи или указатели были бы полезны. Я ценю, что без кода или примера я не могу получить точные ответы, что я искал, так это указания относительно того, что является и не является приемлемым

1. размер страницы
2. количество событий в Dom
3. сложность объектов json / JavaScript
4. множество селекторов классов css в элементах ie class=»кнопка babel ui с красным круглым отключенным триггером»

будут ли эти вещи замедлять работу Dom, и если да, то как это можно обойти.

Вы можете использовать Firebug, чтобы увидеть, где зависает JavaScript.

1. Откройте Firebug.
2. Нажмите «Консоль».
3. Чтобы начать профилирование, нажмите «Профиль».
4. В вашем приложении нажмите кнопку, которая, как вы знаете, реагирует медленно, и дождитесь ответа.
5. Снова нажмите «Профиль».

Это даст вам список всех выполнявшихся JavaScript-файлов и какие функции занимали больше всего времени. Это хорошая отправная точка для выяснения, почему все так долго. Возможно, YUI способен использовать более быстрые селекторы DOM в Chrome, чем FF. Если это так, вы, вероятно, могли бы добавить некоторые идентификаторы на страницу, чтобы сократить это.

Если бы мне пришлось угадывать, я бы упорядочил перечисленные вами параметры как самые большие потери производительности, подобные этому:

1. множество селекторов классов
2. количество событий в самом Dom
3. сложность объектов JS / JSON
4. размер страницы

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