Можно сказать, что производительность JavaScript в браузере является наиболее важной проблемой удобства использования, с которой должны столкнуться фронтальные разработчики.
Среди правил Yahoo's YSLOW23 один из них - положить JS внизу. Причина в том, что, на самом деле, большинство браузеров используют один процесс для обработки нескольких задач, таких как пользовательский интерфейс и обновление JavaScript, и одновременно выполняется только одна задача. Как долго JavaScript запускается, сколько времени потребуется, чтобы подождать, прежде чем браузер не станет бездействием, чтобы ответить на взаимодействие с пользователем.
С основной точки зрения это означает, что появление тега <croppling> заставляет всю страницу ждать из -за анализа сценариев и запуска. Независимо от того, подставлен ли фактический код JavaScript или содержится во внешнем файле, необходимо остановить процесс загрузки страницы и анализа и ожидать, пока сценарий завершит эту обработку, прежде чем продолжить. Это неотъемлемая часть жизненного цикла страницы, потому что сценарий может изменить содержание страницы во время выполнения. Типичным примером является функция document.write (), например:
Кода -копия выглядит следующим образом:
<html>
<голова>
<title> Пример скрипта </title>
</head>
<тело>
<p>
<script type = "text/javascript">
document.write («Дата - + (новый дата ()). todatestring ());
</script>
</p>
</body>
</html>
Когда браузер встречается с тегом <script>, как на странице HTML выше, невозможно предсказать, добавляет ли JavaScript контент к тегу <p>. Поэтому браузер останавливается, запускает этот код JavaScript, а затем продолжает анализировать и переводить страницу. То же самое происходит при загрузке JavaScript с использованием свойства SRC. Браузер должен сначала загрузить код для внешнего файла, который занимает некоторое время, а затем разрабатывать и запустить этот код. Во время этого процесса анализ страниц и взаимодействие с пользователем полностью заблокированы.
Поскольку скрипт блокирует процесс загрузки других ресурсов страниц, рекомендуемый метод: поместите все теги <script> как можно ближе к нижней части тега <body>, чтобы минимизировать влияние на всю загрузку страницы. Например:
Кода -копия выглядит следующим образом:
<html>
<голова>
<title> Пример скрипта </title>
<link rel = "styleSheet" type = "text/css" href = "styles.css">
</head>
<тело>
<p> Привет, мир! </p>
<-Пример рекомендуемого позиционирования сценария->
<script type = "text/javascript" src = "file1.js"> </script>
<script type = "text/javascript" src = "file2.js"> </script>
<script type = "text/javascript" src = "file3.js"> </script>
</body>
</html>
Этот код показывает, где рекомендуемый тег <Script> находится в файле HTML. Хотя загрузки сценариев заблокированы друг с другом, страница была загружена и отображена перед пользователем, а скорость входа на страницу не будет выглядеть слишком медленной. Это то, что упоминалось выше, чтобы положить JS на дно.
Кроме того, Yahoo! Создает «федеральную ручку» для его библиотеки «Yahoo! Пользовательский интерфейс, Yui», которая реализована через их «Сеть доставки контента» (CDN). Любой веб -сайт может использовать URL «Федеральный дескриптор», чтобы указать, какие файлы включены в пакет файлов YUI. Например, следующий URL содержит два файла:
Кода -копия выглядит следующим образом:
<script type = "text/javascript" src = "http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"> </script>
Этот URL-адрес вызывает файлы yahoo-min.js и event-min.js в версии 2.7.0. Эти файлы представляют собой два отдельных файла на сервере, но когда сервер получает этот запрос на URL, два файла будут объединены вместе и возвращены клиенту. Таким образом, два тега <Script> больше не нужны (один файл загружается для каждого тега), и один тег <Script> может загружать их. Это лучший способ включить несколько внешних JavaScript в HTML -страницы.
Нобликовающие сценарии
Выше выше - лучший способ загрузить несколько сценариев JavaScript в начальном состоянии страницы. JavaScript имеет тенденцию блокировать определенные процессы обработки браузеров, такие как HTTP -запросы и обновления интерфейса, которые являются наиболее значимыми проблемами производительности, с которыми сталкиваются разработчики. Хранение файлов JavaScript коротко и ограничение количества HTTP -запросов - это лишь первый шаг к созданию адаптивного веб -приложения.
Но такие как большие веб -страницы с большим количеством кода JS, хранение исходного кода - не всегда лучший выбор. Таким образом, не блокирующие сценарии возникли, что нам нужно постепенно добавить JavaScript на страницу, которая в некоторой степени не заблокирует браузер.
Ключом к не блокирующим сценариям является загрузка исходного кода JavaScript после загрузки страницы, что означает, что загрузка кода начинается после выпуска события загрузки окна.
Связанные объяснения:
Событие окна загрузки будет запущено только один раз и только один раз после загрузки страницы.
window.onload = function () {} Должен ждать, пока все контент на веб -странице загрузится (включая все связанные файлы элементов, таких как изображения) для выполнения, то есть JavaScript может получить доступ к любому элементу на странице в настоящее время.
Следующие методы:
Отложенные сценарии отложенных сценариев
HTML4 определяет расширенный атрибут для тега <Script>: defer.
Этот атрибут отсрочки указывает, что сценарий, содержащийся в элементе, не намерен изменять DOM, поэтому код может быть выполнен позже. Атрибут Defer поддерживается только Internet Explorer 4+ и Firefox 3.5+, и он не является идеальным решением поперечного браузера. В других браузерах атрибут DEFE будет проигнорирован. Следовательно, тег <Script> будет обрабатываться обычным способом по умолчанию, что означает, что он вызовет блокировку. Если это поддерживается различными основными браузерами, это все еще является эффективным решением.
Кода -копия выглядит следующим образом:
<script type = "text/javascript" src = "file1.js" defer> </script>
Тег <cript> с атрибутом Defer может быть размещен в любом месте в документе, и он запускает загрузку, когда он анализируется до тех пор, пока DOM не загрузится (до того, как вызовет рукоятка события Onload). Когда загружается файл DEFE Javascript, он не блокирует другие процессы обработки в браузере, поэтому эти файлы можно загрузить параллельно с другими ресурсами.
Вы можете использовать следующий код, чтобы проверить, поддерживает ли браузер атрибут DEFE:
Кода -копия выглядит следующим образом:
<html>
<голова>
<title> Пример отложения скрипта </title>
</head>
<тело>
<Script DEFER> ALERT ("DEFER"); </script>
<Script> alert ("script"); </script>
<script> window.onload = function () {alert ("load");}; </script>
</body>
</html>
Если браузер не поддерживает DEFER, порядок диалогового окна всплывающего окна «DEFE», «Script» и «Load».
Если браузер поддерживает DEFER, порядок диалоговых окнов всплывающего окна-«Скрипт», «Загрузить», «Отдел».
Динамические элементы сценария
DOM позволяет нам динамически создавать практически все содержание документов HTML с использованием JavaScript, и новый элемент <script> может быть создан очень легко через стандартный DOM:
Кода -копия выглядит следующим образом:
1 var script = document.createElement ("script");
2 script.type = "text/javascript";
3 script.src = "file1.js";
4 Document.body.appendchild (Script);
Новый элемент <Script> загружает исходный файл File1.js. Загрузите этот файл сразу после добавления элемента на страницу. Ключевой момент этой технологии заключается в том, что независимо от того, с чего начинается загрузка, загрузка и запуск файла не заблокируют другие страницы.
Когда файл загружается с использованием узла динамического скрипта, возвращаемый код обычно выполняется немедленно (кроме Firefox и Opera, которые будут ждать всех предыдущих узлов динамических сценариев).
В большинстве случаев мы надеемся вызвать функцию для реализации динамической загрузки файлов JavaScript. Следующая инкапсуляция функции реализует стандартные реализации и реализации IE:
Кода -копия выглядит следующим образом:
Функция LoadScript (url, обратный вызов) {
var script = document.createElement ("script");
script.type = "text/javascript";
if (script.readystate) {// т.е.
script.onreadystatechange = function () {
if (script.readystate == "загружен" || script.readystate == "overse") {
script.onreadystatechange = null;
перезвонить();
}
};
}
else {// другие
script.onload = function () {callback ();
};
}
script.src = url;
document.getElementsbytagname ("head") [0] .appendchild (script);
}
loadscript ("file1.js", function () {// call
Alert («Файл загружен!»);
});
Эта функция принимает два параметра: URL -адрес файла JavaScript и функцию обратного вызова, которая запускается при завершении приема JavaScript. Проверка атрибутов используется для определения того, какое событие для мониторинга. Последний шаг - атрибут SRC и добавить файл JavaScript в голову.
Динамическая загрузка скрипта является наиболее часто используемым шаблоном в неблокирующих загрузках JavaScript, потому что он может быть междорным и легко использовать.
Xmlhttprequest script inception xhr сценарий инъекция скрипта
Еще один способ получить сценарии не блокирующим способ-вводить сценарии в страницу, используя объект xmlhttprequest (xhr). Этот метод сначала создает объект XHR, затем загружает файл JavaScript, а затем вводит код JavaScript в страницу динамическим элементом <cropript>. Посмотрите на демонстрацию:
Кода -копия выглядит следующим образом:
var xhr = new xmlhttprequest ();
xhr.open ("get", "file1.js", true);
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {// Проверить код состояния http
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responsetext;
document.body.appendchild (script);
}
}
};
xhr.send (null);
Этот код отправляет файл запрос на сервер для получения file1.js. Обработчик событий OnreadyStateChange проверяет, является ли readystate 4, а затем проверяет, является ли код состояния HTTP действительным (200 означает подтверждение того, что запрос клиента был успешным, 2xx означает допустимый ответ, а 304 означает кэшированный ответ). Если получен допустимый ответ, создается новый элемент <script>, и его текстовый атрибут устанавливается на строку ответа, полученная с сервера. Это на самом деле создаст элемент <croppl> с встроенным кодом, и после того, как в документ будет добавлен новый элемент <script>, код будет выполнен и готов к использованию.
Преимущество этого метода заключается в том, что он имеет хорошую совместимость, и вы можете загрузить код JavaScript, который не выполняется немедленно. Поскольку код возвращается за пределы тега <cropript>, он не будет выполняться автоматически после загрузки, что позволяет вам отложить выполнение.
Определение этого метода подлежит гомологичным ограничениям браузера. Файлы JavaScript должны быть размещены в том же домене, что и на странице, и не могут быть загружены из CDN (сеть доставки контента). По этой причине большие веб -страницы обычно не используют технологию инъекции сценария XHR.
Рекомендуемая картина Noblocking Рекомендуется безблокировать шаблон
Рекомендуемый метод загрузки большого количества JavaScript на страницу разделен на два шага:
Первый шаг включает в себя код, необходимый для динамической загрузки JavaScript, а затем загрузить деталь, кроме JavaScript, необходимого для инициализации страницы. Эта часть кода максимально невелика и может включать только функцию LoadScript (). Он загружается и работает очень быстро и не вызовет особого вмешательства на страницу.
Второй шаг - использовать его для загрузки остальной части JavaScript после готовности начального кода.
Например:
Кода -копия выглядит следующим образом:
1 <script type = "text/javascript" src = "loader.js">
2 </script> <script type = "text/javascript">
3 LoadScript ("rest.js", function () {
4 Application.Init ();
5});
6
7 </script>
Поместите этот код перед тегом Body Close </body>. Преимущество этого заключается в том, что во -первых, это гарантирует, что JavaScript работает, не затрагивая другие части других страниц для отображения. Во -вторых, когда вторая часть файла JavaScript загружается, все необходимые DOMS для приложения были созданы и готовы к получению доступ, избегая использования дополнительной обработки событий (например, Window.onload), чтобы узнать, готова ли страница.
Другой вариант заключается в том, чтобы встроить функцию LoadScript () непосредственно в страницу, которая может уменьшить накладные расходы HTTP -запроса. Например:
Кода -копия выглядит следующим образом:
1 <script type = "text/javascript">
Функция LoadScript (url, обратный вызов) {
var script = document.createElement ("script");
script.type = "text/javascript";
if (script.readystate) {// ie script.onreadystatechange = function () {
if (script.readystate == "загружен" || script.readystate == "overse") {
script.onreadystatechange = null;
перезвонить();
}
};
} else {// другие
script.onload = function () {
перезвонить();
};
}
script.src = url;
document.getElementsbytagname ("head") [0] .appendchild (script);
}
loadscript ("rest.js", function () {
Application.init ();
});
</script>
После загрузки кода инициализации страницы вы также можете использовать функцию LoadScript () для загрузки дополнительных функциональных функций, требуемых страницей.
Представляя общий инструмент, Райан Гроув из Yahoo! Поиск создал библиотеку Lazyload (см.: Http://github.com/rgrove/lazyload/). Lazyload - это мощная функция LoadScript (). Lazyload имеет только около 1,5 КБ после масштабирования. Примеры использования следующие:
Кода -копия выглядит следующим образом:
<script type = "text/javascript" src = "lazyload-min.js"> </script>
<script type = "text/javascript">
Lazyload.js ("the-rest.js", function () {
Application.init ();
});
</script>
Краткое содержание
1. Поместите все теги <script> в нижней части страницы, недалеко от The Close Tag </body>. Этот метод гарантирует, что страница проанализирована до запуска сценария.
2. упаковать сценарии в группах. Чем меньше тегов <Script> на странице, тем быстрее страница загрузится и реагирует быстрее. Это верно как для внешних файлов сценариев, так и для встроенного кода.
3. Есть несколько способов загрузить JavaScript, используя не блокирующие методы:
1). Добавить атрибут DEFE в тег <Script>
2). Динамически создать элемент <script>, используйте его для загрузки и выполнения кода
3). Используйте объект XHR, чтобы загрузить код и ввести его в страницу
Благодаря вышеупомянутой стратегии фактическая производительность сети, которые используют код JavaScript, могут быть значительно улучшены.
Справочник "High Performance JavaScript".