Как заказать <script>тегов против <style>тегов в HTML-разметке для достижения наилучших результатов - PullRequest
Новая
       17

Как заказать <script>тегов против <style>тегов в HTML-разметке для достижения наилучших результатов

10 голосов
/ 31 марта 2010

Я создаю свой сайт на http://royronalds.com, и пытаюсь выяснить, какой порядок элементов в <head> имеет наибольшее значение. Просто чтобы взять из того, что у меня есть, у меня есть:

  • <head>
  • <style> внешняя таблица стилей
  • <meta>
  • <title>
  • <link> в фавикон
  • <script> для jQuery
  • <script> основной javascript для сайта
  • <script> Google Analytics, асинхронный скрипт.
  • </head>

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

Ответы [ 5 ]

6 голосов
/ 31 марта 2010

Современные браузеры ждут с любым видом рендеринга, пока не будет извлечен весь раздел <head> (включая файлы, связанные с ним). Поэтому порядок не имеет значения для производительности . Для Javascript порядок файлов - это порядок выполнения. Для таблиц стилей порядок определяет приоритет (правило, которое было определено последним, имеет приоритет, если все остальные вещи равны).

Если вы хотите оптимизировать производительность клиента, настоятельно рекомендуется переместить ваши Javascript-включения в самый конец <body> элемента , вместо того, чтобы помещать их в <head> вообще. Есть и другие соображения: Список оптимизаций Yahoo стоит того, чтобы его прочитать. У Google есть хороший совет .

6 голосов
/ 31 марта 2010

Одна вещь, которая может иметь большой эффект, - это перемещение тегов <script> вниз страницы, если они не важны для содержимого.

Например, я бы переместил тег google analytics <script>, чтобы он был последним перед тегом </body> на каждой странице. Теги скрипта «блокируют контент», поэтому браузер не продолжит рендеринг страницы, пока скрипт не будет загружен и выполнен. Ваши основные файлы javascript и JQuery, вероятно, не могут быть перемещены так легко, в зависимости от того, как вы их используете, но аналитика наверняка может быть внизу.

Ознакомьтесь с рекомендациями YSlow , чтобы узнать больше методов оптимизации.

1 голос
/ 31 марта 2010

кстати попробуйте антиспамить свой адрес электронной почты ...

е: 

<SCRIPT TYPE="text/javascript">
document.write('<A HREF=' + '"mai' + 'lto:' + 'example@' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>')
</SCRIPT>

У меня это работает ...

0 голосов
/ 17 августа 2010

Если вы используете Wordpress, то вы можете легко использовать этот плагин: http://wordpress.org/extend/plugins/performance-optimization-order-styles-and-javascript/ и воспользоваться этим.

0 голосов
/ 31 марта 2010

Также учтите тот факт, что браузеры остановят выполнение JavaScript при возникновении ошибки.

В связи с этим очень важно, чтобы ваш javascript работал во всех браузерах, иначе вы рискуете, чтобы ваш код Google Analytics не выполнял и не собирал статистику ...

Обычно я размещаю свою Google Analytics над собственным кодом, чтобы он запускался первым, и если в редких случаях мой код ломается или вызывает ошибки JS, я все равно могу получить информацию об отслеживании.

мой заказ будет: 

<head>
<meta> content encoding
<title>
<link> favicon
<style> external/third-party stylesheet
<style> site stylesheet
</head>
<body>
...
<script> google analytics
<script> jQuery
<script> jQuery plugins
<script> site javascript
</body>
...