метрики производительности нескольких document.ready ()

Question

У меня есть несколько файлов javascript, которые во время выполнения объединяются и уменьшаются. Это для корпоративного приложения с 10+ разработчиками. Повсюду есть функции document.ready, вызывающие 5+ секундную загрузку JavaScript. Я хотел бы получить дополнительную помощь в выяснении узких мест, медленно удаляя компоненты.

* 1003 Е.Г. *

file1.js

$(document).ready(function() {
  // 100s of lines of code
});

file2.js

// 100s of lines...
$(document).ready(function() {

  // 100s of lines of code

});
// 100s of lines...

Я хотел бы включить некоторые метрики, чтобы я мог медленно комментировать различные функции и видеть, что на самом деле имеет значение. По сути, мне нужен способ контролировать общее время, необходимое для запуска документа.

Я думаю, может быть, я смогу использовать jQuery для достижения этой цели. Возможно, измените все $ (document) .ready в моем проекте, чтобы использовать оболочку jquery, а затем установите таймер. В качестве альтернативы я мог бы запустить функцию в качестве самого первого сценария (до включения комбинированного / minfied файла) для запуска таймера. Я просто не уверен, когда этот таймер может остановиться и отобразить. Есть идеи?

Edit: Я знаю, что firebug может этого добиться, но я работаю над огромным корпоративным приложением, и к сожалению, в настоящее время для меня это не вариант. Я действительно надеюсь просто прикрепить номер к HTML. E.g.:

document.ready время: 653ms

Answer 1

Я думаю, что первое, что вы должны сделать, это запустить Firebug или Safari и посмотреть, что на самом деле занимает все время.

После этого использование Page-Speed ​​и YSlow поможет вам узнать больше о узких местах скорости загрузки.

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

Answer 2

Если вы застряли на IE6, dynaTrace Ajax может стоить заглянуть. Это должно позволить проверять и профилировать сценарии способами, аналогичными тем, что вы делаете в профилировщике Firebug. Это спасет вас от изменений кода ...

К сожалению, у меня нет личного опыта (пока), но у других есть (см. Отзывы для ссылок. Извините, но у меня недостаточно представителей для размещения ссылок здесь).

Answer 3

Вам не нужно количество вызовов $ (document) .ready (fn) ... если вы посмотрите на внутреннюю работу jQuery, она не делает ничего фантастического. Это просто помещение всех функций, которые вы передаете, в массив, а затем выполнение каждой из них при вызове jQuery.ready () после загрузки DOM.

На вашем месте я бы взглянул на несколько вещей:

1. Насколько велика ваша html продукция? Есть ли тонны вложенных элементов? Это может замедлить загрузку DOM.
2. Вы делаете много вызовов ajax в начале загрузки своей страницы, чего вам нужно ждать, прежде чем ваши сценарии могут завершиться?
3. Используете ли вы действительно неэффективные селекторы с jQuery? здесь довольно много сообщений .

Надеюсь, это поможет.

Answer 4

Благодаря Блеш, это решение, которое я искал:

отредактируйте производственный jQuery-1.3.2 и окружите вызов jQuery.ready () следующим:

var startTime = new Date(); 
jQuery.ready(); 
var endTime = new Date(); 
var difference = endTime - startTime; 
alert("document.ready time: " + difference + " milliseconds"); 

jQuery.ready () - это строка 3066 для IE.

И, конечно, предупреждение можно заменить на что-то, что выводится прямо на экран, в зависимости от вашего макета.

Спасибо, Боже!