document.addEventListener замедляет загрузку

У меня есть веб-приложение. Я написал код javascript календаря. Тег script находится в теле html-кода и загружает этот js-файл с сервера.

До написания последних кодов загрузка страницы занимала около 900 мс. Когда я написал последний из своих кодов javascript, загрузка страницы заняла 6 секунд.

Код Javascript в основном определяет класс для моего календаря. В нем много методов. В моих последних кодах я написал новый метод, который выглядит следующим образом:

registerHider = function(){
    alert('hello');

    if(document.addEventListener){
        document.addEventListener('click', hider, false);
    }
};

Метод «hider» — это еще один метод, который просто меняет стиль «display» на «none». Это все. Когда я комментирую код «addEventListener», страница снова загружается примерно через 900 мс. Но когда я раскомментирую, это снова занимает 6 секунд.

Я поместил туда предупреждение, чтобы узнать, пытается ли страница обработать какой-либо код при загрузке, но на экран не выводится сообщение. Оттуда я понимаю, коды еще не выполнены. Даже я изменил код, чтобы зарегистрировать событие только в том случае, если документ готов, никакой помощи, все то же самое.

Что может быть причиной этой проблемы?


person tcak    schedule 24.10.2012    source источник
comment
любой живой пример только для отладки?   -  person albanx    schedule 25.10.2012
comment
в любом случае я предложу добавить событие к целевому объекту, а не ко всему документу   -  person albanx    schedule 25.10.2012
comment
Добавление одного прослушивателя событий на страницу не может привести к скачку времени загрузки. У вас есть что-то еще [большой цикл] или множество операций поиска/записи DOM, которые замедляют скорость рендеринга.   -  person epascarello    schedule 25.10.2012
comment
@sabithpocker, если вы привяжете событие ко всему документу, везде, где вы нажмете, вы получите это событие (за исключением тех элементов, где событие захвачено и выполняется stopPropagation)   -  person albanx    schedule 25.10.2012
comment
@albanx Точно. И вы можете видеть в этом преимущество: это позволяет вам привязывать события, предназначенные для объектов, которые не существуют в DOM во время привязки, если вы проверяете цель события внутри прослушивателя. Это известно как делегирование события.   -  person bfavaretto    schedule 25.10.2012
comment
@bfavaretto да, это может быть хорошей идеей, но здесь следует позаботиться о цели мероприятия. jQuery .on и .live очень полезны в этом случае.   -  person albanx    schedule 25.10.2012
comment
@bfavaretto, так что оптимальное решение - привязать слушателя к первому статическому родителю динамического элемента?   -  person sabithpocker    schedule 25.10.2012
comment
@albanx Да, это то, что делают jQuery .on и .live (устарело!) за кулисами.   -  person bfavaretto    schedule 25.10.2012
comment
@sabithpocker Это возможно, но наиболее эффективное решение зависит от события и от того, что находится в DOM. Я не вижу большой проблемы в привязке всех событий кликов к document, если на странице не так много элементов. Или событие изменения, если только на вашей странице нет сотен выбранных элементов. Но я бы не стал привязывать mousemove к документу...   -  person bfavaretto    schedule 25.10.2012
comment
Я не мог бы иметь такой же эффект на простом примере. Итак, я загрузил фотографии. imgur.com/a/aHeNx . Есть 4 картинки. Раскомментированные и прокомментированные коды и тайминги. КОДЫ НЕ ИЗМЕНЯЮТСЯ, ЗА ИСКЛЮЧЕНИЕМ ПОКАЗАННЫХ КОММЕНТАРИЙ.   -  person tcak    schedule 25.10.2012
comment
@bfavaretto да, даже я думаю, что это зависит от ситуации, но они осуждают живое выступление, поскольку оно всегда связано с документом. Проблемы разработчиков фреймворка не всегда наши!   -  person sabithpocker    schedule 25.10.2012
comment
Кстати, имя файла — widget-calendar.js.   -  person tcak    schedule 25.10.2012
comment
Сколько раз вы вызываете registerHider в своем коде?   -  person sabithpocker    schedule 25.10.2012
comment
Он вызывается только один раз, когда я нажимаю на элемент ввода. Событие onfocus вызывает метод show. Затем метод show вызывает метод registerHider. Хотя коды не комментируются, для загрузки требуется время, но скрытие (подключенное к document.onclick) и отображение календаря работают безупречно, а загрузка ЦП вполне нормальная.   -  person tcak    schedule 25.10.2012
comment
Можете ли вы записать время? Один в начале файла в заголовке, один в качестве последнего скрипта непосредственно перед конечным тегом тела. Используйте console.time. Настройте регистратор времени, чтобы обнаружить код, отнимающий ваше время.   -  person sabithpocker    schedule 25.10.2012
comment
[22:53:27.695] beforewidget: таймер запущен [22:53:27.799] beforewidget: 104 мс [22:53:27.861] widget: таймер запущен [22:53:33.155] widget: 5294 мс [22:53:33.198] afterwidget : таймер запущен [22:53:33.203] afterwidget: 5 мс   -  person tcak    schedule 25.10.2012
comment
Ну, я кое-что обнаружил. Сейчас я использую отладчик Firefox 16. Он показывает загруженные файлы javascript в Dropbox. Когда я выбираю другие файлы javascript из списка, он очень быстро загружает коды в текстовую область. Но при загрузке виджета он ждет 3-4 секунды с надписью Загрузка....   -  person tcak    schedule 25.10.2012
comment
Вы проверяли в хроме или сафари? Также переместите таймер внутри виджета, чтобы определить, какая часть вызывает проблемы. Профилировщик Firefox также может помочь.   -  person sabithpocker    schedule 25.10.2012
comment
Ну думаю, я решил проблему. Что я сделал, так это то, что вместо определения методов для регистрации и отмены регистрации я удалил их и записал их коды непосредственно в методы отображения и скрытия. Теперь он загружает страницу за 1,2 секунды. Но это все еще на 300 мс дольше, чем обычно.   -  person tcak    schedule 25.10.2012
comment
К вашему сведению, я также удалил оттуда методы attachEvent, поэтому он загружается быстро. В противном случае в новом формате с методом attachEvent это все еще занимает много времени. Я установлю Chrome на виртуальную машину и попробую.   -  person tcak    schedule 25.10.2012
comment
Я пробовал в Хроме. Пока он загружается в Firefox, Chrome говорит, что не удалось загрузить скрипт. Но затем прокомментируйте эти addEventListener и attachEvent, и Chrome успешно загрузит их. Это начало вызывать у меня головную боль. Не знаю, баг это или что-то в этом роде.   -  person tcak    schedule 25.10.2012
comment
Вероятно, у вас есть какой-то круговой цикл, который поглощает память или что-то в этом роде. Избавьтесь от своей логики присоединения событий к onfocus, проверьте прикрепление всего правильно, когда страница загружается последовательно, чтобы проверить, не вызвала ли ваша логика какие-либо циклы или утечки.   -  person sabithpocker    schedule 25.10.2012
comment
Все проблемы решаются. Оказалось, что дело было не в каком-то из этих javascript-кодов. Извлеченные уроки: если длина содержимого заголовка HTTP превышает реальный размер содержимого; 1) Firefox ждет дольше, но все еще работает. 2) Chrome не может загрузить код javascript. В любом случае спасибо всем присутствовавшим.   -  person tcak    schedule 26.10.2012


Ответы (1)


Все проблемы решаются. Оказалось, что дело было не в каком-то из этих javascript-кодов.

Извлеченные уроки: если длина содержимого заголовка HTTP превышает реальный размер содержимого;

  1. Firefox ждет дольше, но все еще работает.
  2. Chrome не может загрузить код javascript. Так что это не работает.

В любом случае спасибо всем присутствовавшим.

person tcak    schedule 25.10.2012