[00:00:29] Because you can send the money you were gonna spend on ten more engineers, to get this thing out the door, and buy a beefier server. That's a philosophy. It doesn't work for client-side applications, because we can't buy all of our customers new computers. Like here, everyone, here's a fancy Mac Book Pro.
[00:00:48] Here you go, I don't wanna solve my own performance issues. I mean you could do that, but that's probably not a good idea, that's probably not a way to stay in business. So we have to think about these things. We can compress assets. We can reduce latency. But this application's eventually going to need to be run and built, and you don't get to control, the computer that it's run on.
[00:01:59] This is the application I work on. There's a few things to notice. This is loading the editor, that I showed you in that screenshot earlier. Down in the lower left hand corner, you can see where the browser spent most of the time. That thin little blue stripe is loading.
[00:02:19] Now, I was in Denver. The data center is in Chicago, it's not that far to get. This would be very different if I was in Australia, or Bangalore, or London. But I was not too far from the servers, it would probably even be closer here. I spent the majority of the time scripting, which is parsing and compiling the Java Script.
[00:03:36] Then if that function calls a function, it's one layer down in the flame chart, and you can see that I could scroll [LAUGH], and more would happen here. Chrome is actually really nice, where those little red triangles on the upper right, of any given thing in the flame chart, that is where Chrome has figured out like you're doing a bad thing.
[00:03:56] Let me tell you about the bad thing that you're doing. Sometimes, it can give you something helpful, we'll see that later. Sometimes it's like, no, this is just taking too long, and I think you should know about it. So you can kinda get a lot of really useful information.
[00:05:43] It means it's happening in our client's machine. It means that they're paying the cost, and doing the hard work for us. All right, so what is happening in the compilation part? We've identified it as a problem. Were gonna focus, each browser has a different engine. Chrome has an engine called V8.
[00:06:21] Has one called Chakra. So each one has a different engine, they do work differently. We're gonna just focus on V8, because getting really in the weeds on the differences between all of them, is probably not the best use of our time. We're trying to get this high level understanding.
[00:07:11] Okay, you've sent me those long string of text, what does that mean? We turn that into what's called an abstract syntax tree, which is an actual data structure that represents what this code actually means. That then goes to a baseline compiler or an interpreter. In Chrome, these days is a thing called Ignition.
[00:07:29] Get it? It's V8 Ignition. Mm hm, they're doing a thing here. Google's really good at making sure that their technologies are un-Googleable. Go, as a programming language, good luck, trying to Google that. Ignition and turbo fan, which we'll talk talk about later, also impossible to Google for when you're doing research for a workshop, I'm not better.
[00:08:09] Get it? It's the same, yeah. And it's an optimizing compiler, that then looks at the code, and tries to make it even faster. That will spit out, well, any code that can be optimized. Any code that can't be optimized, same thing we saw before with the interpreter. Any code that can be optimized, goes to the optimizing compiler to get optimized, whatever it does in there.
[00:08:32] And then, that's spits out highly optimized machine code, unique to that whether it's RM, or X86, like Intel, whatever, that shoots at the other end. Some cases though, you're super optimized code, isn't gonna work out, right? It's not actually valid for reasons that we'll talk about. At which point, we go back to using the slow byte code.
[00:08:55] So it stands to reason, that red arrow's bad. If you can get stuff on the green arrow, that's good. And like, that's the goal. And any time we end with the red arrow, that's not good, right? And so, one way to make your application faster, is more green arrows, less red arrows.
[00:09:13] You can all write that down. [LAUGH] Doing less work, more green arrows, less red arrows. Shorter yellow slugs. None of those notes will make any sense to you, a week from now, but I think it's really important that you capture them at this point.