Я видел, как библиотеки JavaScript загружаются вверху и внизу страницы.
Я хотел бы знать, когда делать эти выборы. Весь код JavaScript, который я написал, все работает в верхней части страницы, включая плагины jquery.
Когда я загружаю свой script в любую из этих позиций?
Верх. Когда функция JavaScript событий на элементах сразу становится более важной (поэтому, если вы используете событие DOM Ready для загрузки всего, это не то место)
Внизу: при загрузке содержимого важнее
Yahoo говорит Поместите скрипты в нижнюю часть. Google говорит что-то подобное, но не так четко.
Причина, по которой вы делаете это в нижней части страницы, состоит в том, что если вы поместите ее в верхнюю часть страницы, то рендеринг вашей страницы будет ждать этих файлов до их рендеринга. Вот почему многие люди помещают JavaScript в нижней части страницы, так как он позволяет отображать всю страницу, тогда загружается JavaScript.
Очень редко по какой-либо причине вы хотели бы разместить JavaScript в верхней части страницы, и если у вас нет явной причины, по которой вы хотите загрузить JavaScript до основной страницы, тогда поместите его внизу. По этой причине большинство руководств по оптимизации предлагают поместить его внизу.
Я помещаю все CSS в HEAD, чтобы избежать чрезмерной картины на экране и вспышки стиля.
Я помещаю большинство запросов файла JavaScript в нижней части страницы, чтобы страница могла визуализироваться быстро (загрузка HTML/CSS будет блокироваться до тех пор, пока теги script не будут загружены и обработаны). Любой код, который должен быть выполнен после загрузки файлов библиотеки, выполняется наDOMReady, который является всем кодом, кроме инициализации библиотеки. Я в значительной степени следовал рекомендации Google PageSpeed .
Я думал об использовании LABjs, чтобы еще больше уменьшить время загрузки страницы, но сейчас это работает достаточно хорошо.
Из-за того, что браузеру приходится приостанавливать отображение содержимого страницы при анализе файла Javascript, рекомендуется загрузить Javascript в нижней части страницы, чтобы ускорить отображение содержимого страницы. Это лучше всего работает, если ваш сайт может быть отображен без выполнения Javascript для изменения страницы, потому что страница будет доступна для взаимодействия с пользователем, даже если script зависает дольше, чем ожидалось.
Когда браузер встречает элемент script, он должен проверять JavaScript, содержащийся в этом элементе, потому что script может изменить содержимое страницы (через document.write) или проверить текущее состояние страницы.
Если элемент script загружает script с помощью атрибута src, загрузка других ресурсов (JavaScript, CSS, изображения и т.д.) будет заблокирована до тех пор, пока не будет загружен текущий script.
Оба этих фактора могут замедлить воспринимаемое время загрузки вашей страницы.
Если ваш JavaScript не изменяет страницу или нет необходимости проверять состояние страницы до ее загрузки, вы можете пометить ваш элемент script defer="defer" (поддерживаемый IE 6+ и Firefox 3.5 +), что указывает на то, что оценка script может произойти "позже". Перемещение ваших элементов script в нижней части страницы эффективно делает то же самое - так как ваши сценарии появляются в конце документа, они будут оцениваться после загрузки CSS, изображений и т.д., А HTML будет отображаться.
Я помещаю все внешние скрипты (например, аналитика Google) внизу, поэтому их отставание не влияет на загрузку DOM.
Проще говоря, если у вашего script есть фрагменты, которые сразу начнут выполняться (за пределами всех тел function(){}), а для доступа к элементам DOM он должен идти в конце страницы, чтобы DOM был построен и быть готовым к доступу к моменту запуска script.
Если вы обращаетесь к DOM только из вызовов функций (например, onload, onclick и т.д.), вы можете безопасно разместить script в самом разделе главы.
Я помещаю небольшую script в голову, которая делает все, что я хочу сделать до остальной части страницы, и загружает любые другие необходимые сценарии при загрузке или по мере необходимости после загрузки документа.