Original subtitles

1 1

To finish this section, 2

2

let's take a quick look at different ways 3

3

of loading a JavaScript script in HTML. 4

4

So up to this point, we have always used the regular way 5

5

of including JavaScript files into our HTML, 6

6

like we can see here. 7

7

However, we can also add the async attribute 8

8

to the script tag like this, or the defer attribute. 9

9

And these attributes are gonna influence the way 10

10

in which the JavaScript file is fetched, 11

11

which basically means download and then executed. 12

12

Now in the HTML, we can write the script tag 13

13

in the document head, or usually at the end of the body. 14

14

So these are the two situations 15

15

that we're gonna be comparing in this slide. 16

16

So when we include a script without any attribute 17

17

in the head, 18

18

what will the page loading process look like over time? 19

19

Well, as the user loads the page 20

20

and receives the HTML, the HTML code will start 21

21

to be parsed by the browser and parsing the HTML 22

22

is basically building the DOM tree from the HTML elements. 23

23

Then at a certain point, 24

24

it will find or a script tag, start to fetch the script, 25

25

and then execute it. 26

26

Now, during all this time, 27

27

the HTML parsing will actually stop. 28

28

So it will be waiting for the script 29

29

to get fetched and executed. 30

30

Only after that, the rest of the HTML can be parsed. 31

31

And at the end of that parsing, 32

32

the DOM content loaded event will finally get fired, 33

33

as we learned in the last video. 34

34

Now, this is not ideal at all, right? 35

35

We don't want the browser 36

36

to be just sitting there doing nothing, 37

37

because this can have a huge impact 38

38

on the pages performance. 39

39

Plus, in this case, the script will actually be executed 40

40

before the DOM is ready. 41

41

And so again, that's not ideal. 42

42

So never do this, 43

43

never include the script in the head like this. 44

44

That's why we usually always put the script tag at the end 45

45

of the body, so that all the HTML is already parsed, 46

46

when it finally reaches the script tag. 47

47

So in this situation, 48

48

this is how the page loading process looks like. 49

49

The HTML is parsed, 50

50

then the script tag is found at the end of the document, 51

51

then the script is fetched. 52

52

And then finally, the script gets executed. 53

53

And this is much better. 54

54

So if you didn't know why we always put the script 55

55

at the end of the body. 56

56

Well, now you know, however, this is still not perfect, 57

57

because the script could have been downloaded before, 58

58

while the HTML was still being parsed. 59

59

So what about the async attribute? 60

60

Well, this is what the loading process looks like 61

61

when we use async script loading in the head 62

62

of the document. 63

63

So as you can see, the difference is that the script 64

64

is loaded at the same time as the HTML is parsed. 65

65

So in an asynchronous way, 66

66

so that's already an advantage. 67

67

However, the HTML parsing still stops 68

68

for the script execution. 69

69

So the script is actually downloaded asynchronously. 70

70

But then it's executed right away in a synchronous way. 71

71

And so the HTML code has to wait for being parsed. 72

72

But anyway, as we can see from the length 73

73

of the diagrams, this still makes page loading time shorter. 74

74

But now, what about the defer attribute? 75

75

Well, when deferring what happens is that the script 76

76

is still loaded asynchronously. 77

77

But the execution of the script 78

78

is deferred until the end of the HTML parsing. 79

79

So in practice, loading time is similar 80

80

to the async attribute, but with the key difference 81

81

that would defer the HTML parsing is never interrupted, 82

82

because the script is only executed at the end. 83

83

And many times, this is exactly what we want. 84

84

Now, you might be wondering why I didn't show async 85

85

and defer in the body yet. 86

86

And the reason for that is 87

87

that they simply don't make sense there. 88

88

Because in the body, fetching and executing the script 89

89

always happens after parsing the HTML anyway. 90

90

And so async and defer have no practical effector. 91

91

All right and so the async 92

92

and defer attributes have no practical effect here at all. 93

93

They will make no difference all right. 94

94

Now there are, of course use cases for all these strategies. 95

95

So let's now compare them, except, of course, 96

96

the regular loading in the head, 97

97

which is completely ruled out. 98

98

So here is what we already know 99

99

about the three strategies, 100

100

and also the three loading diagrams that we analyzed 101

101

in the last slide. 102

102

But let's now compare the async 103

103

and defer attributes a little bit better. 104

104

So one important thing about loading an async script is 105

105

that the DOM content loaded event 106

106

will not wait for the script 107

107

to be downloaded and executed. 108

108

So usually, DOM content loaded, 109

109

waits for all scripts to execute. 110

110

But scripts loaded with async are an exception. 111

111

So with async, DOM content loaded is fired off as soon 112

112

as the HTML finishes parsing. 113

113

And this might actually happen 114

114

when a big script takes a long time to load, 115

115

like in this example. 116

116

So notice how the DOM content loaded event appears right 117

117

after HTML parsing in both these diagrams. 118

118

Now, using defer, on the other hand, forces, 119

119

the DOM content loaded event to only get fired 120

120

after the whole script has been downloaded and executed. 121

121

And so this is the more traditional way 122

122

that this event works. 123

123

Another very important aspect is that async scripts 124

124

are not guaranteed to be executed in the exact order 125

125

that they are declared in the code. 126

126

So the script that arrives first gets executed first. 127

127

On the other hand, by using defer, 128

128

that is not the case. 129

129

So using the defer attribute guarantees that the scripts 130

130

are actually executed in the order that they are declared 131

131

or written in the code. 132

132

And that is usually what we want to happen. 133

133

So in conclusion, and also keeping in mind, 134

134

what we learned in the last slide, 135

135

using defer in the HTML head is overall the best solution. 136

136

So you should use it for your own scripts. 137

137

And for scripts where the order of execution is important. 138

138

For example, if your script relies 139

139

on some third party library that you need to include, 140

140

you will include that library before your own script, 141

141

so that your script can then use the library's code. 142

142

And in this case, you have to use defer and not async. 143

143

Because defer will guarantee the correct order of execution. 144

144

Now, for third party scripts, 145

145

where the order does not matter, for example, 146

146

an analytics software like Google Analytics, 147

147

or an ad script, or something like that, 148

148

then in this case, you should totally use async. 149

149

So for any code that your own code will not need 150

150

to interact with async is just fine. 151

151

So it's a good use case for this kind of scripts. 152

152

And I'm saying this because, of course, 153

153

you can use different loading strategies 154

154

for different scripts in your web application or website. 155

155

Okay, now, what's important to note 156

156

is that only modern browsers support async and defer. 157

157

And they will basically get ignored in older browsers. 158

158

So if you need to support all browsers, 159

159

then you need to put your script tag at the end 160

160

of the body and not in the head. 161

161

That's because this is actually not a JavaScript feature, 162

162

but an HTML5 feature. 163

163

And so you can't really work around this limitation, 164

164

like you can do with modern JavaScript features 165

165

by transpiling, or poly-filling. 166

166

Okay, now, this should give you a pretty good idea 167

167

about different ways of loading JavaScript scripts. 168

168

So let's now quickly move over to the code 169

169

and implement this. 170

170

And here, we still have the script at the end of our body, 171

171

and of course, without any async or defer attributes. 172

172

Now before we move this to the head, 173

173

let's quickly check out here our Network tab 174

174

one more time. 175

175

And let's use the fast 3G preset now. 176

176

Just so we can see these files here being loaded. 177

177

And also to see this DOM content loaded event being fired. 178

178

And so here we can actually see the different assets 179

179

of the page being loaded over time. 180

180

And let's search for the script. 181

181

And so yeah, 182

182

here you see that the script actually only loaded 183

183

so only started to load after these first images here. 184

184

And also the HTML itself, which is this one here. 185

185

So only after they finished loading is 186

186

when the JavaScript file started loading. 187

187

That's why here, we have this stalled time. 188

188

And so this is a bit similar to the diagram 189

189

that I showed you in the slide. 190

190

Okay, now, this time is probably different for you. 191

191

But just take note of it, so we can compare it 192

192

to the next scenario. 193

193

So let's now copy this. 194

194

And I will command it out using command slash. 195

195

And so now I'm moving it here to the head. 196

196

Okay, and then I'm gonna put the defer attribute. 197

197

Because as we just learned, this is the preferred way 198

198

of loading our own scripts. 199

199

And also when the order matters. 200

200

So from now on, we will always load our scripts like this. 201

201

So in the head with the defer attribute. 202

202

So let's give it a save. 203

203

And this will then trigger a reload here. 204

204

And you see that now the DOM content loaded event here, 205

205

fired half a second earlier. 206

206

And so that's because the JavaScript file 207

207

could start to load immediately. 208

208

And so indeed, now here, as we hover this file, 209

209

we don't have that stalled period. 210

210

So that period in the beginning, 211

211

where the file isn't even being loaded, right, 212

212

so this looks different. 213

213

And, in fact, it looks exactly as I showed you in the slide 214

214

one more time. 215

215

So the load time is of course different, 216

216

because the assets that we need to download 217

217

are exactly the same. 218

218

But what matters is that the page 219

219

is basically ready earlier in this scenario. 220

220

All right. 221

221

So let's put it back. 222

222

And, yeah, with this, 223

223

we actually finished one more section. 224

224

And one more really beautiful project, 225

225

in my opinion, at least. 226

226

So one more time, you can add this to your portfolio, 227

227

or show off to your friends, 228

228

or maybe even potential employees, or employers, 229

229

just make sure about this notice that I have here 230

230

at the bottom of this page, 231

231

and in all the other big projects, 232

232

which is please don't use this project 233

233

on your own to create your own course. 234

234

Also, don't claim it as your own product, as if, 235

235

like you came up with this design on your own. 236

236

So this is just for learning purposes, 237

237

or for your portfolio. 238

238

All right, but I think that's pretty obvious anyway. 239

239

I just wanted to make sure to mention it here, 240

240

because many people ask me questions 241

241

about what they can do with the projects 242

242

and what they can't. 243

243

But anyway, congratulations for finishing one more section. 244

244

And actually, by reaching the end of the intermediate part 245

245

of this course. 246

246

That's a huge milestone, 247

247

and you should really be celebrating. 248

248

So great job of going through 249

249

all these videos together with me, 250

250

learning all of these important and valuable skills. 251

251

So take a well deserved break now. 252

252

And after you're energized, let's move on together to one 253

253

of the most important sections of this course, 254

254

which is gonna be about object oriented programming 255

255

in JavaScript.