renovations

2015-02-25 14:42:09 +03:00 · 2015-02-25 14:42:09 +03:00 · 11f2d7352f
commit 11f2d7352f
parent 3a0d1ff2fe
82 changed files with 437 additions and 321 deletions
--- a/archive/4-script-place-optimize/article.md
+++ b/archive/4-script-place-optimize/article.md
@ -0,0 +1,63 @@
+# Оптимизация скриптов: dom, async, defer [в работе]
+
+Скрипт может быть размещен в любом месте HTML. 
+
+Здесь мы разберём то, как его местоположение влияет на скорость загрузки страницы.
+
+[cut]
+
+
+## Перемещение скрипта в HEAD
+
+Если нужно, чтобы скрипт обязательно выполнился до того, как страничка будет отображена, то самое подходящее место -- это `HEAD`:
+
+```html
+<!--+ run height=100 -->
+<html>
+  <head>
+    *!*
+    <script>
+      function count_rabbits() {
+        for (var i=1; i<=3; i++) {
+          alert("Кролик номер " + i);
+        }
+      }
+    </script>
+    */!*
+  </head>
+
+  <body>
+  
+    <h3>Нажмите на кнопку, чтобы начать</h3>
+
+    <input type="button" onclick="count_rabbits()" value="Считать кроликов!"/>
+
+  </body>
+
+</html>
+```
+
+## Скрипты в конце BODY   
+
+Скрипт может быть и в конце документа, например перед закрывающим `</body>`. В таком случае он выполняется *после* отрисовки страницы. 
+
+[compare]
+ Это хорошо, т.к. пользователь не должен ждать, пока загрузятся скрипты. Он увидит страницу быстро.
+- Страница будет лишь частично работать, т.к. для инициализации интерфейсов нужен JS. Нужно это учесть, например, закрасить серым нерабочие интерфейсы, показать на них индикатор загрузки.
+[/compare]
+
+[smart header="Рендеринг и CSS"]
+По стандарту, CSS-стили могут располагаться только внутри тега `HEAD`, и они тоже блокируют отображение. 
+
+В принципе, их можно для оптимизации перенести вниз документа -- всё будет работать. Но пока они не загрузятся, страница будет показываться без стилей, это обычно непрезентабельно. Поэтому так не делают.
+[/smart]
+
+## Итоги
+
+Скрипты могут быть внутренними и подключаться напрямую в тег `SCRIPT` и внешними, в виде отдельных файлов, подключаемых с помощью атрибута `src="path/to/file.js"` тега `SCRIPT`
+
+В любом случае, отрисовка HTML-страницы блокируется, пока скрипт не будет скачан и исполнен. Большинство браузеров умеют качать несколько скриптов параллельно, что несколько убыстряет процесс, но представьте -- у посетителя медленный канал (смотрит с телефона). Он открывает сайт. Если в `HEAD` стоит большой внешний скрипт, то пока он не загрузится -- страница не отобразится.
+
+Поэтому, чтобы убыстрить процесс открытия, скрипты добавляют в конец `BODY` или ставят им атрибуты `async` или `defer`. В таком случае страница будет показана до загрузки скрипта. 
+
+Но при этом посетитель может тут же куда-нибудь нажать, а скрипты для этой кнопки ещё не загрузились. Эту особенность взаимодействия нужно предусмотреть в интерфейсе (это вполне возможно), и все будет здорово.