Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,030 --> 00:00:02,700
To finish this section,
2
2
00:00:02,700 --> 00:00:05,520
let's take a quick look at different ways
3
3
00:00:05,520 --> 00:00:09,063
of loading a JavaScript script in HTML.
4
4
00:00:10,980 --> 00:00:14,790
So up to this point, we have always used the regular way
5
5
00:00:14,790 --> 00:00:18,500
of including JavaScript files into our HTML,
6
6
00:00:18,500 --> 00:00:20,420
like we can see here.
7
7
00:00:20,420 --> 00:00:23,930
However, we can also add the async attribute
8
8
00:00:23,930 --> 00:00:28,890
to the script tag like this, or the defer attribute.
9
9
00:00:28,890 --> 00:00:31,890
And these attributes are gonna influence the way
10
10
00:00:31,890 --> 00:00:35,030
in which the JavaScript file is fetched,
11
11
00:00:35,030 --> 00:00:39,290
which basically means download and then executed.
12
12
00:00:39,290 --> 00:00:42,610
Now in the HTML, we can write the script tag
13
13
00:00:42,610 --> 00:00:47,610
in the document head, or usually at the end of the body.
14
14
00:00:47,900 --> 00:00:49,940
So these are the two situations
15
15
00:00:49,940 --> 00:00:53,180
that we're gonna be comparing in this slide.
16
16
00:00:53,180 --> 00:00:56,630
So when we include a script without any attribute
17
17
00:00:56,630 --> 00:00:57,820
in the head,
18
18
00:00:57,820 --> 00:01:02,340
what will the page loading process look like over time?
19
19
00:01:02,340 --> 00:01:04,690
Well, as the user loads the page
20
20
00:01:04,690 --> 00:01:09,050
and receives the HTML, the HTML code will start
21
21
00:01:09,050 --> 00:01:13,330
to be parsed by the browser and parsing the HTML
22
22
00:01:13,330 --> 00:01:18,100
is basically building the DOM tree from the HTML elements.
23
23
00:01:18,100 --> 00:01:19,920
Then at a certain point,
24
24
00:01:19,920 --> 00:01:24,450
it will find or a script tag, start to fetch the script,
25
25
00:01:24,450 --> 00:01:26,590
and then execute it.
26
26
00:01:26,590 --> 00:01:28,680
Now, during all this time,
27
27
00:01:28,680 --> 00:01:31,970
the HTML parsing will actually stop.
28
28
00:01:31,970 --> 00:01:34,400
So it will be waiting for the script
29
29
00:01:34,400 --> 00:01:37,090
to get fetched and executed.
30
30
00:01:37,090 --> 00:01:41,540
Only after that, the rest of the HTML can be parsed.
31
31
00:01:41,540 --> 00:01:43,600
And at the end of that parsing,
32
32
00:01:43,600 --> 00:01:47,430
the DOM content loaded event will finally get fired,
33
33
00:01:47,430 --> 00:01:50,040
as we learned in the last video.
34
34
00:01:50,040 --> 00:01:53,710
Now, this is not ideal at all, right?
35
35
00:01:53,710 --> 00:01:55,150
We don't want the browser
36
36
00:01:55,150 --> 00:01:58,160
to be just sitting there doing nothing,
37
37
00:01:58,160 --> 00:02:00,460
because this can have a huge impact
38
38
00:02:00,460 --> 00:02:02,750
on the pages performance.
39
39
00:02:02,750 --> 00:02:07,170
Plus, in this case, the script will actually be executed
40
40
00:02:07,170 --> 00:02:09,400
before the DOM is ready.
41
41
00:02:09,400 --> 00:02:12,610
And so again, that's not ideal.
42
42
00:02:12,610 --> 00:02:14,410
So never do this,
43
43
00:02:14,410 --> 00:02:18,210
never include the script in the head like this.
44
44
00:02:18,210 --> 00:02:21,750
That's why we usually always put the script tag at the end
45
45
00:02:21,750 --> 00:02:25,940
of the body, so that all the HTML is already parsed,
46
46
00:02:25,940 --> 00:02:29,230
when it finally reaches the script tag.
47
47
00:02:29,230 --> 00:02:31,160
So in this situation,
48
48
00:02:31,160 --> 00:02:34,690
this is how the page loading process looks like.
49
49
00:02:34,690 --> 00:02:36,140
The HTML is parsed,
50
50
00:02:36,140 --> 00:02:39,820
then the script tag is found at the end of the document,
51
51
00:02:39,820 --> 00:02:42,030
then the script is fetched.
52
52
00:02:42,030 --> 00:02:45,750
And then finally, the script gets executed.
53
53
00:02:45,750 --> 00:02:48,210
And this is much better.
54
54
00:02:48,210 --> 00:02:51,520
So if you didn't know why we always put the script
55
55
00:02:51,520 --> 00:02:53,430
at the end of the body.
56
56
00:02:53,430 --> 00:02:58,430
Well, now you know, however, this is still not perfect,
57
57
00:02:58,720 --> 00:03:02,170
because the script could have been downloaded before,
58
58
00:03:02,170 --> 00:03:05,620
while the HTML was still being parsed.
59
59
00:03:05,620 --> 00:03:08,800
So what about the async attribute?
60
60
00:03:08,800 --> 00:03:12,230
Well, this is what the loading process looks like
61
61
00:03:12,230 --> 00:03:15,240
when we use async script loading in the head
62
62
00:03:15,240 --> 00:03:17,000
of the document.
63
63
00:03:17,000 --> 00:03:20,480
So as you can see, the difference is that the script
64
64
00:03:20,480 --> 00:03:25,090
is loaded at the same time as the HTML is parsed.
65
65
00:03:25,090 --> 00:03:27,430
So in an asynchronous way,
66
66
00:03:27,430 --> 00:03:29,660
so that's already an advantage.
67
67
00:03:29,660 --> 00:03:32,920
However, the HTML parsing still stops
68
68
00:03:32,920 --> 00:03:35,340
for the script execution.
69
69
00:03:35,340 --> 00:03:39,430
So the script is actually downloaded asynchronously.
70
70
00:03:39,430 --> 00:03:43,260
But then it's executed right away in a synchronous way.
71
71
00:03:43,260 --> 00:03:47,860
And so the HTML code has to wait for being parsed.
72
72
00:03:47,860 --> 00:03:50,740
But anyway, as we can see from the length
73
73
00:03:50,740 --> 00:03:55,720
of the diagrams, this still makes page loading time shorter.
74
74
00:03:55,720 --> 00:03:59,600
But now, what about the defer attribute?
75
75
00:03:59,600 --> 00:04:03,510
Well, when deferring what happens is that the script
76
76
00:04:03,510 --> 00:04:05,940
is still loaded asynchronously.
77
77
00:04:05,940 --> 00:04:07,750
But the execution of the script
78
78
00:04:07,750 --> 00:04:12,250
is deferred until the end of the HTML parsing.
79
79
00:04:12,250 --> 00:04:14,970
So in practice, loading time is similar
80
80
00:04:14,970 --> 00:04:18,350
to the async attribute, but with the key difference
81
81
00:04:18,350 --> 00:04:22,740
that would defer the HTML parsing is never interrupted,
82
82
00:04:22,740 --> 00:04:26,880
because the script is only executed at the end.
83
83
00:04:26,880 --> 00:04:31,030
And many times, this is exactly what we want.
84
84
00:04:31,030 --> 00:04:34,210
Now, you might be wondering why I didn't show async
85
85
00:04:34,210 --> 00:04:36,340
and defer in the body yet.
86
86
00:04:36,340 --> 00:04:38,340
And the reason for that is
87
87
00:04:38,340 --> 00:04:40,840
that they simply don't make sense there.
88
88
00:04:40,840 --> 00:04:44,490
Because in the body, fetching and executing the script
89
89
00:04:44,490 --> 00:04:48,720
always happens after parsing the HTML anyway.
90
90
00:04:48,720 --> 00:04:53,130
And so async and defer have no practical effector.
91
91
00:04:53,130 --> 00:04:55,660
All right and so the async
92
92
00:04:55,660 --> 00:04:59,800
and defer attributes have no practical effect here at all.
93
93
00:04:59,800 --> 00:05:02,283
They will make no difference all right.
94
94
00:05:03,150 --> 00:05:07,420
Now there are, of course use cases for all these strategies.
95
95
00:05:07,420 --> 00:05:10,300
So let's now compare them, except, of course,
96
96
00:05:10,300 --> 00:05:12,620
the regular loading in the head,
97
97
00:05:12,620 --> 00:05:14,523
which is completely ruled out.
98
98
00:05:16,210 --> 00:05:18,130
So here is what we already know
99
99
00:05:18,130 --> 00:05:20,030
about the three strategies,
100
100
00:05:20,030 --> 00:05:23,370
and also the three loading diagrams that we analyzed
101
101
00:05:23,370 --> 00:05:25,200
in the last slide.
102
102
00:05:25,200 --> 00:05:27,440
But let's now compare the async
103
103
00:05:27,440 --> 00:05:30,610
and defer attributes a little bit better.
104
104
00:05:30,610 --> 00:05:34,890
So one important thing about loading an async script is
105
105
00:05:34,890 --> 00:05:37,150
that the DOM content loaded event
106
106
00:05:37,150 --> 00:05:39,380
will not wait for the script
107
107
00:05:39,380 --> 00:05:41,990
to be downloaded and executed.
108
108
00:05:41,990 --> 00:05:44,660
So usually, DOM content loaded,
109
109
00:05:44,660 --> 00:05:47,180
waits for all scripts to execute.
110
110
00:05:47,180 --> 00:05:51,170
But scripts loaded with async are an exception.
111
111
00:05:51,170 --> 00:05:55,270
So with async, DOM content loaded is fired off as soon
112
112
00:05:55,270 --> 00:05:58,160
as the HTML finishes parsing.
113
113
00:05:58,160 --> 00:05:59,980
And this might actually happen
114
114
00:05:59,980 --> 00:06:03,290
when a big script takes a long time to load,
115
115
00:06:03,290 --> 00:06:05,350
like in this example.
116
116
00:06:05,350 --> 00:06:09,290
So notice how the DOM content loaded event appears right
117
117
00:06:09,290 --> 00:06:13,650
after HTML parsing in both these diagrams.
118
118
00:06:13,650 --> 00:06:17,110
Now, using defer, on the other hand, forces,
119
119
00:06:17,110 --> 00:06:20,550
the DOM content loaded event to only get fired
120
120
00:06:20,550 --> 00:06:24,550
after the whole script has been downloaded and executed.
121
121
00:06:24,550 --> 00:06:26,730
And so this is the more traditional way
122
122
00:06:26,730 --> 00:06:29,100
that this event works.
123
123
00:06:29,100 --> 00:06:32,500
Another very important aspect is that async scripts
124
124
00:06:32,500 --> 00:06:36,550
are not guaranteed to be executed in the exact order
125
125
00:06:36,550 --> 00:06:39,230
that they are declared in the code.
126
126
00:06:39,230 --> 00:06:43,580
So the script that arrives first gets executed first.
127
127
00:06:43,580 --> 00:06:45,930
On the other hand, by using defer,
128
128
00:06:45,930 --> 00:06:47,680
that is not the case.
129
129
00:06:47,680 --> 00:06:51,720
So using the defer attribute guarantees that the scripts
130
130
00:06:51,720 --> 00:06:55,760
are actually executed in the order that they are declared
131
131
00:06:55,760 --> 00:06:57,540
or written in the code.
132
132
00:06:57,540 --> 00:07:00,550
And that is usually what we want to happen.
133
133
00:07:00,550 --> 00:07:03,550
So in conclusion, and also keeping in mind,
134
134
00:07:03,550 --> 00:07:05,810
what we learned in the last slide,
135
135
00:07:05,810 --> 00:07:10,810
using defer in the HTML head is overall the best solution.
136
136
00:07:10,850 --> 00:07:13,590
So you should use it for your own scripts.
137
137
00:07:13,590 --> 00:07:17,670
And for scripts where the order of execution is important.
138
138
00:07:17,670 --> 00:07:20,080
For example, if your script relies
139
139
00:07:20,080 --> 00:07:23,770
on some third party library that you need to include,
140
140
00:07:23,770 --> 00:07:27,620
you will include that library before your own script,
141
141
00:07:27,620 --> 00:07:31,690
so that your script can then use the library's code.
142
142
00:07:31,690 --> 00:07:36,000
And in this case, you have to use defer and not async.
143
143
00:07:36,000 --> 00:07:41,000
Because defer will guarantee the correct order of execution.
144
144
00:07:41,210 --> 00:07:43,210
Now, for third party scripts,
145
145
00:07:43,210 --> 00:07:46,690
where the order does not matter, for example,
146
146
00:07:46,690 --> 00:07:49,730
an analytics software like Google Analytics,
147
147
00:07:49,730 --> 00:07:52,800
or an ad script, or something like that,
148
148
00:07:52,800 --> 00:07:56,660
then in this case, you should totally use async.
149
149
00:07:56,660 --> 00:08:00,030
So for any code that your own code will not need
150
150
00:08:00,030 --> 00:08:03,410
to interact with async is just fine.
151
151
00:08:03,410 --> 00:08:07,240
So it's a good use case for this kind of scripts.
152
152
00:08:07,240 --> 00:08:10,090
And I'm saying this because, of course,
153
153
00:08:10,090 --> 00:08:12,530
you can use different loading strategies
154
154
00:08:12,530 --> 00:08:16,560
for different scripts in your web application or website.
155
155
00:08:16,560 --> 00:08:19,370
Okay, now, what's important to note
156
156
00:08:19,370 --> 00:08:24,370
is that only modern browsers support async and defer.
157
157
00:08:24,410 --> 00:08:28,730
And they will basically get ignored in older browsers.
158
158
00:08:28,730 --> 00:08:31,630
So if you need to support all browsers,
159
159
00:08:31,630 --> 00:08:34,550
then you need to put your script tag at the end
160
160
00:08:34,550 --> 00:08:38,170
of the body and not in the head.
161
161
00:08:38,170 --> 00:08:41,710
That's because this is actually not a JavaScript feature,
162
162
00:08:41,710 --> 00:08:44,330
but an HTML5 feature.
163
163
00:08:44,330 --> 00:08:47,500
And so you can't really work around this limitation,
164
164
00:08:47,500 --> 00:08:50,420
like you can do with modern JavaScript features
165
165
00:08:50,420 --> 00:08:53,680
by transpiling, or poly-filling.
166
166
00:08:53,680 --> 00:08:57,270
Okay, now, this should give you a pretty good idea
167
167
00:08:57,270 --> 00:09:01,430
about different ways of loading JavaScript scripts.
168
168
00:09:01,430 --> 00:09:04,200
So let's now quickly move over to the code
169
169
00:09:04,200 --> 00:09:05,463
and implement this.
170
170
00:09:07,680 --> 00:09:12,500
And here, we still have the script at the end of our body,
171
171
00:09:12,500 --> 00:09:16,970
and of course, without any async or defer attributes.
172
172
00:09:16,970 --> 00:09:18,960
Now before we move this to the head,
173
173
00:09:18,960 --> 00:09:22,530
let's quickly check out here our Network tab
174
174
00:09:22,530 --> 00:09:23,463
one more time.
175
175
00:09:24,470 --> 00:09:29,000
And let's use the fast 3G preset now.
176
176
00:09:29,000 --> 00:09:32,870
Just so we can see these files here being loaded.
177
177
00:09:32,870 --> 00:09:37,870
And also to see this DOM content loaded event being fired.
178
178
00:09:39,760 --> 00:09:43,090
And so here we can actually see the different assets
179
179
00:09:43,090 --> 00:09:45,393
of the page being loaded over time.
180
180
00:09:46,590 --> 00:09:49,413
And let's search for the script.
181
181
00:09:50,550 --> 00:09:51,870
And so yeah,
182
182
00:09:51,870 --> 00:09:56,250
here you see that the script actually only loaded
183
183
00:09:56,250 --> 00:09:59,943
so only started to load after these first images here.
184
184
00:10:01,210 --> 00:10:05,900
And also the HTML itself, which is this one here.
185
185
00:10:05,900 --> 00:10:08,350
So only after they finished loading is
186
186
00:10:08,350 --> 00:10:11,370
when the JavaScript file started loading.
187
187
00:10:11,370 --> 00:10:14,313
That's why here, we have this stalled time.
188
188
00:10:15,220 --> 00:10:18,130
And so this is a bit similar to the diagram
189
189
00:10:18,130 --> 00:10:19,693
that I showed you in the slide.
190
190
00:10:21,260 --> 00:10:24,910
Okay, now, this time is probably different for you.
191
191
00:10:24,910 --> 00:10:27,580
But just take note of it, so we can compare it
192
192
00:10:27,580 --> 00:10:29,043
to the next scenario.
193
193
00:10:31,060 --> 00:10:33,190
So let's now copy this.
194
194
00:10:33,190 --> 00:10:35,983
And I will command it out using command slash.
195
195
00:10:36,900 --> 00:10:40,163
And so now I'm moving it here to the head.
196
196
00:10:41,920 --> 00:10:46,460
Okay, and then I'm gonna put the defer attribute.
197
197
00:10:46,460 --> 00:10:49,750
Because as we just learned, this is the preferred way
198
198
00:10:49,750 --> 00:10:51,660
of loading our own scripts.
199
199
00:10:51,660 --> 00:10:54,120
And also when the order matters.
200
200
00:10:54,120 --> 00:10:58,840
So from now on, we will always load our scripts like this.
201
201
00:10:58,840 --> 00:11:02,510
So in the head with the defer attribute.
202
202
00:11:02,510 --> 00:11:04,250
So let's give it a save.
203
203
00:11:04,250 --> 00:11:08,220
And this will then trigger a reload here.
204
204
00:11:08,220 --> 00:11:12,050
And you see that now the DOM content loaded event here,
205
205
00:11:12,050 --> 00:11:14,240
fired half a second earlier.
206
206
00:11:14,240 --> 00:11:16,390
And so that's because the JavaScript file
207
207
00:11:16,390 --> 00:11:19,160
could start to load immediately.
208
208
00:11:19,160 --> 00:11:22,850
And so indeed, now here, as we hover this file,
209
209
00:11:22,850 --> 00:11:25,690
we don't have that stalled period.
210
210
00:11:25,690 --> 00:11:27,320
So that period in the beginning,
211
211
00:11:27,320 --> 00:11:31,200
where the file isn't even being loaded, right,
212
212
00:11:31,200 --> 00:11:32,970
so this looks different.
213
213
00:11:32,970 --> 00:11:37,940
And, in fact, it looks exactly as I showed you in the slide
214
214
00:11:37,940 --> 00:11:39,023
one more time.
215
215
00:11:39,930 --> 00:11:42,270
So the load time is of course different,
216
216
00:11:42,270 --> 00:11:44,830
because the assets that we need to download
217
217
00:11:44,830 --> 00:11:46,510
are exactly the same.
218
218
00:11:46,510 --> 00:11:48,430
But what matters is that the page
219
219
00:11:48,430 --> 00:11:52,093
is basically ready earlier in this scenario.
220
220
00:11:53,610 --> 00:11:54,750
All right.
221
221
00:11:54,750 --> 00:11:55,903
So let's put it back.
222
222
00:11:56,990 --> 00:11:59,470
And, yeah, with this,
223
223
00:11:59,470 --> 00:12:01,970
we actually finished one more section.
224
224
00:12:01,970 --> 00:12:04,940
And one more really beautiful project,
225
225
00:12:04,940 --> 00:12:06,323
in my opinion, at least.
226
226
00:12:07,320 --> 00:12:11,660
So one more time, you can add this to your portfolio,
227
227
00:12:11,660 --> 00:12:13,720
or show off to your friends,
228
228
00:12:13,720 --> 00:12:18,500
or maybe even potential employees, or employers,
229
229
00:12:18,500 --> 00:12:22,650
just make sure about this notice that I have here
230
230
00:12:22,650 --> 00:12:24,020
at the bottom of this page,
231
231
00:12:24,020 --> 00:12:26,100
and in all the other big projects,
232
232
00:12:26,100 --> 00:12:28,500
which is please don't use this project
233
233
00:12:28,500 --> 00:12:31,560
on your own to create your own course.
234
234
00:12:31,560 --> 00:12:34,440
Also, don't claim it as your own product, as if,
235
235
00:12:34,440 --> 00:12:37,460
like you came up with this design on your own.
236
236
00:12:37,460 --> 00:12:39,820
So this is just for learning purposes,
237
237
00:12:39,820 --> 00:12:41,950
or for your portfolio.
238
238
00:12:41,950 --> 00:12:45,060
All right, but I think that's pretty obvious anyway.
239
239
00:12:45,060 --> 00:12:47,520
I just wanted to make sure to mention it here,
240
240
00:12:47,520 --> 00:12:49,770
because many people ask me questions
241
241
00:12:49,770 --> 00:12:52,030
about what they can do with the projects
242
242
00:12:52,030 --> 00:12:53,093
and what they can't.
243
243
00:12:54,450 --> 00:12:58,560
But anyway, congratulations for finishing one more section.
244
244
00:12:58,560 --> 00:13:02,350
And actually, by reaching the end of the intermediate part
245
245
00:13:02,350 --> 00:13:03,870
of this course.
246
246
00:13:03,870 --> 00:13:05,380
That's a huge milestone,
247
247
00:13:05,380 --> 00:13:07,830
and you should really be celebrating.
248
248
00:13:07,830 --> 00:13:09,800
So great job of going through
249
249
00:13:09,800 --> 00:13:11,970
all these videos together with me,
250
250
00:13:11,970 --> 00:13:15,600
learning all of these important and valuable skills.
251
251
00:13:15,600 --> 00:13:18,230
So take a well deserved break now.
252
252
00:13:18,230 --> 00:13:21,780
And after you're energized, let's move on together to one
253
253
00:13:21,780 --> 00:13:24,370
of the most important sections of this course,
254
254
00:13:24,370 --> 00:13:27,400
which is gonna be about object oriented programming
255
255
00:13:27,400 --> 00:13:28,523
in JavaScript.
22514
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.