Статьи

Head.js — это круто!

Сентябрь 13, 2018

Я написал в твиттере несколько раз о head.js и о том, насколько мне это нравится, но я подумал, что мне тоже нужно написать в блоге, чтобы немного рассказать об этом .

Head.js делает много умных вещей, но часть, которая меня особенно интересует, это загрузка скриптов. Если вы посещаете сайт head.js, есть хороший пример использования сайта apple.com, чтобы показать, как загрузка скриптов блокирует последующие запросы. Из-за этого считается лучшей практикой размещать теги <script src = «xyz»> </ script> внизу страницы, чтобы другие ресурсы загружались до того, как начнутся блокирующие запросы javascript. Другой популярный метод — объединение нескольких файлов Javascript в один файл для повышения производительности. Согласно сайту head.js, это заблуждение. Вот цитата:

Существует распространенное заблуждение, что один комбинированный скрипт работает лучше всего. Неправильно:

  • Последние браузеры и Head JS могут загружать скрипты параллельно. загрузка 3-х частей параллельно, а не как один кусок, обычно быстрее.
  • если изменяется отдельный файл, меняется вся комбинация, и вы теряете преимущества кэширования. Лучше объединять только стабильные файлы, которые не часто меняются.
  • Многие популярные библиотеки размещены на CDN. Вы должны воспользоваться этим, вместо того, чтобы принимать себя.
  • iPhone 3.x не может кэшировать файлы размером более 15 КБ, а в iPhone 4 ограничение составляет 25 КБ. И это размер до gzipping. если вы заботитесь об iPhone, вы должны соблюдать эти ограничения.

В Head JS количество файлов не так критично, как в SCRIPT SRC, поскольку рендеринг страниц не блокируется. Объединение скриптов является важным методом оптимизации, но вы можете зайти слишком далеко.

http://headjs.com/#theory

Это все замечательные моменты!

Итак, как вы используете это?

Рассмотрим этот код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prototype</title>
  <link rel="stylesheet" href="assets/css/core.css">
  <!--[if lt IE 9]>
  <script type="text/javascript" src="js/html5shiv.js"></script>
  <![endif]-->
</head>
<body>

<header class="row">
  An Awesome Website
</header>
  
<section id="content">
  <article>#my.view.shows.here#</article>
</section>

<!-- load libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- load resources -->
<script src="js/global.js"></script>
<!--- do funky stuff - must go after jQuery library loads --->
<script>
jQuery(function($){
  // make header pulsate 'coz we kool dawg
  $('header').effect("pulsate", { times:3 }, 2000);
});
</script>

</body>
</html>

Итак, это довольно стандартные вещи, которые вы бы имели в обычном файле макета (вы же используете MVC framework, не так ли?). Одна вещь, на которую я укажу, это то, что я не извлекаю html5shiv из http://html5shiv.googlecode.com/svn/trunk/html5.js. Зачем? Ну, есть отличная статья под названием «html5shiv и обслуживание контента из репозиториев кода»  о том, почему это плохо, но вкратце:

  • Это не обслуживается с использованием сжатия HTTP
  • Это не кешируется
  • Это не самая последняя версия
  • Вы ссылаетесь на хранилище исходного кода

Во всяком случае, это было в стороне (Ха — что за остроумный каламбур!). Возвращаясь к цели этого поста …

Одна проблема, с которой я помещаю все свои JavaScript-компоненты в нижней части страницы, заключается в том, что у меня не может быть специального JavaScript-кода в моих представлениях, для которого требуется одна из этих библиотек, поскольку эта библиотека не загружена в документе, отправленном в браузер. (вид + макет вместе взятые). Например, если мое представление содержит что-то вроде:

<script>
jQuery(function($){
  $('#someelement').text('jQuery loaded and ready to rock!');
});
</script>

Я получил бы хорошую ошибку JavaScript, сообщающую, что jQuery не определен. Из-за этого я часто в конечном итоге загружаю jQuery и т. Д. В голову.

Если я переписываю вышеупомянутую HTML-страницу, используя head.js, я получаю это:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prototype</title>
  <link rel="stylesheet" href="assets/css/core.css">
  <script type="text/javascript" src="js/head.js"></script>
</head>
<body>

<header class="row">
  An Awesome Website
</header>
  
<section id="content">
  <article>Really interesting stuff</article>
</section>

<!--- do something --->
<script>
head(function(){
  // make header pulsate 'coz we kool dawg
  $('header').effect("pulsate", { times:3 }, 2000);
});
</script>

<!-- load libraries -->
<script>
head.js(
  "//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js",
  "//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js",
  "js/global.js"
);
</script>

</body>
</html>

Обратите внимание, что html5shiv ушел — Head.js делает это для меня. Я также получаю head.js для параллельной загрузки файлов, но выполняю их последовательно, используя метод head.js (). Обратите внимание, что я сказал параллельно — теперь они больше не блокируются.

Другая сумасшедшая вещь заключается в том, что у меня может быть JavaScript-код, который зависит от библиотеки на странице, прежде чем загружать библиотеку. Это достигается с помощью синтаксиса head (function () {}) вместо jQuery (function () {}) синтаксис. Какой руководитель (функция () {}) делает это убедиться , что код внутри блока не выполняется , пока не будут загружены все библиотеки. Фактически вы можете даже заставить head.js выполнять разные блоки кода в зависимости от того, какая библиотека загружена (см. Раздел «Сценарии маркировки» в документации).

Во всяком случае, я надеюсь, что это было интересно. Head.js теперь является неотъемлемой частью каждого проекта, над которым я работаю.

 

 

 

 

43
Share: