Skip to content

Commit a592e89

Browse files
iliakaniliakan
committed
minor fixes
1 parent 6bf5977 commit a592e89

File tree

20 files changed

+184
-96
lines changed

20 files changed

+184
-96
lines changed

‎1-js/2-first-steps/2-external-script/3-async-defer-inline-first/solution.md

-17
This file was deleted.

‎1-js/2-first-steps/2-external-script/3-async-defer-inline-first/task.md

-17
This file was deleted.

‎1-js/2-first-steps/2-external-script/article.md

+77-14
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего [кеша](http://ru.wikipedia.org/wiki/%D0%9A%D1%8D%D1%88).
3333

3434
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
35-
3635
[/smart]
3736

3837

@@ -61,7 +60,9 @@
6160

6261
## Асинхронные скрипты: defer/async
6362

64-
Обычно тег `<script>` блокирует отображение страницы.
63+
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
64+
65+
Если браузер видит тег `<script>`, то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.
6566

6667
Например, в примере ниже -- пока все кролики не будут посчитаны -- нижний `<p>` не будет показан:
6768

@@ -93,37 +94,60 @@
9394
</html>
9495
```
9596

96-
Такое поведение называют "синхронным". Как правило, оно вполне нормально, но есть один нюанс.
97+
Такое поведение называют "синхронным". Как правило, оно вполне нормально, но есть важное следствие.
98+
99+
**Если скрипт -- внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.**
100+
101+
То есть, в таком документе, пока не загрузится и не выполнится `big.js`, содержимое `<body>` будет скрыто:
102+
103+
```html
104+
<html>
105+
<head>
106+
*!*
107+
<script src="big.jpg"></script>
108+
*/!*
109+
</head>
110+
<body>
111+
Этот текст не будет показан, пока браузер не выполнит big.js.
112+
</body>
113+
</html>
114+
```
115+
116+
И здесь вопрос -- действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?
97117

98-
**Пока браузер не загрузит и не выполнит внешний скрипт, он не покажет часть страницы под ним.**
118+
Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.
99119

100-
В ряде случаев это совсем неуместно. Например, мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся -- оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама -- это дополнение к странице, она не должна как-то тормозить сайт и нарушать его функционал.
120+
Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся -- оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функционал.
101121

102-
А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго.
122+
А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!
103123

104124
Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
105125

106126
```html
107127
<!--+ run height=100 -->
108-
<p>Начало страницы...</p>
128+
<p>Важная информация не покажется, пока не загрузится скрипт.</p>
109129

110130
<script src="https://js.cx/hello/ads.js?speed=0"></script>
111131

112132
<p>...Важная информация!</p>
113133
```
114134

115-
В примере выше важная информация не покажется, пока не загрузится внешний скрипт. Но действительно ли он так важен, что мы хотим заставить посетителя ждать? Если это реклама или счётчик посещаемости, то вряд ли.
135+
Что делать?
116136

117-
Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку скриптов может быть несколько, и если какой-то один скрипт тормозит или завис, то последующие будут его ждать.
137+
Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит -- получается, другие два его будут ждать -- тоже нехорошо.
118138

119-
Кроме того, когда скрипты в конце страницы -- то они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно, например счётчик посещений наиболее точно сработает, если загрузить его пораньше.
139+
Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно, например счётчик посещений наиболее точно сработает, если загрузить его пораньше.
140+
141+
Поэтому "расположить скрипты внизу" -- не лучший выход.
120142

121143
Кардинально решить эту проблему помогут атрибуты `async` или `defer`:
122144
<dl>
123145
<dt>Атрибут `async`</dt>
124146
<dd>Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении `<script async src="...">` браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен -- он выполнится.</dd>
125147
<dt>Атрибут `defer`</dt>
126-
<dd>Поддерживается всеми браузерами, включая самые старые IE. Скрипт выполняется асинхронно, не заставляет ждать страницу, но, в отличие от `async`, браузер гарантирует, что относительный порядок скриптов с `defer` будет сохранён.
148+
<dd>Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от `async`.
149+
150+
Первое -- браузер гарантирует, что относительный порядок скриптов с `defer` будет сохранён.
127151
128152
То есть, в таком коде (с `async`) первым сработает тот скрипт, который раньше загрузится:
129153
@@ -139,8 +163,21 @@
139163
<script src="2.js" defer></script>
140164
```
141165

142-
Атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом.
166+
Поэтому атрибут `defer` используют в тех случаях, когда второй скрипт `2.js` зависит от первого `1.js`, к примеру -- использует что-то, описанное первым скриптом.
143167

168+
Второе отличие -- скрипт с `defer` сработает, когда весь HTML-документ будет обработан браузером.
169+
170+
Например, если документ достаточно большой...
171+
```html
172+
<script src="async.js" async></script>
173+
<script src="defer.js" defer></script>
174+
175+
Много много много букв
176+
```
177+
178+
...То скрипт `async.js` выполнится, как только загрузится -- возможно, до того, как ведь документ готов. А `defer.js` подождёт готовности всего документа.
179+
180+
Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.
144181
</dd>
145182
</dl>
146183

@@ -158,7 +195,7 @@
158195

159196
```html
160197
<!--+ run height=100 -->
161-
<p>Начало страницы...</p>
198+
<p>Важная информация теперь не ждёт, пока загрузится скрипт...</p>
162199

163200
<script *!*async*/!* src="https://js.cx/hello/ads.js?speed=0"></script>
164201

@@ -173,12 +210,38 @@
173210
Перед вставкой внешнего тега `<script>` понимающий программист всегда проверит, есть ли у него подобный атрибут. Иначе медленный скрипт может задержать загрузку страницы.
174211
[/smart]
175212

213+
[smart header="Забегая вперёд"]
214+
Для продвинутого читателя, которые знает, что теги `<script>` можно добавлять на страницу в любой момент при помощи самого javascript, заметим, что скрипты, добавленные таким образом, ведут себя так же, как `async`. То есть, выполняются как только загрузятся, без сохранения относительного порядка.
215+
216+
Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим, то используется свойство `script.async = false`.
217+
218+
219+
Выглядит это примерно так:
220+
```js
221+
function addScript(src);
222+
var script = document.createElement('script');
223+
script.src = src;
224+
*!*
225+
script.async = false; // чтобы гарантировать порядок
226+
*/!*
227+
document.head.appendChild(script);
228+
}
229+
230+
addScript('1.js'); // загружаться эти скрипты начнут сразу
231+
addScript('2.js'); // выполнятся, как только загрузятся
232+
addScript('3.js'); // но, гарантированно, в порядке 1 -> 2 -> 3
233+
```
234+
235+
Более подобно работу со страницей мы разберём во второй части учебника.
236+
[/smart]
237+
238+
176239
## Итого
177240

178241
<ul>
179242
<li>Скрипты вставляются на страницу как текст в теге `<script>`, либо как внешний файл через `<script src="путь"></script>`</li>
180243
<li>Специальные атрибуты `async` и `defer` используются для того, чтобы пока грузится внешний скрипт -- браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.</li>
181-
<li>Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` -- нет.</li>
244+
<li>Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` -- нет. Кроме того, `defer` всегда ждёт, пока весь HTML-документ будет готов, а `async` -- нет.</li>
182245
</ul>
183246

184247
Очень важно не только читать учебник, но делать что-то самостоятельно.

‎1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/solution.js

-11
This file was deleted.

‎1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/source.js

-10
This file was deleted.

‎1-js/3-writing-js/4-testing/2-pow-test-0/solution.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ describe("любое число, кроме нуля, в степени 0 рав
3232
//+ no-beautify
3333
...
3434
it("ноль в нулевой степени даёт NaN", function() {
35-
assert( isNaN(pow(0,0), "0 в степени 0 не NaN");
35+
assert( isNaN(pow(0, 0)), "0 в степени 0 не NaN");
3636
});
3737
...
3838
```

‎1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://js.cx/test/libs.js"></script>
6+
<script src="test.js"></script>
7+
</head>
8+
<body>
9+
10+
<script>
11+
12+
function pow(x, n) {
13+
if (n < 0) return NaN;
14+
if (Math.round(n) != n) return NaN;
15+
if (n == 0 && x == 0) return NaN;
16+
17+
var result = 1;
18+
for (var i = 0; i < n; i++) {
19+
result *= x;
20+
}
21+
return result;
22+
}
23+
24+
</script>
25+
26+
</body>
27+
</html>

‎1-js/3-writing-js/4-testing/2-pow-test-0/_js.view/test.js renamed to ‎1-js/3-writing-js/4-testing/2-pow-test-0/solution.view/test.js

File renamed without changes.

‎1-js/3-writing-js/4-testing/2-pow-test-0/source.view/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://js.cx/test/libs.js"></script>
6+
<script src="test.js"></script>
7+
</head>
8+
<body>
9+
10+
<script>
11+
12+
function pow(x, n) {
13+
if (n < 0) return NaN;
14+
if (Math.round(n) != n) return NaN;
15+
16+
var result = 1;
17+
for (var i = 0; i < n; i++) {
18+
result *= x;
19+
}
20+
return result;
21+
}
22+
23+
</script>
24+
25+
</body>
26+
</html>

‎1-js/3-writing-js/4-testing/2-pow-test-0/source.view/test.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
describe("pow", function() {
2+
3+
describe("возводит x в степень n", function() {
4+
5+
function makeTest(x) {
6+
var expected = x * x * x;
7+
it("при возведении " + x + " в степень 3 результат: " + expected, function() {
8+
assert.equal(pow(x, 3), expected);
9+
});
10+
}
11+
12+
for (var x = 1; x <= 5; x++) {
13+
makeTest(x);
14+
}
15+
16+
});
17+
18+
it("при возведении в отрицательную степень результат NaN", function() {
19+
assert(isNaN(pow(2, -1)), "pow(2, -1) не NaN");
20+
});
21+
22+
it("при возведении в дробную степень результат NaN", function() {
23+
assert(isNaN(pow(2, 1.5)), "pow(2, -1.5) не NaN");
24+
});
25+
26+
});

0 commit comments

Comments
 (0)