Я задавал подобный вопрос ранее, но я никогда не разъяснял свою точку зрения точно, или, по крайней мере, я думаю, что это такой важный вопрос, что стоит поднять его и посмотреть, может ли кто-нибудь дать какой-то проницательныймысли.
При использовании jQuery многие из нас используют функцию jQuery.ready для выполнения init после загрузки DOM.Фактически это стало стандартным способом добавления программ манипулирования DOM на веб-страницу с использованием jQuery.Связанное событие существует изначально в некоторых браузерах, но jQuery эмулирует его в других браузерах, таких как некоторые версии IE.Пример:
<head>
<script>
var init = function() { alert('hello world'); };
$.ready(init);
</script>
Теперь все наши тесты показывают, что это событие может быть довольно медленным.Это не так медленно, как window.onload, но все равно часто перед запуском задержка составляет около 100 мс.Если FF, то это может быть до 200-300 мс, особенно при обновлении.
Это очень важные миллисекунды, потому что это время, в течение которого отображается начальный макет перед выполнением любых манипуляций с DOM (например,скрытие выпадающего списка).Во многих случаях «мерцание» макета в основном вызывается медленным событием готовности DOM, заставляющим программистов скрывать элементы с использованием CSS и потенциально делающим его менее доступным.
Теперь, если вместо этого мы поместим функцию init втег script перед закрытием тега body будет выполняться намного быстрее, обычно примерно вдвое, но иногда даже быстрее:
<head>
<script>
var init = function() { alert('hello world'); };
</script>
</head>
<body>
<!-- some HTML -->
<script>init();</script>
</body>
Простая тестовая страница, которая доказывает различия: http://jsbin.com/aqifon/10
Я имею в виду, мы не говорим о едва заметных различиях, поскольку некоторые из «полицейских по оптимизации» поощряют использование эффективных селекторов.Мы говорим о некоторых значительных задержках при выполнении манипуляций с DOM-нагрузкой.При использовании этого примера в FF, domready может иногда быть более чем в 100 раз медленнее (300 мс против 2 мс).
Теперь на мой вопрос: Почему рекомендуется использовать jQuery.ready, когда он явно многомедленнее других альтернатив?И каковы недостатки вызова init перед закрытием тела против использования jQuery.ready?Возможно, более «безопасно» использовать domReady, но в каком контексте это более безопасно, чем другой вариант?(Я имею в виду такие вещи, как document.write и отложенные сценарии) Мы использовали BODY почти 5 лет на многих клиентских сайтах и никогда не сталкивались с какими-либо проблемами.Это просто намного быстрее.
Мне также интересно, так как jsPerf и оптимизация селекторов для пары мс на 10000 выполнений так много размышляют, почему не так много разговоров об этом?По сути, это первая задержка, с которой сталкивается пользователь, и, кажется, довольно просто нарезать 50-100 мс при каждой загрузке страницы ...