WEBVTT 1 00:00:01.030 --> 00:00:02.700 To finish this section, 2 00:00:02.700 --> 00:00:05.520 let's take a quick look at different ways 3 00:00:05.520 --> 00:00:09.063 of loading a JavaScript script in HTML. 4 00:00:10.980 --> 00:00:14.790 So up to this point, we have always used the regular way 5 00:00:14.790 --> 00:00:18.500 of including JavaScript files into our HTML, 6 00:00:18.500 --> 00:00:20.420 like we can see here. 7 00:00:20.420 --> 00:00:23.930 However, we can also add the async attribute 8 00:00:23.930 --> 00:00:28.890 to the script tag like this, or the defer attribute. 9 00:00:28.890 --> 00:00:31.890 And these attributes are gonna influence the way 10 00:00:31.890 --> 00:00:35.030 in which the JavaScript file is fetched, 11 00:00:35.030 --> 00:00:39.290 which basically means download and then executed. 12 00:00:39.290 --> 00:00:42.610 Now in the HTML, we can write the script tag 13 00:00:42.610 --> 00:00:47.610 in the document head, or usually at the end of the body. 14 00:00:47.900 --> 00:00:49.940 So these are the two situations 15 00:00:49.940 --> 00:00:53.180 that we're gonna be comparing in this slide. 16 00:00:53.180 --> 00:00:56.630 So when we include a script without any attribute 17 00:00:56.630 --> 00:00:57.820 in the head, 18 00:00:57.820 --> 00:01:02.340 what will the page loading process look like over time? 19 00:01:02.340 --> 00:01:04.690 Well, as the user loads the page 20 00:01:04.690 --> 00:01:09.050 and receives the HTML, the HTML code will start 21 00:01:09.050 --> 00:01:13.330 to be parsed by the browser and parsing the HTML 22 00:01:13.330 --> 00:01:18.100 is basically building the DOM tree from the HTML elements. 23 00:01:18.100 --> 00:01:19.920 Then at a certain point, 24 00:01:19.920 --> 00:01:24.450 it will find or a script tag, start to fetch the script, 25 00:01:24.450 --> 00:01:26.590 and then execute it. 26 00:01:26.590 --> 00:01:28.680 Now, during all this time, 27 00:01:28.680 --> 00:01:31.970 the HTML parsing will actually stop. 28 00:01:31.970 --> 00:01:34.400 So it will be waiting for the script 29 00:01:34.400 --> 00:01:37.090 to get fetched and executed. 30 00:01:37.090 --> 00:01:41.540 Only after that, the rest of the HTML can be parsed. 31 00:01:41.540 --> 00:01:43.600 And at the end of that parsing, 32 00:01:43.600 --> 00:01:47.430 the DOM content loaded event will finally get fired, 33 00:01:47.430 --> 00:01:50.040 as we learned in the last video. 34 00:01:50.040 --> 00:01:53.710 Now, this is not ideal at all, right? 35 00:01:53.710 --> 00:01:55.150 We don't want the browser 36 00:01:55.150 --> 00:01:58.160 to be just sitting there doing nothing, 37 00:01:58.160 --> 00:02:00.460 because this can have a huge impact 38 00:02:00.460 --> 00:02:02.750 on the pages performance. 39 00:02:02.750 --> 00:02:07.170 Plus, in this case, the script will actually be executed 40 00:02:07.170 --> 00:02:09.400 before the DOM is ready. 41 00:02:09.400 --> 00:02:12.610 And so again, that's not ideal. 42 00:02:12.610 --> 00:02:14.410 So never do this, 43 00:02:14.410 --> 00:02:18.210 never include the script in the head like this. 44 00:02:18.210 --> 00:02:21.750 That's why we usually always put the script tag at the end 45 00:02:21.750 --> 00:02:25.940 of the body, so that all the HTML is already parsed, 46 00:02:25.940 --> 00:02:29.230 when it finally reaches the script tag. 47 00:02:29.230 --> 00:02:31.160 So in this situation, 48 00:02:31.160 --> 00:02:34.690 this is how the page loading process looks like. 49 00:02:34.690 --> 00:02:36.140 The HTML is parsed, 50 00:02:36.140 --> 00:02:39.820 then the script tag is found at the end of the document, 51 00:02:39.820 --> 00:02:42.030 then the script is fetched. 52 00:02:42.030 --> 00:02:45.750 And then finally, the script gets executed. 53 00:02:45.750 --> 00:02:48.210 And this is much better. 54 00:02:48.210 --> 00:02:51.520 So if you didn't know why we always put the script 55 00:02:51.520 --> 00:02:53.430 at the end of the body. 56 00:02:53.430 --> 00:02:58.430 Well, now you know, however, this is still not perfect, 57 00:02:58.720 --> 00:03:02.170 because the script could have been downloaded before, 58 00:03:02.170 --> 00:03:05.620 while the HTML was still being parsed. 59 00:03:05.620 --> 00:03:08.800 So what about the async attribute? 60 00:03:08.800 --> 00:03:12.230 Well, this is what the loading process looks like 61 00:03:12.230 --> 00:03:15.240 when we use async script loading in the head 62 00:03:15.240 --> 00:03:17.000 of the document. 63 00:03:17.000 --> 00:03:20.480 So as you can see, the difference is that the script 64 00:03:20.480 --> 00:03:25.090 is loaded at the same time as the HTML is parsed. 65 00:03:25.090 --> 00:03:27.430 So in an asynchronous way, 66 00:03:27.430 --> 00:03:29.660 so that's already an advantage. 67 00:03:29.660 --> 00:03:32.920 However, the HTML parsing still stops 68 00:03:32.920 --> 00:03:35.340 for the script execution. 69 00:03:35.340 --> 00:03:39.430 So the script is actually downloaded asynchronously. 70 00:03:39.430 --> 00:03:43.260 But then it's executed right away in a synchronous way. 71 00:03:43.260 --> 00:03:47.860 And so the HTML code has to wait for being parsed. 72 00:03:47.860 --> 00:03:50.740 But anyway, as we can see from the length 73 00:03:50.740 --> 00:03:55.720 of the diagrams, this still makes page loading time shorter. 74 00:03:55.720 --> 00:03:59.600 But now, what about the defer attribute? 75 00:03:59.600 --> 00:04:03.510 Well, when deferring what happens is that the script 76 00:04:03.510 --> 00:04:05.940 is still loaded asynchronously. 77 00:04:05.940 --> 00:04:07.750 But the execution of the script 78 00:04:07.750 --> 00:04:12.250 is deferred until the end of the HTML parsing. 79 00:04:12.250 --> 00:04:14.970 So in practice, loading time is similar 80 00:04:14.970 --> 00:04:18.350 to the async attribute, but with the key difference 81 00:04:18.350 --> 00:04:22.740 that would defer the HTML parsing is never interrupted, 82 00:04:22.740 --> 00:04:26.880 because the script is only executed at the end. 83 00:04:26.880 --> 00:04:31.030 And many times, this is exactly what we want. 84 00:04:31.030 --> 00:04:34.210 Now, you might be wondering why I didn't show async 85 00:04:34.210 --> 00:04:36.340 and defer in the body yet. 86 00:04:36.340 --> 00:04:38.340 And the reason for that is 87 00:04:38.340 --> 00:04:40.840 that they simply don't make sense there. 88 00:04:40.840 --> 00:04:44.490 Because in the body, fetching and executing the script 89 00:04:44.490 --> 00:04:48.720 always happens after parsing the HTML anyway. 90 00:04:48.720 --> 00:04:53.130 And so async and defer have no practical effector. 91 00:04:53.130 --> 00:04:55.660 All right and so the async 92 00:04:55.660 --> 00:04:59.800 and defer attributes have no practical effect here at all. 93 00:04:59.800 --> 00:05:02.283 They will make no difference all right. 94 00:05:03.150 --> 00:05:07.420 Now there are, of course use cases for all these strategies. 95 00:05:07.420 --> 00:05:10.300 So let's now compare them, except, of course, 96 00:05:10.300 --> 00:05:12.620 the regular loading in the head, 97 00:05:12.620 --> 00:05:14.523 which is completely ruled out. 98 00:05:16.210 --> 00:05:18.130 So here is what we already know 99 00:05:18.130 --> 00:05:20.030 about the three strategies, 100 00:05:20.030 --> 00:05:23.370 and also the three loading diagrams that we analyzed 101 00:05:23.370 --> 00:05:25.200 in the last slide. 102 00:05:25.200 --> 00:05:27.440 But let's now compare the async 103 00:05:27.440 --> 00:05:30.610 and defer attributes a little bit better. 104 00:05:30.610 --> 00:05:34.890 So one important thing about loading an async script is 105 00:05:34.890 --> 00:05:37.150 that the DOM content loaded event 106 00:05:37.150 --> 00:05:39.380 will not wait for the script 107 00:05:39.380 --> 00:05:41.990 to be downloaded and executed. 108 00:05:41.990 --> 00:05:44.660 So usually, DOM content loaded, 109 00:05:44.660 --> 00:05:47.180 waits for all scripts to execute. 110 00:05:47.180 --> 00:05:51.170 But scripts loaded with async are an exception. 111 00:05:51.170 --> 00:05:55.270 So with async, DOM content loaded is fired off as soon 112 00:05:55.270 --> 00:05:58.160 as the HTML finishes parsing. 113 00:05:58.160 --> 00:05:59.980 And this might actually happen 114 00:05:59.980 --> 00:06:03.290 when a big script takes a long time to load, 115 00:06:03.290 --> 00:06:05.350 like in this example. 116 00:06:05.350 --> 00:06:09.290 So notice how the DOM content loaded event appears right 117 00:06:09.290 --> 00:06:13.650 after HTML parsing in both these diagrams. 118 00:06:13.650 --> 00:06:17.110 Now, using defer, on the other hand, forces, 119 00:06:17.110 --> 00:06:20.550 the DOM content loaded event to only get fired 120 00:06:20.550 --> 00:06:24.550 after the whole script has been downloaded and executed. 121 00:06:24.550 --> 00:06:26.730 And so this is the more traditional way 122 00:06:26.730 --> 00:06:29.100 that this event works. 123 00:06:29.100 --> 00:06:32.500 Another very important aspect is that async scripts 124 00:06:32.500 --> 00:06:36.550 are not guaranteed to be executed in the exact order 125 00:06:36.550 --> 00:06:39.230 that they are declared in the code. 126 00:06:39.230 --> 00:06:43.580 So the script that arrives first gets executed first. 127 00:06:43.580 --> 00:06:45.930 On the other hand, by using defer, 128 00:06:45.930 --> 00:06:47.680 that is not the case. 129 00:06:47.680 --> 00:06:51.720 So using the defer attribute guarantees that the scripts 130 00:06:51.720 --> 00:06:55.760 are actually executed in the order that they are declared 131 00:06:55.760 --> 00:06:57.540 or written in the code. 132 00:06:57.540 --> 00:07:00.550 And that is usually what we want to happen. 133 00:07:00.550 --> 00:07:03.550 So in conclusion, and also keeping in mind, 134 00:07:03.550 --> 00:07:05.810 what we learned in the last slide, 135 00:07:05.810 --> 00:07:10.810 using defer in the HTML head is overall the best solution. 136 00:07:10.850 --> 00:07:13.590 So you should use it for your own scripts. 137 00:07:13.590 --> 00:07:17.670 And for scripts where the order of execution is important. 138 00:07:17.670 --> 00:07:20.080 For example, if your script relies 139 00:07:20.080 --> 00:07:23.770 on some third party library that you need to include, 140 00:07:23.770 --> 00:07:27.620 you will include that library before your own script, 141 00:07:27.620 --> 00:07:31.690 so that your script can then use the library's code. 142 00:07:31.690 --> 00:07:36.000 And in this case, you have to use defer and not async. 143 00:07:36.000 --> 00:07:41.000 Because defer will guarantee the correct order of execution. 144 00:07:41.210 --> 00:07:43.210 Now, for third party scripts, 145 00:07:43.210 --> 00:07:46.690 where the order does not matter, for example, 146 00:07:46.690 --> 00:07:49.730 an analytics software like Google Analytics, 147 00:07:49.730 --> 00:07:52.800 or an ad script, or something like that, 148 00:07:52.800 --> 00:07:56.660 then in this case, you should totally use async. 149 00:07:56.660 --> 00:08:00.030 So for any code that your own code will not need 150 00:08:00.030 --> 00:08:03.410 to interact with async is just fine. 151 00:08:03.410 --> 00:08:07.240 So it's a good use case for this kind of scripts. 152 00:08:07.240 --> 00:08:10.090 And I'm saying this because, of course, 153 00:08:10.090 --> 00:08:12.530 you can use different loading strategies 154 00:08:12.530 --> 00:08:16.560 for different scripts in your web application or website. 155 00:08:16.560 --> 00:08:19.370 Okay, now, what's important to note 156 00:08:19.370 --> 00:08:24.370 is that only modern browsers support async and defer. 157 00:08:24.410 --> 00:08:28.730 And they will basically get ignored in older browsers. 158 00:08:28.730 --> 00:08:31.630 So if you need to support all browsers, 159 00:08:31.630 --> 00:08:34.550 then you need to put your script tag at the end 160 00:08:34.550 --> 00:08:38.170 of the body and not in the head. 161 00:08:38.170 --> 00:08:41.710 That's because this is actually not a JavaScript feature, 162 00:08:41.710 --> 00:08:44.330 but an HTML5 feature. 163 00:08:44.330 --> 00:08:47.500 And so you can't really work around this limitation, 164 00:08:47.500 --> 00:08:50.420 like you can do with modern JavaScript features 165 00:08:50.420 --> 00:08:53.680 by transpiling, or poly-filling. 166 00:08:53.680 --> 00:08:57.270 Okay, now, this should give you a pretty good idea 167 00:08:57.270 --> 00:09:01.430 about different ways of loading JavaScript scripts. 168 00:09:01.430 --> 00:09:04.200 So let's now quickly move over to the code 169 00:09:04.200 --> 00:09:05.463 and implement this. 170 00:09:07.680 --> 00:09:12.500 And here, we still have the script at the end of our body, 171 00:09:12.500 --> 00:09:16.970 and of course, without any async or defer attributes. 172 00:09:16.970 --> 00:09:18.960 Now before we move this to the head, 173 00:09:18.960 --> 00:09:22.530 let's quickly check out here our Network tab 174 00:09:22.530 --> 00:09:23.463 one more time. 175 00:09:24.470 --> 00:09:29.000 And let's use the fast 3G preset now. 176 00:09:29.000 --> 00:09:32.870 Just so we can see these files here being loaded. 177 00:09:32.870 --> 00:09:37.870 And also to see this DOM content loaded event being fired. 178 00:09:39.760 --> 00:09:43.090 And so here we can actually see the different assets 179 00:09:43.090 --> 00:09:45.393 of the page being loaded over time. 180 00:09:46.590 --> 00:09:49.413 And let's search for the script. 181 00:09:50.550 --> 00:09:51.870 And so yeah, 182 00:09:51.870 --> 00:09:56.250 here you see that the script actually only loaded 183 00:09:56.250 --> 00:09:59.943 so only started to load after these first images here. 184 00:10:01.210 --> 00:10:05.900 And also the HTML itself, which is this one here. 185 00:10:05.900 --> 00:10:08.350 So only after they finished loading is 186 00:10:08.350 --> 00:10:11.370 when the JavaScript file started loading. 187 00:10:11.370 --> 00:10:14.313 That's why here, we have this stalled time. 188 00:10:15.220 --> 00:10:18.130 And so this is a bit similar to the diagram 189 00:10:18.130 --> 00:10:19.693 that I showed you in the slide. 190 00:10:21.260 --> 00:10:24.910 Okay, now, this time is probably different for you. 191 00:10:24.910 --> 00:10:27.580 But just take note of it, so we can compare it 192 00:10:27.580 --> 00:10:29.043 to the next scenario. 193 00:10:31.060 --> 00:10:33.190 So let's now copy this. 194 00:10:33.190 --> 00:10:35.983 And I will command it out using command slash. 195 00:10:36.900 --> 00:10:40.163 And so now I'm moving it here to the head. 196 00:10:41.920 --> 00:10:46.460 Okay, and then I'm gonna put the defer attribute. 197 00:10:46.460 --> 00:10:49.750 Because as we just learned, this is the preferred way 198 00:10:49.750 --> 00:10:51.660 of loading our own scripts. 199 00:10:51.660 --> 00:10:54.120 And also when the order matters. 200 00:10:54.120 --> 00:10:58.840 So from now on, we will always load our scripts like this. 201 00:10:58.840 --> 00:11:02.510 So in the head with the defer attribute. 202 00:11:02.510 --> 00:11:04.250 So let's give it a save. 203 00:11:04.250 --> 00:11:08.220 And this will then trigger a reload here. 204 00:11:08.220 --> 00:11:12.050 And you see that now the DOM content loaded event here, 205 00:11:12.050 --> 00:11:14.240 fired half a second earlier. 206 00:11:14.240 --> 00:11:16.390 And so that's because the JavaScript file 207 00:11:16.390 --> 00:11:19.160 could start to load immediately. 208 00:11:19.160 --> 00:11:22.850 And so indeed, now here, as we hover this file, 209 00:11:22.850 --> 00:11:25.690 we don't have that stalled period. 210 00:11:25.690 --> 00:11:27.320 So that period in the beginning, 211 00:11:27.320 --> 00:11:31.200 where the file isn't even being loaded, right, 212 00:11:31.200 --> 00:11:32.970 so this looks different. 213 00:11:32.970 --> 00:11:37.940 And, in fact, it looks exactly as I showed you in the slide 214 00:11:37.940 --> 00:11:39.023 one more time. 215 00:11:39.930 --> 00:11:42.270 So the load time is of course different, 216 00:11:42.270 --> 00:11:44.830 because the assets that we need to download 217 00:11:44.830 --> 00:11:46.510 are exactly the same. 218 00:11:46.510 --> 00:11:48.430 But what matters is that the page 219 00:11:48.430 --> 00:11:52.093 is basically ready earlier in this scenario. 220 00:11:53.610 --> 00:11:54.750 All right. 221 00:11:54.750 --> 00:11:55.903 So let's put it back. 222 00:11:56.990 --> 00:11:59.470 And, yeah, with this, 223 00:11:59.470 --> 00:12:01.970 we actually finished one more section. 224 00:12:01.970 --> 00:12:04.940 And one more really beautiful project, 225 00:12:04.940 --> 00:12:06.323 in my opinion, at least. 226 00:12:07.320 --> 00:12:11.660 So one more time, you can add this to your portfolio, 227 00:12:11.660 --> 00:12:13.720 or show off to your friends, 228 00:12:13.720 --> 00:12:18.500 or maybe even potential employees, or employers, 229 00:12:18.500 --> 00:12:22.650 just make sure about this notice that I have here 230 00:12:22.650 --> 00:12:24.020 at the bottom of this page, 231 00:12:24.020 --> 00:12:26.100 and in all the other big projects, 232 00:12:26.100 --> 00:12:28.500 which is please don't use this project 233 00:12:28.500 --> 00:12:31.560 on your own to create your own course. 234 00:12:31.560 --> 00:12:34.440 Also, don't claim it as your own product, as if, 235 00:12:34.440 --> 00:12:37.460 like you came up with this design on your own. 236 00:12:37.460 --> 00:12:39.820 So this is just for learning purposes, 237 00:12:39.820 --> 00:12:41.950 or for your portfolio. 238 00:12:41.950 --> 00:12:45.060 All right, but I think that's pretty obvious anyway. 239 00:12:45.060 --> 00:12:47.520 I just wanted to make sure to mention it here, 240 00:12:47.520 --> 00:12:49.770 because many people ask me questions 241 00:12:49.770 --> 00:12:52.030 about what they can do with the projects 242 00:12:52.030 --> 00:12:53.093 and what they can't. 243 00:12:54.450 --> 00:12:58.560 But anyway, congratulations for finishing one more section. 244 00:12:58.560 --> 00:13:02.350 And actually, by reaching the end of the intermediate part 245 00:13:02.350 --> 00:13:03.870 of this course. 246 00:13:03.870 --> 00:13:05.380 That's a huge milestone, 247 00:13:05.380 --> 00:13:07.830 and you should really be celebrating. 248 00:13:07.830 --> 00:13:09.800 So great job of going through 249 00:13:09.800 --> 00:13:11.970 all these videos together with me, 250 00:13:11.970 --> 00:13:15.600 learning all of these important and valuable skills. 251 00:13:15.600 --> 00:13:18.230 So take a well deserved break now. 252 00:13:18.230 --> 00:13:21.780 And after you're energized, let's move on together to one 253 00:13:21.780 --> 00:13:24.370 of the most important sections of this course, 254 00:13:24.370 --> 00:13:27.400 which is gonna be about object oriented programming 255 00:13:27.400 --> 00:13:28.523 in JavaScript.