1 00:00:02,610 --> 00:00:07,910 So we have these different layers of performance optimization we could say, we have the startup time and 2 00:00:07,920 --> 00:00:08,850 the runtime 3 00:00:09,180 --> 00:00:14,190 and now let's have a look at the different things which affect performance there. 4 00:00:14,190 --> 00:00:20,220 Now of course there are a lot of tiny factors which influence it but there are a couple of bigger categories 5 00:00:20,220 --> 00:00:26,730 and potential improvements I'd like to think about when we have a look at these different layers. For 6 00:00:26,730 --> 00:00:31,810 the startup time, an important factor is the size of our scripts, 7 00:00:31,860 --> 00:00:36,710 so simply the question how big is our Javascript file 8 00:00:36,780 --> 00:00:42,570 we're forcing the user to download before anything is able to happen on the page? 9 00:00:42,570 --> 00:00:47,550 Remember when I said a couple of minutes ago that we have two parts when we think about startup time - 10 00:00:47,880 --> 00:00:53,040 the time it takes to display something on the screen and the time it takes until the user is able to 11 00:00:53,040 --> 00:00:55,410 do something with that screen, 12 00:00:55,410 --> 00:00:58,020 well the script size can affect both. 13 00:00:58,020 --> 00:01:04,020 If your script renders a lot of visual parts on the screen, then of course it affects how quickly the 14 00:01:04,020 --> 00:01:10,530 user is able to see something on the screen but it most certainly will impact how quickly the user is 15 00:01:10,620 --> 00:01:11,660 able to interact 16 00:01:11,670 --> 00:01:17,450 because if your script is needed to add event listeners to a button and so on, then of course even if the button 17 00:01:17,450 --> 00:01:22,950 is visible the user will not be able to do anything with it if your script hasn't finished downloading 18 00:01:22,950 --> 00:01:25,110 yet and isn't available yet. 19 00:01:25,170 --> 00:01:31,120 So therefore the script size, the size of the script file really plays an important role here, 20 00:01:31,200 --> 00:01:36,750 the bigger it is the longer it takes users to download them and the longer it will take users to work 21 00:01:36,750 --> 00:01:44,010 with your page and keep in mind that not every user is visiting your page from a great Internet connection. 22 00:01:44,010 --> 00:01:51,720 Users might be using slow devices in slow network areas and therefore even a script file which is only 23 00:01:51,720 --> 00:01:59,450 100kb big can take a couple of seconds to download and that could lead to a bad user experience. 24 00:01:59,460 --> 00:02:05,910 Now besides the script size, it's also the amount of HTTP round trips and I covered this earlier 25 00:02:05,940 --> 00:02:12,750 when we talked about Javascript modules and when we introduced webpack to bundle them into a single 26 00:02:12,750 --> 00:02:14,420 or a few bundles 27 00:02:14,580 --> 00:02:16,450 and the reason for a that is that 28 00:02:16,530 --> 00:02:21,600 if we're working with a lot of script files and of course the same is true for a lot of CSS files 29 00:02:21,630 --> 00:02:29,180 by the way, then the browser has to download all these files to make your page work and every 30 00:02:29,270 --> 00:02:35,940 HttpRequest that needs to be sent to download something has a certain base cost it takes to set up that 31 00:02:35,940 --> 00:02:40,110 request and send it, no matter how big the file is which you're downloading. 32 00:02:40,110 --> 00:02:46,800 So the more HTTP round trips it takes to finally have the final state of your page, the longer 33 00:02:46,800 --> 00:02:50,410 it will take until your page is ready to run and therefore 34 00:02:50,520 --> 00:02:56,340 this is definitely a part you want to optimize and of course we already started optimizing both the 35 00:02:56,340 --> 00:03:03,810 size and the number of HTTP round trips by adding webpack which does minify and optimize our code and which 36 00:03:03,900 --> 00:03:07,030 also bundles our code together. 37 00:03:07,050 --> 00:03:10,790 So now what about the runtime performance? There, 38 00:03:10,830 --> 00:03:16,890 it's of course all about optimizing our code execution. If we're working in the browser environment, 39 00:03:16,950 --> 00:03:21,150 that also includes one important aspect and that is DOM access, 40 00:03:21,150 --> 00:03:27,480 so when we work with the DOM, when we add elements, when we remove elements, we want to avoid unnecessary 41 00:03:27,480 --> 00:03:36,150 code execution, we want to write code which is efficient to execute and we definitely want to avoid unnecessary 42 00:03:36,150 --> 00:03:44,520 DOM operations because if we unnecessarily for example re-render too many elements on the screen even 43 00:03:44,520 --> 00:03:51,120 though maybe just one element needs to change, then we affect performance because it turns out working 44 00:03:51,120 --> 00:03:53,620 with the DOM is really expensive 45 00:03:53,640 --> 00:04:00,180 from a performance perspective because Javascript has to talk to the browser, the browser has to go through 46 00:04:00,180 --> 00:04:05,760 the DOM and find the place you want to change, it then has to create a new element, it has to add the 47 00:04:05,760 --> 00:04:10,750 element or remove one, whatever you're doing and that all are a lot of steps. 48 00:04:10,800 --> 00:04:15,780 Now of course we're still talking about milliseconds here but they can really add up, 49 00:04:15,780 --> 00:04:20,100 so being efficient here is super important as you will see in this module. 50 00:04:20,100 --> 00:04:27,330 The other big factor are memory leaks, it's easy to introduce leaks and not all leaks are horrible, you 51 00:04:27,330 --> 00:04:29,600 might not even recognize them 52 00:04:29,640 --> 00:04:36,120 and I can tell you a lot of web pages out there do have tiny memory leaks but if you have bigger ones, 53 00:04:36,150 --> 00:04:42,570 they can really add up and can lead to your page becoming slower or to actually even crash in the worst 54 00:04:42,570 --> 00:04:51,500 case scenario. Now it's also interesting to think about different ways of solving one and the same problem 55 00:04:51,500 --> 00:04:52,520 in Javascript, 56 00:04:52,520 --> 00:04:58,450 so to find code alternatives with better performance. I will show an example for this throughout 57 00:04:58,460 --> 00:05:04,090 this module. In the end here this is related to the first box here in the runtime performance part, 58 00:05:04,130 --> 00:05:10,640 the code execution which we want to optimize. When you for example loop through an array, it turns out 59 00:05:10,640 --> 00:05:15,860 you have a couple of different ways of doing so and they don't all have the same performance, 60 00:05:15,950 --> 00:05:22,540 so that's also a thing you could think about and you could try to optimize. Related to that is another 61 00:05:22,550 --> 00:05:26,320 approach which is called micro optimizations, 62 00:05:26,420 --> 00:05:33,770 you can optimize certain parts of your code and actually looping through an array with a quicker alternative 63 00:05:33,770 --> 00:05:40,610 would be one example for such a micro optimization, you can optimize parts of your code for specific use 64 00:05:40,610 --> 00:05:47,900 cases. You could opt to use a certain data structure because it's a bit quicker than that other approach 65 00:05:47,900 --> 00:05:49,180 you used before. 66 00:05:49,190 --> 00:05:55,610 Now generally, you want to shy away from such micro optimizations though and I will come back to those 67 00:05:55,610 --> 00:06:02,050 throughout the module and explain why you should be really careful when you try to optimize everything 68 00:06:02,210 --> 00:06:08,780 but it is a thing which can matter in niche scenarios and very large applications, 69 00:06:08,810 --> 00:06:15,020 the most important parts you want to care about are the first two boxes here in the runtime performance 70 00:06:15,020 --> 00:06:22,220 part and of course all the boxes in the startup time performance part. And of course as mentioned, always 71 00:06:22,220 --> 00:06:25,770 keep in mind that Javascript is just one part, 72 00:06:25,940 --> 00:06:31,970 when we talk about optimizing our web page, it also includes things like writing efficient CSS and so 73 00:06:31,970 --> 00:06:32,570 on 74 00:06:32,570 --> 00:06:38,210 but that's simply not the focus of this course and Javascript typically is the most important thing to 75 00:06:38,210 --> 00:06:39,340 optimize. 76 00:06:39,350 --> 00:06:41,840 So with that we're almost done with the theory, 77 00:06:41,840 --> 00:06:46,580 let's now find out how we can approach this whole performance optimization thing.