Использование DOMContentReady считается анти-шаблоном Google

Член команды библиотеки Google Closure утверждает, что ожидание события DOMContentReady является плохой практикой.

Рассказ о том, что мы не хотим ждать DOMContentReady (или, что еще хуже событие нагрузки), поскольку это приводит к плохому Пользовательский опыт. Пользовательский интерфейс не является до тех пор, пока все DOM не будут загруженный из сети. Итак предпочтительным способом является использование встроенных скриптов как можно скорее.

Поскольку они по-прежнему не предоставляют более подробных сведений об этом, мне интересно, как они относятся к Operation Aborted в IE. Этот диалог является единственной важной причиной, по которой я знаю, ждать события DOMContentReady (или загрузки).

Знаете ли вы какие-либо другие причины?
Как вы думаете, что они имеют дело с этой проблемой IE?

Ответ 1

Немного объяснения: точка с встроенным JavaScript должна включать его как можно скорее. Однако это "возможно" зависит от узлов DOM, которые требуется объявить script. Например, если у вас есть меню навигации, которое требует JavaScript, вы должны включить script сразу же после того, как меню определено в HTML.

<ul id="some-nav-menu">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
<script type="text/javascript">
    // Initialize menu behaviors and events
    magicMenuOfWonder( document.getElementById("some-nav-menu") );
</script>

Пока вы только адресуете узлы DOM, которые, как вы знаете, были объявлены, вы не столкнетесь с проблемами недоступности DOM. Что касается проблемы IE, разработчик должен стратегически включить их script, чтобы этого не произошло. На самом деле это не так уж и важно, и это трудно решить. Реальная проблема с этим - "большая картина", как описано ниже.

Конечно, все имеет свои плюсы и минусы.

Pros

Как только элемент DOM отображается пользователю, любая функциональность, добавленная к нему с помощью JavaScript, почти сразу же доступна (вместо ожидания загрузки всей страницы).
В некоторых случаях Pro # 1 может привести к более быстрому восприятию времени загрузки страницы и улучшению пользовательского интерфейса.

Против

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

Использую ли я эту технику? Нет. Я предпочитаю загружать все script в конце страницы непосредственно перед закрывающим тегом </body>. Практически в каждом случае это достаточно быстро для воспринимаемой и фактической эффективности инициализации эффектов и обработчиков событий.

Можно ли другим использовать его? Разработчики будут делать то, что они хотят/должны выполнить, и сделать своих клиентов/руководителей/отдела маркетинга счастливыми. Есть компромиссы, и пока вы их понимаете и управляете ими, вы должны быть в порядке.

Ответ 2

Самая большая проблема с встроенными скриптами заключается в том, что он не может быть кэширован должным образом. Если у вас есть все ваши сценарии, хранящиеся в одном файле js, который минимизирован (с использованием компилятора), то этот файл может быть кэширован только один раз для всего сайта браузером.

Это приводит к повышению производительности в долгосрочной перспективе, если ваш сайт имеет тенденцию быть занятым. Другим преимуществом наличия отдельного файла для ваших скриптов является то, что вы склонны не "повторять себя" и объявлять многократно используемые функции как можно больше. DOMContentReady не приводит к плохой работе с пользователями. По крайней мере, он предоставляет пользователю контент перед использованием, а не заставляет пользователя ждать загрузки пользовательского интерфейса, который может стать большим отключением для пользователя.

Также использование встроенных скриптов не гарантирует, что пользовательский интерфейс будет более гибким, чем при использовании с DOMContentReady. Представьте сценарий, в котором вы используете встроенные скрипты для создания ajax-вызовов. Если у вас есть одна форма для подачи штрафа. Имейте более одной формы, и вы в конечном итоге повторяете свои призывы ajax.. поэтому повторяете один и тот же script каждый раз. В конце концов, это приводит к тому, что браузер кэширует более javascript-код, чем он имел бы, если бы он был отделен в файле js, загруженном, когда DOM готов.

Другим большим недостатком наличия встроенных скриптов является то, что вам необходимо поддерживать две отдельные базы кода: одну для разработки и другую для производства. Вы должны убедиться, что обе базы кода поддерживаются синхронно. Версия разработки содержит неминифицированную версию вашего кода, а производственная версия содержит сокращенную версию. Это большая головная боль в цикле разработки. Вы должны вручную заменить все ваши фрагменты кода, скрытые в этих громоздких файлах html, с мини-версией, а также, в конце концов, надеяться, что код не сломается! Однако при использовании отдельного файла во время цикла разработки вам просто нужно заменить этот файл на скомпилированную мини-версию в производственной кодовой базе.

Если вы используете YSlow, вы увидите, что:

Использование внешних JavaScript и CSS файлы обычно создают более быстрые страницы потому что файлы кэшируются браузер. JavaScript и CSS, которые вложенные в HTML-документы загружается каждый раз, когда HTML-документ запрашивается. Это уменьшает число HTTP-запросов, но увеличивает Размер документа HTML. С другой стороны, если JavaScript и CSS находятся в внешние файлы, кэшированные браузером, размер документа HTML уменьшается без увеличения количества HTTP запросы.

Я могу поручиться за встроенные скрипты тогда и только тогда, когда код так часто меняется, что его наличие в отдельном файле js несущественно и в конечном итоге будет иметь такое же влияние, как и на эти встроенные скрипты. Тем не менее, эти сценарии не кэшируются браузером. Единственный способ, которым браузер может кэшировать скрипты, - это хранить его во внешнем js файле с etag.

Однако это не JQuery и Google закрытие каким-либо образом. Закрытие имеет свои преимущества. Однако библиотека закрытия затрудняет работу всех ваших скриптов во внешних файлах (хотя это не так, что это невозможно, просто усложняет). Вы просто используете встроенные скрипты.

Ответ 3

Если время, затрачиваемое на синтаксический анализ, загрузку и рендеринг макета (точка, в которой domready должна срабатывать) без учета загрузки изображений, занимает настолько много времени, что вызывает заметную задержку пользовательского интерфейса, возможно, у вас есть что-то действительно уродливое, страницы на задней панели, и что ваша настоящая проблема.

Кроме того, JavaScript до конца страницы останавливает анализ HTML/DOM до тех пор, пока JS не будет проанализирован и не оценен. Google должен смотреть на свою Java, прежде чем давать рекомендации по JavaScript.

Ответ 4

Одна из причин избежать встроенных сценариев заключается в том, что для этого требуется разместить в документе все библиотеки зависимостей, что, вероятно, отрицательно повлияет на прирост производительности встроенных скриптов. Лучшей практикой, с которой я знаком, является размещение всех сценариев (в одном HTTP-запросе!) В самом конце документа непосредственно перед </body>. Это связано с тем, что script -loading блокирует текущий запрос и все под-запросы до тех пор, пока script не будет полностью загружен, проанализирован и выполнен.

За исключением волшебной палочки, нам всегда придется делать эти компромиссы. К счастью, сам документ HTML все чаще становится наименее ресурсоемким запрошенным запросом (если вы не делаете глупые вещи, такие как огромные URL data: и огромные встроенные документы SVG). Для меня компромисс с ожиданием конца HTML-документа кажется наиболее очевидным выбором.

Ответ 5

Я думаю, что это пособие не очень полезно. DOMContentReady может быть только плохой практикой, потому что в настоящее время он чрезмерно используется (возможно, из-за простого запуска jquery). Многие люди используют его как событие "запуска" для действия any javascript. Хотя даже событие jQuery ready() предназначалось только для использования в качестве точки запуска для DOM-манипуляций.

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

Итак, возможно, члены команды закрытия просто пытаются направиться в противоположном направлении и не позволяют людям выполнять манипуляции с DOM при загрузке страницы вообще?

Ответ 6

Если вам нужно самостоятельно распоряжаться своим HTML, подход Googles кажется очень неудобным. Они используют скомпилированный подход и могут тратить свои мозговые циклы на другие проблемы, что разумно, учитывая сложность своих приложений. Если вы отправляетесь на что-то с более расслабленными требованиями (читайте: почти все остальное), возможно, это не стоит усилий.

Жаль, что GWT говорит только о Java.

Ответ 7

Вероятно, потому, что Google не заботится о том, что у вас нет Javascript, они требуют его практически для всего, что они делают. Если вы используете Javascript в качестве дополнения поверх уже действующего веб-сайта, загрузка сценариев в DOMContentReady будет прекрасной. Дело в том, чтобы использовать Javascript для улучшения пользовательского интерфейса, а не для их исключения, если у них его нет.