Есть ли разница в следующих фрагментах JavaScript?

Question

Есть ли разница в обоих этих фрагментах:

Запись этого фрагмента в конце HTML // where should we write the script anyways, is it inside body tag or just after body tag.

<script type="text/javascript">
insertNavigation(); // any arbitrary method
</script>

Или написать этот фрагмент в конце HTML

<script type="text/javascript">
if (window.addEventListener){   
    window.addEventListener('load', insertNavigation, false);   
} else if (window.attachEvent){ 
    window.attachEvent('onload', insertNavigation );    
}
</script>

будет ли вывод обоих фрагментов одинаковым? Если да, то какой подход должен следовать. Если нет, то как?

Answer 1

Есть ли разница?

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

Где разместить сценарии?

Общая рекомендация заключается в том, что они располагаются в конце документа, внутри тела. Спецификация не допускает, чтобы ничего кроме head и body находилось непосредственно внутри тега html.

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

Рекомендации:

Если в эти дни вы используете какой-либо из распространенных наборов инструментов / библиотек javascript, у них часто будет своя собственная конструкция для указания некоторого кода, запускаемого после того, как страница будет готова. Например, в jQuery это так:

$(function() {  /* code here */ });

Кроме того, хорошее использование упаковки / минимизации javascript, кэширования и gzipping на стороне сервера минимизирует негативные последствия размещения сценариев в голове, где они обычно размещаются. Тем не менее, это не повредит, чтобы бросить его в конце.

Answer 2

есть существенная разница: код, вставленный в тег <script>, будет блокировать рендеринг браузера до тех пор, пока код не будет выполнен, в то время как при использовании load даже браузер будет рендерить все и исполнять ваш код, что намного лучше IMHO.

Кроме того, если вы используете первый метод, которого нет, если все необходимые вам элементы DOM были бы доступны, с помощью метода load вы уверены, что можете безопасно управлять DOM.

С точки зрения построения неагрессивного javascript второй метод лучше, поскольку он будет работать из любого места, и сценарий должен полагаться на id и тому подобное для вставки некоторого содержимого.