Проверка $ (document) .ready () замедляет работу IE?

Question

Я работал с компанией под названием Catchpoint , чтобы уточнить некоторые несоответствия в наших метриках кода на стороне клиента.У них есть некоторые события, которые запускают измерения, которые измеряют вехи в процессе загрузки страницы.Их предоставленные метрики для нас в IE8.

Теперь они утверждают, что способ, которым JQuery определяет готовность DOM в IE, на самом деле радикально снижает производительность страницы и что мы должны избегать этого любой ценой.Мне известно о том, что делает JQuery с методом doScrollCheck() и рекурсивным взрывом в 1мс setTimeout на documentElement, и мне пришло в голову, что у них может быть действительное утверждение.

Они сказали, что производительность подорванаэкспоненциально для каждого $(document).ready() блока.

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

Answer 1

Согласно JSperf, несколько функций готовности DOM действительно замедляют страницу во всех браузерах, и этого достаточно, чтобы я перестроил большую часть своего собственного кода, чтобы приспособиться к этому новому открытию. Конечно, IE медленнее, но тест не настолько информативен, как я надеялся, потому что он намного медленнее, даже без проверки готовности DOM. От этого нужно избавиться, по возможности, минимизировать использование этих функций DOM ready.

Результаты в Chrome:

• Один $ (документ) .ready () : 734 811 операций в секунду
• Несколько $ (document) .ready () [4 блока] : 151 989 операций в секунду
• Нет $ (документ) .ready () : 208 965 555 операций / сек

Результаты в IE8:

• Один $ (документ) .ready () : 26 349 операций / сек
• Несколько $ (document) .ready () [4 блока] : 5,971 операций в секунду
• Нет $ (документ) .ready () : 5000 159 операций в секунду

---

Анализ этих метрик:

• В Chrome проверка No DOM ready занимает 0.35% времени готовности DOM проверка занимает
• В IE проверка готовности DOM не занимает 0,53% времени DOM готовая проверка занимает

Только эти данные говорят нам о том, что функция doScrollCheck() значительно снижает производительность .

Как говорится:

• Проверка готовности DOM в Chrome * в 1068 * 27,98 раз быстрее , чем в IE
• В Chrome выполнение 4 проверок готовности DOM * в 1072 * 25,45 раза быстрее , чем в IE
• Отсутствие проверки готовности DOM * в 1076 * 41,79 раз быстрее в Chrome, чем IE

На первый взгляд, это выглядит безнадежно - но если подумать, страница IE без функции готовности DOM выполняла более 5 миллионов операций в секунду, а одна функция готовности DOM в Chrome выполняла менее миллиона. Это говорит мне, что если вам удастся сказать JQuery использовать более дружественную функцию doScrollCheck(), которая, скажем, проверяет, прокручивается ли documentElement каждые 100 мс, а не каждые 1 мс, вы можете увидеть время загрузки страницы более конкурентоспособным по сравнению с chrome.

Что этот эталонный тест на самом деле говорит мне о том, что даже проверка DOMContentLoaded медленная до чертиков - нет никакого оправдания переходу с 209 миллионов операций в секунду до менее миллиона на Chrome.

http://jsperf.com/docready/3

Answer 2

Мой 2с:

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

a) Имейте в виду, что НИ ОДИН ПОЛЬЗОВАТЕЛЬ в идеальном мире не будет взаимодействовать с веб-страницей, как только она загрузится (показано); и

b) По-прежнему в идеальном мире пользователь, скорее всего, просматривает всю страницу до (даже прокручивая вверх и вниз) какого-либо взаимодействия.

Имея в виду этот идеальный сценарий, все, что вы должны иметь между <тип сценария ...> , - это минимум, необходимый для ВСПЫШКИ страницы и, конечно же, готовый документ.

А вот и магия: поместите ВСЕ ПРОЧЕЕ в отдельный файл SCRIPT.JS и загрузите его с getScript в готовый документ:

$(document).ready( function () {
    ...
    ...
    $.getScript('your-scripts-path/your-script-file-name.js');
});

Имейте в виду, что $ .getScript может, конечно, стать обратным вызовом в одном из вызовов dom-ready. И это тоже может иметь обратные вызовы.

Удачи!

Answer 3

Вот скрипт, который измеряет время между $(document).ready() срабатыванием и кодом, выполняемым в конце тела (это самое раннее возможное время, когда вы можете манипулировать DOM). Вы можете запустить его самостоятельно в любых браузерах. Страница находится здесь: http://jsfiddle.net/jfriend00/dLx4L/.

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