Если блок кода Javascript не находится в конце HTML-файла, а использует $(документ) jQuery.ready (функция () { ... }), это замедлит отображение страницы?

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

Но для лучшей инкапсуляции HTML и соответствия кода Javascript, такого как "карусель изображений", то обычно HTML и Javascript помещаются в один файл, поэтому есть блоки кода Javascript, все перемешанные с кодом HTML на протяжении всего финального HTML-файла.

Но что, если все эти блоки кода Javascript используют jQuery $(document).ready(function() { ... }) для выполнения задачи, то не будет ли отображение страницы также очень быстрым? Я думаю, не так быстро, как когда Javascript фактически помещается в конец HTML-файла, но достаточно близко, потому что он просто добавляет функцию в очередь готовых событий.

1 3
javascript jquery performance pageload

1 ответ:

Я думаю, что смысл в том, чтобы поместить js в нижней части страницы (обычно внутри закрывающего тега </body>), чтобы содержимое страницы отображалось, пока js загружается .

Если у вас есть код jQuery, распределенный по всему HTML в отдельных вызовах .ready(), то, несмотря ни на что, он не будет работать, пока <body> не будет полностью загружен. Таким образом, вопрос будет заключаться в том, сколько javascript у вас есть в HTML?

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

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

Лично я не стал бы смешивать javascript с HTML только ради ассоциации. Вы можете получить неожиданные результаты, если начнете удалять / добавлять контент, который включает в себя скрипт. Я бы предпочел использовать соответственно именованные классы и идентификаторы, а также множество комментариев к коду.

Также имейте в виду, что эти вызовы .ready() не будут работать, пока не загрузится jQuery, что означает, что он должен быть в верхней части страницы или, по крайней мере, до вашего первого вызова.

Итак, мы снова возвращаемся к вопросу о том, что для вас важнее. Если вы хотите, чтобы содержимое было видно как можно быстрее, поместите все js внизу. Если вы хотите свой метод смешивания js и HTML, вы будете иметь некоторую задержку в отображении страницы.
2