Публикация

Атрибуты defer и async у тэга script

Когда мы подключаем внешний javascript файл с использованием тэга script, мы используем следующий синтаксис:

<script src="path/to/script.js"></script>

Как многим известно, если мы подключаем внешний файл до основного HTML контента, скрипт будет подгружаться синхронно. Это означет, что мы не увидим основное содержимое страницы до полной загрузки скрипта. Иногда это может существенно повлиять на скорость отображения содержимого. В этой связи хорошей практикой считается подгружать внешниие скрипты непосредственно перед закрывающим тэгом </body>.

<body>
  <p>Основное содержимое</p>
  <script src="path/to/script.js"></script>
</body>

Атрибуты defer и async позволяют подгружать скрипты асинхронно, вне зависимости от того, в какой части страницы мы их расположим:

<script async src="path/to/big-script.js"></script>
<p>Привет, мир!!</p>

Код сверху выведет на экран строку "Привет, мир!!" даже в том случае, если скрипт из файла "path/to/big-script.js" не будет загружен. Скрипт отработает как только полностью загрузится.

Атрибуты defer и async работают примерно одинаково, но есть 2 существенных отличия:

  1. Порядок подключения скриптов с defer будет сохранён.
  2. Скрипт с defer будет выполнен только после того, как весь HTML будет загружен. 
    Скрипт с атрибутом async отработает как только загрузится, даже в том случае, если HTML ещё не полностью загружен. Скрипт с атрибутом defer будет ожидать полной загрузки HTML кода страницы.

Директива "use strict"

Директива "use strict" включает строгий режим, который накладывает определённые ограничения на javascript. Данные ограничения сделаны для того, чтобы отгородить программиста от старых особенностей языка, которые потенциально могут привести к ошибкам.

Директива "use strict" должна быть указана до кода (в самом начале файла), или в самом начале функции

Чтобы включить строгий режим, необходимо в начале скрипта (или функции) указать строку "use strict":

"use strict";

var helloWorld = "Hello, world!";

или

(function(){
  "use strict";
  
  var helloWorld = "Hello, world!";
});
07.01.2016 15:32 в Программирование
Автор: andymarrel 894 0
Фотография пользователя andymarrel

andymarrel

Проектирование и создание веб приложений - это то, чем я занимаюсь. Если есть вопросы, комментарии или пожелания - вот мой электронный адрес: andrei.troskoff@gmail.com

Комментарии (0)