С точки зрения скорости рендеринга, где лучше всего разместить <script>...</script> и <style>...</style>? В пределах <head>...</head>, или в конце <body>...</body> или сразу после него? И есть ли какие-либо другие теги, которые можно поставить за пределы своего обычного положения в <head>...</head>, например <base>?Позиция css и скриптов
<style> и <link rel="stylesheet"> должны быть указаны в <head>. Если это не так, страница может быть визуализирована без стилей, а затем, когда стили загружаются, резко меняются.
<script> s, с другой стороны, может быть где угодно. Лично я предпочитаю, чтобы внешние файлы JS загружались в <head> (как правило, те, которые определяют функции), а скрипты, которые влияют на страницу, идут непосредственно перед </body>, чтобы обеспечить доступность всех элементов перед запуском.
У меня есть новый сценарий, который я написал, что позволяет мне размещать <script> элементов в любом месте, но их код отложен, поэтому они запускаются так, как если бы они были размещены непосредственно перед </body>. Это позволяет мне помещать скрипты близко к тем участкам страницы, на которые они влияют, не оказывая негативного влияния на загрузку страницы.
Как сказал Колинк, стили CSS должны войти в раздел <head>, чтобы страница никогда не отображалась без применяемых стилей.
Вы получите максимальную скорость рендеринга страницы, если <scripts> находятся в самом конце тела, прямо перед тегом <body>. Это связано с тем, что страница может быть отображена до того, как скрипты будут проанализированы или запущены, а не после их анализа и запуска.
<scripts>, которые не должны работать в определенном порядке также могут быть помечены как defer или async в современных браузерах, и это вызовет их загрузку и синтаксический анализ, чтобы быть десериализации с нагрузкой и отображение HTML.
Это возможно для большинства скриптов (например, для тех, которые реагируют на пользовательские события (движение мыши, клики, ключи и т. Д.)), Но это невозможно для всего. Например, любые скрипты, которые используются кодом, который делает document.write() непосредственно в содержимое страницы должно быть загружено перед кодом, который их вызывает, поэтому он обычно включается в раздел <head>, поэтому он доступен, когда страница анализируется и выкладывается.
Пожалуйста, воздержитесь от использования [html5] [ css3] для вопросов, которые не имеют никакого отношения к HTML5 или CSS3. – BoltClock
@BoltClock Когда я задаю эти вопросы, я понятия не имею, есть ли разница в спецификации среди html5 и ранее, или css3 и раньше. что ответ будет о html5 и css3. Есть ли проблемы с моими тегами? – sawa
Тег 'html' охватывает все версии' html', в том числе 'html5'. Вы должны только пометить 'html5', если ваш вопрос * специально * о HTML5. То же самое для CSS/CSS3. –