Я работаю в фронтальной разработке уже более года, и у меня все еще есть некоторое представление о фронт-конце. Сегодня я поделюсь с вами.
Различные мощные инструменты необходимы для фронтальной разработки. Например, я привык использовать браузер Google и тяжелое оружие Fiddller.
1: оригинальная ситуация
Во -первых, давайте посмотрим на следующий код:
Кода -копия выглядит следующим образом:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" enherits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "styleSheet" type = "text/css"/>
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</head>
<тело>
<img src = "1.jpg" />
</body>
</html>
Предполагается, что 90% программистов будут помещать файлы JS в голову, но вы когда -нибудь углубились в это? Многие браузеры будут использовать один поток для «Обновление интерфейса интерфейса» и «Обработка скриптов JS».
То есть, когда механизм выполнения встречается с «<cript>», загрузка и рендеринг страницы должны ждать выполнения <Script>. Тогда для пользователя грустно, глядя на заблокированную страницу,
В настоящее время пользователь, вероятно, выключит его для вас.
Из диаграммы водопада выше мы можем увидеть две точки:
Первый:
Три файла JS загружаются параллельно, но, согласно моей теории выше, JS должен выполняться один за другим. Однако в IE8 Firefox 3.5 и Chrome 2 оба реализуют параллельные загрузки JS.
Это довольно хорошо, но все равно будет препятствовать загрузке некоторых других ресурсов, таких как картинки.
второй:
Загрузка изображения 1.JPG запускается после завершения выполнения JS, что также проверяет ситуацию, упомянутую выше, и предотвращает загрузку изображения.
Два: первым шагом является оптимизация
Поскольку JS предотвращает рендеринг пользовательского интерфейса, мы можем рассмотреть возможность размещения JS перед </body>, чтобы HTML до <Script> можно было отлично отображаться, не позволяя пользователям видеть пустую страницу.
И огорченная ситуация, естественно, увеличивает дружбу.
Кода -копия выглядит следующим образом:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" enherits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "styleSheet" type = "text/css"/>
</head>
<тело>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</body>
</html>
На рисунке ниже также показано, что 1.JPG и три JS загружаются и выполняются почти параллельно. Время сокращается с «469 мс+» выше до «326 мс».
Три: второй этап оптимизации
Глядя на «диаграмму водопада» выше, я полагаю, что каждый также может увидеть, что три файла JS сделали три запроса Get ». Все знают, что запросы GET должны иметь HTTP -заголовки.
Таким образом, это требует времени, поэтому решение, которое мы используем, естественно, чтобы уменьшить запросы на получение получения. Обычно есть два варианта.
Во -первых: слияние файлов JS, такие как объединение вышеуказанных «hello.js» и «World.js», объединены.
Второе: используйте сторонние инструменты, такие как Miniify в PHP.
Что касается второго метода, Taobao используется довольно много. Взгляните на один из сценариев и применяет три файла JS. Изменить с 3 получить запросы на 1.
Четвертое: третий шаг оптимизации
Независимо от того, размещает ли он файл JS в конце стопы или объединяет три в один, его сущность - «режим блокировки», что означает блокировка браузера. Когда веб -страница становится все более и более сложной, существует все больше и больше файлов JS, или
Что делает нас головной болью, в настоящее время мы защищаем «режим без блокировки» для загрузки сценариев JS, то есть все страницы представлены, а затем добавляется JS, что соответствует триггеру события Window.Onload.
Добавление JS-это так называемое «без блокировки», но одна вещь, на которую нужно обратить внимание, это то, являются ли наши требования к JS в строгом порядке.
Во -первых, нет требования заказа. Например, если у меня нет требований заказа для «hello.js» и «World.js», то мы можем использовать jQuery для динамического добавления его.
Кода -копия выглядит следующим образом:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" enherits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "styleSheet" type = "text/css"/>
</head>
<тело>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script type = "text/javascript">
window.onload = function () {
$ ("#head"). Append ("<script src = 'js/hello.js' type = 'text/javascript'> <// script>")
$ ("#head"). Append ("<script src = 'js/world.js' type = 'text/javascript'> <// script>");
}
</script>
</body>
</html>
Как видно из фигуры, на синей линии появляются «Hello.js» и «World.js», что означает, что эти два Js запускаются для загрузки после завершения Domcontentload, чтобы страница не была заблокирована.
ждать.
Во -вторых: есть требования заказа
Почему это должно быть необходимо иметь заказ? Для динамически добавленного файла «два JS» выше, в серии IE вы не можете гарантировать, что hello.js будет выполнен до World.js.
Он выполнит только код в порядке, возвращаемом стороной сервера.
Кода -копия выглядит следующим образом:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" enherits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<тело>
<img src = "1.jpg" />
<script type = "text/javascript">
Функция 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;
перезвонить();
}
}
} еще {
// не-Ий
script.onload = function () {
перезвонить();
}
}
script.src = url;
document.getElementbyId ("head"). AppendChild (Script);
}
// Первый шаг - загрузить библиотеку классов JQUERY
LoadScript ("jQuery/jQuery-1.4.1.js", function () {
// второй шаг - загрузить hello.js
LoadScript ("js/hello.js", function () {
// третий шаг - загрузить World.js
LoadScript ("js/world.js", function () {
});
});
});
</script>
</body>
</html>
Как вы также можете видеть, время, необходимое для полной загрузки страницы, на самом деле составляет всего около 310 мс, что значительно улучшает загрузку и дружелюбный внешний вид веб -страницы.
Вы также можете проверить tencent.com, что он делает.
Разве это не очень полезно? Я потратил некоторое время на эти исследования и тесты здесь. Надеюсь, вы можете увидеть это в своем сердце. В конце концов, это также решение компании "Mahua Vine". Пожалуйста, обратитесь к этому.