JavaScript Performance

Function Inlining

Steve Kinney

Steve Kinney

JavaScript Performance

Check out a free preview of the full JavaScript Performance course

The "Function Inlining" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:

Steve states that the code we write is not always the code that is executed. Hot functions can be re-written by the compiler to be more performant, and there isn't anything we need to do.


Transcript from the "Function Inlining" Lesson

>> Steve Kinney: First one we talk about is thisFunction Inlining. And this is one of the ones where I want to make the point that sometimes you can go around moving around code and it doesn't matter, right? Because one of the things we've learned from the optimizing compiler is just turn yourself into machine code anyway.

The code you write is not always the code that V8 executes. Sometime V8 will go ahead and rewrite your code for you, right? So your job is to make the most readable, human-friendly code possible. V8's job, and the Chrome team's job, is to make that code run as fast as possible.

So we'll just look at one other quick example, and then we're done with compiler land after that, I promise you. You're like, I love compiler land, I live here now. [LAUGH] Cool. All right, so let's just make a code square, and it will take a number and it will return x times x.

We'll make another one called sumOfSquares.
>> Steve Kinney: That will take an a and a b, and say like square a,
>> Steve Kinney: plus square of b,
>> Steve Kinney: sumOfSquares, grammatically correct, yeah.
>> Steve Kinney: I will say iteration, iterations + 1. Okay, we'll go ahead and we'll say node and we'll say, benchmark.

>> Steve Kinney: Took about eight milliseconds. Now, you'll be like, hey, I had to make this function, I gotta call this function, which means the compiler has to go ahead and look up what's the square function, and pass the thing in. I've been listening to the golden rules, I understand that doing that should be slower than doing this.

a times a, b times b, look at that. Boom, I'm gonna measure it now. It's like around the same. Right, like we ran them both a few times. They're hovering around eight to ten. It's no different. That's weird. Shouldn't it be like, Beckett's was technically slower. Turns out we have this thing called Inlining.

So you do trace-turbo-inlining. You're like what is turbo inlining? Well crank shaft did it one way, turbo fan does it another way. So it's just turbo fans inlining. You'll see nothing if you go looking for trace inlining so we traced turbo-inlining now. I for one, I'm signed up.

Look it's inlining square into sumOfSquares. So you know that cool optimization I did before, right? Before it was like 8, this time it was 12, and the last time it was 10. It looks like it's roughly the same, like the needle goes back and forth like this. So what happened was Chrome is like, hey, I have to keep calling this function.

What if I just rewrote what we had the first time to what we had the second time? And it does that for you on your behalf. Right, so it'll go and it sees you're calling the same function over and over and over again, it'll basically go and rewrite your code so you're not calling that function.

Right, you don't have to worry about this, it'll just do it, you get it for free, happy day. You can thank Benedict and Francisca about that later.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now