Прежде всего, я хочу поговорить о загрузке и выполнении JavaScript. Вообще говоря, в браузерах есть две основные функции для работы JavaScript: 1) Выполнение сразу после загрузки, 2) он заблокирует последующее содержание страницы (включая рендеринг страниц и другие ресурсы для загрузки) во время выполнения. Следовательно, если введены несколько файлов JS, то для браузера эти файлы JS загружаются последовательно и выполняются последовательно.
Поскольку JavaScript может управлять деревом DOM из документов HTML, браузеры, как правило, не загружают файлы CSS параллельно, как параллельные загрузки, потому что это вызвано спецификой файлов JS. Таким образом, если ваш JavaScript хочет управлять последующим элементом DOM, в основном браузер сообщит об ошибке, в которой говорится, что объект не может быть найден. Потому что, когда JavaScript выполняется, HTML позади заблокирован, а за деревом DOM нет узла DOM. Таким образом, программа сообщается как ошибка.
Традиционный путь
Итак, когда вы пишете следующий код в коде:
Кода -копия выглядит следующим образом:
<script type = "text/javascript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
По сути, тег <cript> в голове будет блокировать загрузку последующих ресурсов и генерации всей страницы. Я сделал особый пример, который вы можете взглянуть на: Пример 1. Примечание. В моем Alert.js есть только одно предложение: alert («Привет, мир»), что облегчает вам, как JavaScript блокирует вещи, стоящие за ним.
Итак, вы знаете, почему многие веб -сайты помещают JavaScript в конце веб -страницы, используя такие события, как window.onload или docmuemt.
Кроме того, поскольку большинству кода JavaScript не нужно ждать страниц, мы загружаем функции асинхронно. Так как же нам загружать асинхронно?
Document.Write Метод
Таким образом, вы можете подумать, что Document.Write () может решить проблему не блокировки. Конечно, вы подумаете, что после того, как можно выполнить тег. Это верно для кода JavaScript в том же теге сценария, но для всей страницы это все равно будет блокировать. Вот тестовый код:
Кода -копия выглядит следующим образом:
<script type = "text/javascript" ranguage = "javascript">
function loadjs (script_filename) {
document.write ('<' + 'script language = "javascript" type = "text/javascript"');
document.write ('src = "' + script_filename + '">');
document.write ('<'+'/script'+'>');
Alert ("LoadJs () exit ...");
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
LoadJs (Script);
Alert ("LoadJs () закончил!");
</script>
<script type = "text/javascript" ranguage = "javascript">
оповещение («Другой блок»);
</script>
Как вы думаете, что такое порядок оповещений? Вы можете попробовать это в разных браузерах. Вот тестовая страница, которую вы хотите закрыть: пример 2.
Отсрочка и асинхронные свойства сценария
Т.е. поддержал теги отсрочки с момента IE6, например:
Кода -копия выглядит следующим образом:
<script defer type = "text/javascript" src = "./ alert.js">
</script>
Для IE этот тег позволит IE загружать файлы JS параллельно и удерживать их выполнение до тех пор, пока вся загрузка DOM не будет завершена (domcontentload). Несколько отсрочков <Script> также будет работать в порядке, в котором они появляются при выполнении. Самое главное, что после того, как DEFE будет добавлен в <Script>, он не будет блокировать рендеринг последующего DOM. Однако, поскольку этот отсрочен используется только для IE, он обычно используется меньше.
Наш стандартный HTML5 также добавляет атрибут, который асинхронно загружает JavaScript: Async. Независимо от того, какое значение вы присваиваете ему, если он появляется, оно начинает загружать файл JS асинхронно. Тем не менее, асинхронная нагрузка будет иметь серьезную проблему, то есть она верно реализует «выполнение сразу после загрузки», поэтому, хотя она не блокирует рендеринг страницы, вы не можете контролировать порядок и время его выполнения. Вы можете взглянуть на этот пример, чтобы испытать его.
Браузеры, которые поддерживают асинхронную метку: Firefox 3.6+, Chrome 8.0+, Safari 5.0+, IE 10+, Opera не поддерживает его (отсюда), поэтому этот метод тоже не очень хорош. Потому что не все браузеры могут это сделать.
Динамически создавать DOM
Этот метод, вероятно, самый используемый.
Кода -копия выглядит следующим образом:
function loadjs (script_filename) {
var script = document.createElement ('script');
script.setattribute ('type', 'text/javascript');
script.setattribute ('src', script_filename);
script.setattribute ('id', 'coolshell_script_id');
script_id = document.getElementByid ('coolshell_script_id');
if (script_id) {
document.getElementsbytagname ('Head') [0] .RemoveChild (script_id);
}
document.getElementsbytagname ('head') [0] .appendchild (script);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
LoadJs (Script);
Этот метод почти стал стандартным асинхронным способом загрузки файлов JS. Для демонстрации этого метода, пожалуйста, см. Пример 3. Этот метод также играет с JSONP вещами, то есть я могу указать фоновый скрипт (например, PHP) для Script SRC, и этот PHP возвращает функцию JavaScript, параметр которого является строкой JSON, который возвращается, чтобы назвать нашу предопределенную функцию Javascript. Вы можете взглянуть на этот пример: T.JS (этот пример является небольшим примером асинхронного вызова Ajax, который я собирал на Weibo раньше)
Загрузите JS асинхронно по требованию
Приведенный выше пример метода DOM решает проблему асинхронной загрузки JavaScript, но не решает проблему, которую мы хотим, чтобы она запустила в то время, когда мы указали. Таким образом, нам просто нужно связать приведенный выше метод DOM с определенным событием.
например:
Привязано к windo.load Event - Пример 4
Вы должны сравнить различия в выполнении между примером 4 и примером 3. В обоих примерах я специально использовал JavaScript с подсветкой кода, чтобы увидеть выполнение скрипта с подсветкой кода и выполнением My Alert.js. Вы узнаете разницу)
Кода -копия выглядит следующим образом:
window.load = loadjs ("http://coolshell.cn/asyncjs/alert.js")
Привязан к конкретному событию - пример 5
Кода -копия выглядит следующим образом:
<p style = "cursor: pointer" onclick = "loadjs ()"> нажмите, чтобы загрузить alert.js </p>
Этот пример очень прост. Только когда вы нажимаете на элемент DOM, будет на самом деле загружать нашу alert.js.
Более
Тем не менее, привязка к конкретному событию, кажется, немного проходит, потому что реальная загрузка JS будет выполняться только при щелчке, что снова будет слишком медленным. Хорошо, здесь мы должны бросить свою окончательную проблему - мы хотим загрузить файл JS асинхронно в локальную область пользователя, но не выполнять его, только если мы хотим выполнить его.
Было бы здорово, если бы у нас был следующий метод:
Кода -копия выглядит следующим образом:
var script = document.createElement ("script");
script.noexecute = true;
script.src = "alert.js";
document.body.appendchild (script);
// мы можем сделать это позже
script.execute ();
К сожалению, это просто прекрасный сон. Сегодня наш JavaScript по -прежнему относительно примитивен, и эта «мечта JS» еще не была реализована.
Поэтому наши программисты могут использовать только взломать для этого.
Некоторые программисты используют нестандартный тип скрипта для кэша JavaScript. нравиться:
Кода -копия выглядит следующим образом:
<script type = cache/script src = "./ alert.js"> </script>
Поскольку «кэш/скрипт», эта вещь вообще не может быть проанализирована браузером, поэтому браузер не может выполнить alert.js как javascript, но он должен загрузить файл JS, так что это можно сделать. К сожалению, Webkit строго следует по стандартам HTML - для таких непризнанных вещей они напрямую удалят их и ничего не сделают. Итак, наша мечта снова была сломана.
Итак, нам нужно взломать это немного больше. Так же, как n играли изображения предварительной нагрузки много лет назад, мы можем использовать тег объекта (или тег iframe), поэтому у нас есть следующий код:
Кода -копия выглядит следующим образом:
Функция cachejs (script_filename) {
var cache = document.createElement ('Object');
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.height = 0;
document.body.appendchild (cache);
}
Затем мы называем эту функцию в конце. См. Пример: Пример 6
Нажмите Ctrl+дерьмо+I под Chrome, переключитесь на страницу сети, и вы можете увидеть, что Alert.js был загружен, но она не была выполнена. Затем мы используем метод примера 5, потому что сторона браузера имеет кэш, Alert.js больше не будет загружаться с сервера. Следовательно, скорость выполнения может быть гарантирована.
Вы должны быть знакомы с такой предварительной нагрузкой. Вы также можете использовать методы AJAX, такие как:
Кода -копия выглядит следующим образом:
var xhr = new xmlhttprequest ();
xhr.open ('get', 'new.js');
xhr.send ('');
Я не скажу больше и приведу примеры здесь. Вы можете попробовать сами.
Наконец, давайте упомянем два JS, один - ControlJS, а другой - Headjs, который специально используется для создания асинхронных файлов JavaScript.
Хорошо, это все контент. Я надеюсь, что вы сможете понять загрузку и выполнение JavaScript, а также связанные технологии после прочтения. В то же время я также надеюсь, что все эксперты фронт-энда дадут вам совет!