 I was able to come in only very late but I heard some pretty interesting questions about F dot call versus calling F directly. So this session is going to be popping the hood of the JavaScript engines and trying to see how they work. A couple of disclaimers, first I did not propose the session. The session was proposed by a guy called Krishna Chaitanya. If you guys were following the schedule he couldn't make it. Someone had to pick it up and I thought well fine let me try doing it. So I'm not an expert at this. Second thing, most of my limited knowledge comes from looking at Gecko and I mean Mozilla's JavaScript engine and peaking at V8. I do not have any understanding of Nitro, Safari's engine and I know a little bit about Chakra but I cannot reveal it because my employer forbids me to. So let's get started. I kind of wanted to have that Ninja theme, the JS4 theme so that's why this theme. Bear with me the colors are really bad so JavaScript engine popping the hoods looks like I didn't get enough attention. Let me try again JavaScript engines popping the hoods. Yeah I can see a lot of smiles, good. So yeah we'll be playing around with JavaScript engines through the stock we'll be just doing one single single thing we try to understand how this simple equation Z is equal to X plus Y evaluates inside the browser give me a kind of noisy there. So yeah all that you'll be trying to do is trying to understand how a simple statement like Z equals X plus Y evaluates. So yeah I showed you this which means you're going to pop the hood of the car so I'll have to have accompanying graphics so yeah we are going to look what's inside the car. So executing Z is equal to X plus Y is actually very simple. It's an addition operator right. X is a variable, Y is a variable, Z is also a variable. So through the session we'll just look at how it works. So first thing the first thing whenever the compiler or whenever your interpreter or your JavaScript engine encounters this statement is that it reads it from the memory. I mean you all know that the first thing you have to do is parse it right so that's what is reading from the memory. That's when this is after which the things get started things start getting interesting. So once it has read the statement and it has understood it it has to do things like get the value of Y, find where X and Y is, read their values, probably make sense out of their values, choose the meaning of plus. I mean what if X and Y are strings or what if X and Y are floats? What if X is a string Y is a float? Things like that. Save Z back to memory and then yeah at the end of the day once you've done all your partying you'll have to do the garbage so yeah we'll have to do garbage collection also. You may not understand all the seven steps yet however I will be talking through the seven steps. One request is if you think you can add any more data points from what I have in the slides please feel free because this is not a lecture it's a discussion. It was included in the discussions topic under the JS2 schedule so please feel free to interrupt and add in more Gyan I'm sure people will appreciate it. So first thing reading operation from the memory what do you think happens whenever Z is equal to X plus Y is encountered? You get to a lexical analyzer or you get to a tokenizer. So anyone done compilers class in college? How many loved the compilers class? Okay there were like five hands that went up a compilers class and how many loved it? There were like two hands remaining okay. How many said that compilers was important when you did your engineering or when you did one hand two hands good three good hands are coming up nice. So I'm not going to go into the basics of what compilers are how tokenizer happens. Let's just assume that because the meaty part is what happens after it. This is like classic textbook stuff the thing is WebKit uses a lecture called flex and the basic thing is it's not a simple context free grammar. You just can't write rules because JavaScript is this ever forgiving language that lets that as that adds in semicolons that does the semicolon insertion that does type course automatically for you. So JavaScript is forgiving in that way and all those rules are put in inside the tokenizer. Once you have the tokenizer you know you'll be able to separate X, Y and Z separately in the statement. Once it is done you create what is called an abstract syntax tree or an AST. Can anyone help me define AST? What's an abstract syntax tree? It's effectively a tree that says Z is at the top. You have two nodes saying X plus Y and how does the expression basically look like? And WebKit uses Bison which is a bottom shift bottom up shift reduce parser which means that it reads one line after so when I said Z is equal to X plus Y it starts on Z and then tries to construct the expression one after the other. The echo on the other hand does not use any I'm not seen using any specific parser so I think it is a top down parser correct me if I'm wrong I think it's a home grown top down parser but WebKit for sure uses Bison or used to use Bison. So what you have now at the end of this stage is an abstract syntax tree or an AST which effectively tells you what does this mean. Now this is all the boring parts let's get into the actual parts where browsers come in. There was a question there what is that? So yeah this is where the interesting parts come in. Can anyone tell me how many types is Java type language or non-type language? How many people say it's untyped? How many people say it's typed? Actually it is loosely typed there are types in JavaScript and the funny thing is it is this simple reason of types that makes compiling JavaScript a real pain. So the only reason why JavaScript probably is not able to compile as fast as C or not able to execute as fast as C is because it is typeless. So the problem is X and Y could be anything X could be a number string object there are like eight or nine specific types and it could be one of them. The issue here is if they were well defined types for example if it was a string or if it was an integer you could always directly point to the memory location where the integer was available and read the integer so imagine that it's like a 32 bit integer you know that the boundary is 32 bits you know how to get it and you know what the offset would be imagine that it's a typed array where every integer in the array is an every element in the array is an integer in that way how do you get to the if it's a 32 bit integer how do you get to the third element 3 into 32 no it's not 3 it's 4 into 32 it starts with 0 right so offsets are not possible in JavaScript that's one problem the other issue is all these values of X and Y are not just variables these variables are also dependent on what context are so closures for example can change the meaning of what X and Y means so X is on the global versus X is inside a closure the closure will get by weightage right so you have scope hiding there you have local local variables which again mask scopes object properties can mask scopes using prototypes and the entire prototype hierarchy and finally you have the good old friends like eval with etc which actually say that with an object evaluate something so this is this is all the cause of confusion why JavaScript is not able to execute as fast as see so let's look at what happens if it's an array well if it's actually an array to be something like object of X right in that case the idea is if it's a dense array you can get it you can always so if you know that the array is of same type and you know that all all the elements in the array are in 32 32 bit integers the way to get to the fourth element would be 5 into 32 right so the problem is it's not as simple because whenever you create an array you can put any kind of you can put a string and then you can put an integer so you don't know where the array boundaries lie so one thing is one thing however is the denser the array the better for you I'll tell you why the funny thing this is one thing I noticed in Firefox if you push the array from 0 to n it is dense however if you push it from end to 0 for some reason it is not dense it creates a sparse array and it does a performance fault I don't know why I have not had the patience to peer into the Firefox source code to understand why this does but yeah this is something I found the other thing is things like named so if OBGN is an array you know that you can also do OBG of name where you can add it add a name property instead of saying OBG of 0 you can also say OBG of name funny part this also creates sparse arrays I'll tell you why sparse arrays are a problem so we saw an array let's look at what objects are and here's where I would be talking specifically about Firefox and Chrome so if x is an object how so in the previous session I'm sure you have heard about how the prototype chain look lookup happens so if someone does an object of dot x first where does it look does it look at the local scope or does it look at the object property funny it will not look at a local scope because object dot x is already defined by a project right so there's no local scope so it starts with object dot property where it looks at the current object it goes one level higher looks at its prototype and then traverses all the way up to the parent element which is what is that what is the prototype of all prototypes object it will go all the way up there that's how our normal lookups happen this is where the browsers try to act smart or this is where the browsers try to say that they can speed up things and this is one thing this inline cache is one very very clever thing that was introduced in the browsers so every imagine that you have to access object dot x like ten times and object dot x is in the tenth prototype chain do you think you'll have to traverse the prototype every time that's painful right instead this ICs of the inline caches coming to play this was I think first introduced in Gekko 2 I'm not sure it was a Gekko thing what these guys do is they so imagine that there's a object called x colon 1 there's another object called x colon 1 and y colon 2 what happens in the background is the browsers create what you call shapes and what a shape says is if the shape of an object is x colon 1 or x colon 20 or x colon 30 or a colon 30 that's one specific shape right so in that case it knows that whenever whenever a object name x or whenever a property name x is accessed to an inch 32 look at this this location so it will the offset is automatically set so for example say the way you look at the integer is start looking after the 10 space to the 30 30 second space right so that's how offsets work so however offsets are different for the second element where there's another y colon 2 because how do you get to the second member second member you'll have to look at the first member and then start looking at the offset of the second member or in fact they may even be sparse you never know basic premise to take away is all of these objects have shapes do JavaScript objects have shapes no they don't write does JavaScript use class inheritance or prototypal inheritance prototypal right what is the basic difference between class and prototypes what do you do in a class you define the members and then create objects of that class type rate in JavaScript you just create objects and then you can start creating more objects funny browsers they don't think that that's smart though we love doing it if you notice these shapes are nothing but classes in fact webkit stores these memories and calls them hidden classes it's more like telling you that you guys are not the greatest C plus guys are doing the great things so as a JavaScript programmer we all love prototypal inheritance but on the background to speed it all up classical in it's effectively the idea of classes though there is no real inheritance as such the only kind of inheritance is if x fails go to the next shape then go to the next shape and then so imagine that I started x colon 1 and then I add another property so the only kind of reference between classes is this shape refers to that shape so at the end of the day shapes are all classes and as I said if a new shape or a new class is created for every property that you add the best part now that you have classes even if the prototype chain you know how to look at the 10th prototypal element so instead of having to go 10 steps you're able to do it in one step that's about objects the only problem was about closures you know what I'm so in product of very product are very well defined however let's take a look at how closures work can anyone quickly define what a closure is louder louder I get that this is a little bit into C++ and not the JavaScript realm but it's a function within a function where you have a reference to an inner function perfect so the issue with closure is whenever a closure is called so there's a top function there's a function inside and whenever you refer a variable here inside the function the JavaScript engines create something called an activation context what this activation context does is it copies the variable that is used into the activation context so that it is available to the inner function yeah so there's a closure at the top there's a closure inside and you're referring the inside guy refers to some variable outside actually you know what heck with PowerPoint there is my cursor yeah you know this is better isn't it I'm not typing so you have a function I'm still typing in give me a minute the reason there were two function was because I didn't see the first one so there is a var x here okay there's another function pardon my bad live typing but yeah I thought this is better so okay so how does this inner function know what the value of x of the x which is outside is right this is closure do you all agree you've used this in your code right the way it works is whenever this guy is parsed or whenever this guy is initialized it sees that it sees that this x is used but this x is available here and hence what it does is whenever this gets this is run to this guy what all are the environment that is passed is an activation context and what is there in this activation context the value of x and it will not just be this it'll be activation context all the way up to all closures okay so tell me this we saw trick previously right where prototypal inheritance was changing so I I just told you that for example if I do this say I say x colon 1 I say this and then this is just to reiterate what I said previously so what is the prototype of a what is the product of a B right I should technically define this earlier but yeah prototype of a is B yeah I can we can do all sorts of magic in word notepad so sure they let you do this better oh so the eye okay so that means that the last example was not visible and you're okay with it anyway so this is B for me and when I try something like a dot y what happens it'll try to look at why here why is not available what did it do next go here look at this and why is available and print it here right that happens the first time but you know what it what an inline cash does whenever it encounters a state what was there a question whenever an inline cash whenever it encounters a statement like this inline cash cancels it and say that instead of doing this hit something like this say offset of 100 where y is actually available so rather than having to do the chain every time you are just getting an offset so this is this is typically the first example of a just in time compile was there a question inline cash is shared only across similar similar objects because otherwise the offset will be incorrect right a new class so so what happens is for this there'll be say let's call it shape one okay let's call the shape one now if you do something like this shape one is removed shape 2 is created you know the funny part is if you say something like what do you think happens shape one still exists but a has shape 2 now and whenever you try to do a dot x this is how it will be called clear so inline that that's about inline caches any questions on inline caches and closures and how the just in time compile just in time happens okay so let's move on so all this is good but the question is so as I told you off code has generated I showed you how the off code looks like it probably will be a read from this memory location at this offset that's how it will typically be something like this so every shape will know what memory location it is that you know the funny part is I know where to start reading but do I really know where to end reading it when they say OBJ dot x x could be a string x could be a number it could be anything right I really don't know where to stop reading because it could be 32 bits it could be 64 bits it could be anything that's where all loosely type languages have to have a notion of boxing and input so what happens is when you say x is equal to 10 what are you telling JavaScript you say that store 10 in a variable called x and you are very proud over the where keyword right when you say where where means it's a variable you can assign anything you know funny what fire for what these browsers actually do they do something like this they save it say not just 100 they also say what the type is and the type is not going to be number because what what can I do what is the JavaScript number what it is it could be floating point what else can it be I can't hear you guys boring interesting it could be floating point it could be a simple decimal it could be it could be anything right so how do you define that so 32 is actually an operating system specific integer so this is a 32 bits integer and the value there is 100 so every time you say x is equal to 100 this is actually how it's stored and you know what happens browsers kind of do the tricky part again because all JavaScript numbers are supposed to be I triple e 754 floating point specific are supposed to adhere to this this specification you know what the problem with this is this is a 64 bit long integer and if you if you say x is equal to 1 how many bits do you really need louder you just need one bit right I mean you definitely don't need 32 bits but you definitely don't need 64 bits is that correct so let's so what these browser guys have done is they said let's just cheat the standards and try to optimize or try to squeeze out the last juice if I can so you know what they do they just don't care about it they use 34 32 bits to optimize it so this is specific to firefox I do not know how opera or how be it works so if anyone has information would be glad to add it so effectively just use 32 bits and if it goes higher it uses doubles or it effectively overflows into doubles this is if you notice this is very similar to what encoding is anyone here heard of Huffman encoding what does Huffman encoding do it shortens wherever it can yeah so it's effectively shortens wherever it can and for the things that it cannot feature rare cases it kind of keeps it long so it's kind of differential encoding here and there are different ways to box a value so when I say okay so hence going forward I'm going to start using the terms boxing and unboxing so whenever you say x is equal to 100 the JavaScript engine boxes a value and stores it so it effectively stores it like this storing it like this is called a box is called a box is called boxing the value JavaScript when it tries to read it back it's called unboxing okay so there are different ways to do boxing or just like a million ways to do encoding there are different ways to do boxing I'm not going to go into details of this but one if you guys are operating system guys or if you guys are microprocessor guys you should know that WebKit does nanboxing which is a very standard how many of you here have heard about nanboxing a nanboxing is a way of so you know what is the JavaScript man NAN not a number and what does that man equal to is man equal to man louder no so effectively the idea of man is man is like this 51 bit space and then there's a so effectively the entire 64 bits you have some space reserved for man and the rest is just ignored rest could be zeros or rest could be anything what these browser guys cleverly did was effectively reutilize the space that you are not using in man and say that if the value is man or if the initial bits are man that means what is told is an is an is a number if it is not a man it's a overflow and if it's a man or everything else is zeros that means it's actually a not a number so they tried to use this convention and that's what it's called man boxing guy that Mozilla are obviously very clever they have a pun of word on nanboxing and they combine nanboxing and pun and called it none boxing and the basic idea here being but to put it simply a non boxing non boxing favours doubles by NAND NAN boxing does not basically it says that the meaning of the mask is swapped in none than NAN boxing I mean you just need to know this I let's not even get into the details the funny part here however to notice NAN boxing is supported only on 32-bit or NAN boxing supports only 32-bit integers so for all the guys who are wondering how a Firefox 64-bit JavaScript engine will come I'm not sure this however is done by V8 and you know why V8 does this specifically the reason V8 does it is for V8 unpacking the box and directly writing it to the register is easy using NAN boxing and that's exactly that's you that's apparently the reason why they chose NAN boxing or anything else okay let me break here too complex too simple shall I continue what too complex not really because the number of so effectively I will be telling you what the similarities are and calling out the differences because an exhaustive list of differences would be like too much to cover so I'll effectively be telling you how they basically work I mean what you saw here was all of them do boxing but Chrome does NAN boxing does NAN boxing and I told you the reasons why so back to my question is it too complex do you want me to continue at this space or do you want me to dull down a little bit this is good right good so what we did is we read the input so we read the boxes of X and Y imagine that they are just two treasure chests we have read two treasure chests of X and Y and what does JavaScript have to do with those treasure treasure chest it has to open and actually see what's inside right it has to understand the value of X and Y because if you give this to JavaScript you know what's it going to say it says I don't know what types are I don't know what in 32 is I want to know what a number is right that's what it'll want to know so effectively this is what the JavaScript engine should know what I've done here is try to show you what NAN boxes and what a NAN boxes so this is a NAN box value so this is the initial this is the initial mass that's the value so for a to give you a classic case this is not a NAN and hence it's a double this is a NAN this this is inside the NAN space because this is the NAN bit and hence that's the integer that's how typically NAN box and NAN boxes work you don't have to understand this yet just know that it's a way to flip between whether it's a it's a flag that tells you whether it's a decimal or a long whether it's a decimal or a float that's all you need to know so similar example for NAN boxing as I told you NAN boxing has 64 bit portability funny only 48 bit 48 bits are supported and as I told you the reason for why V8 does or USA that V8 is good with numbers right reason is because it fits into the register it's able to directly unbox it into the register okay so let's so what did we see how many steps did we see okay I didn't bring this picture up on purpose I'm sorry but we so what are you did you see we saw this right quick summary what does this do what is this operation it's lexical analysis right stokenizing and parsing what does this do louder louder inline caches it actually tells where to get the location of X and Y what does this part the third step do it has gotten the boxes now it it has definitely gotten the boxes I've told you what boxes mean now what does step 4 do you open up the box and see what's inside it finally you actually have done X plus Y let's actually perform the operation already right so let's stop talking and let's actually do what happens here so going back oops yeah so you know what what what the interpreter would typically do interpreter would typically see this is how the interpreted code looks like for X plus Y it will say if X is type in 32 and Y is type in 32 then do this otherwise and if the result is an overflow or an and do this if one of them is a float do this if and it goes on and on and on and it does this for every single it does this for every single variable variable type so now you know why your JavaScript interpretation is slow right the moment you want to do X plus Y what happens imagine that X and Y are strings probably the if loop is going to be at the end right so all these conditions are checked is that kind of bad that is kind of bad and that's where the just in time compile comes in can anyone quickly help me define the term just in time compile generic what is generic meaning of jet just in time can't hear you it compiles when you run okay anything else what are they it does it only when it's needed good what else you know all these definitions are actually correct just in time compilation is instead of having to interpret and run so many op codes or so many assembly language codes you may as well just compile it into one machine code and whenever this is it whenever X plus Y is it just redirect yourself to that op code is not going to be easier it is right so that's exactly what just in time is let's start with the basic old age old just in time you know it's kind of funny that I put this car picture because the rate at which the browsers have evolved when I say basic jit I'm talking about the Yeager monkey time I'm talking about like three years ago so I should have put this car that that way actually be disrespectful to all the people who thought about it but yeah sorry so you know what did does this is the basics of it if the types of X and Y are known if you know that X is an integer and Y is an integer how do you write an assembly code to add them you'll copy both of them into the register and you simply add them right this is where shapes so effectively if you know that they are integers you don't have to box and unbox them am I correct and boxing and unboxing is expensive right so effectively if you know the types of this you don't have to box and unbox so basic idea being try to somehow determine what the type is and dependent on every type so I told you that every type has a shape right or a hidden class so for every single class try to generate the opcode so imagine that you say X plus Y where X and so if you're in a loop for example and you say if you say X plus Y inside it instead of having to run the interpreter every time what it will do is it will try to know that the X and Y have specific classes in this case they are integers and it will redirect you automatically to that code this is the basic of cheating however there's a problem with cheating you know what if you add an N32 plus an N32 the result could overflow isn't it if you so adding is one operation what about multiplication what about division you can have a NAND problem with basic cheating is it still has to execute those checks so remember I told you here these checks if NAND then result is NAND if it overflows then make the result as a float because what you have to do is once you get the result you have to save it back in memory how would you save it you have to box it and save it right that's extra cost so basic check still has the problem of of having to check do all these basic check basic checks and you know this is when v8 came out or jit was happening and this is when v8 came out and all of you guys realize that wow chrome is so fast right so one of the things about chrome being fast apart from the dorm interaction is the JavaScript engine and that's where they went to the next generation which is a type jit how many of you here find that chrome is faster than firefox even today okay let me put it this way how many of you here think that the chrome JavaScript engine is faster than the firefox JavaScript engine why do you say that any any objective reasons why do you say chrome is faster feels faster you know a lot of people say that in fact have you guys taken look at chakra i9's JavaScript engine you know the funny part is chakra trace monkey v8 in fact i'm sorry even nitro all of them these days seem to do almost the same kind of optimization i mean this is a well published topic today what was unknown two years ago all these tricks are followed by almost every engine today so the job the actual speed difference that you feel may not be in the JavaScript engine it could be something else so let's look at the sports car and this is today by the way so let's look at the sports car the basic idea is first thing every time you compile compile it takes time right you have to try know this is in 32 you don't know the other one is in 32 get generate the output that takes time right the basic idea of crow the basic idea that was started was called tracing which is observing and identifying hot code and when I say hot okay a quick reference to Java what is a hot spot in Java yeah it's effectively a place of code that's running currently and you can swap in and swap out code out of it right so it's pretty much that the basic idea of a hot code is that you have to identify code that runs very very frequently for example iterations so the 70 iterations is a number that trace monkey gives us what is trace monkey Firefox's JavaScript engine it was called Yeager monkey previously I know which version they changed it I don't remember that but spider monkey was way old so after spider monkey we had Yeager monkey trace monkey and now they are working on iron monkey so that's one the second thing is crankshaft crankshaft basically are simple rules for example not all optimizations have to be made in inside the inside loops only you can also have loop invariance what's a loop invariant you say I easy so you know if I is the index of the loop you say I is equal to I plus 70 into X 72 into X is does not change its value inside the loop right that it's invariant in the loop it does not vary in the loop so it's an invariant so they have certain heuristics like that and apart from that they are like tons of these heuristics and the problem with heuristics is you don't know whether they'll win or they'll they'll lose or when when will they lose and what will happen you know we it has actually gotten the heuristics pretty good that's what I have read at least and that's why you feel that the JavaScript of yet could be faster so effectively types it is nothing more than identifying and so already look at the source code once before executing it look at the source code once compile parts of the source code that you can and when you actually executing it just go back to the place you can compile right that's how it works problems one initial compilation cost funny part is you know there are clever JavaScript programmers like us who do X is equal to 10 and then X is equal to X plus years old so that you can print 10 years old right all of us are clever all of us love how many of you have done that till now okay that's interesting you have never changed the variable type have in your code have you ever says assigned a variable to a number or two terms to something else and then reassigned it to something else have you done that in your code how many all of us you know what all these JavaScript engines are looking at us and and they've just give up given up in frustration or you know what these guys do they are they put up this shapes and all nicely they bring up an opcode and see what to execute and then suddenly they encounter your statement that changes the type and they said oh crap we'll have to do it again they throw it away redo the whole thing again so one good practice which which is a good practice today but may not be a good practice tomorrow is observed type safety if X is equal to 10 let X be equal to 10 it's it you may want to do X is equal to string that that could be acceptable but the JavaScript engine may not like it it may have to throw optimization and this is the classic way trace monkey works that's only inside the interpreter so if you're if you're running it today all these takes won't really happen your code would have already been compiled into if it's a hot spot in the code it would have already been compiled into opcodes so this doesn't always happen so the way it typically works is this is the worst thing that can happen right so it tries with what the best thing is which is try to understand the type if the type doesn't work do this you know what is worse it'll not just do this while doing after doing this it'll also try to compile your code which is extra cost so sports car is done and we have the next generation of jitting the basic idea is till now you try to infer the types right I told you that typing is the biggest problem till now what you've done you've tried to infer the types however there are pretty interesting researches going on in the iron monkey team in Firefox where you're trying to prove the type rather than actually infer it so have a has anyone here heard of kaha CA j a yahoo anyone from yahoo yahoo add safe so all these are basically static code JavaScript static code analysis a JavaScript itself is a dynamic language but you can actually get something out of statically analyzing it I mean if you read the code there are good chances that you will find out that you'll be able to prove that X is actually an integer so that's the basic idea of the next generation compiler where what you do is you reduce the number of checks effectively this is it you reduce the number of checks so that you only take one part idea being type stable JavaScript how many of you would like to do int x is equal to 10 in JavaScript how many of you love doing where X is equal to 10 wow you know every single browser Baker today or every single edge area of the JavaScript team is probably thinking these guys must be dutch man but well they're system programmers your application programmers your business logic requires it you have to do it so type stable JavaScript is the basic way you have to get to you can't write type stable JavaScript you so if you notice action script had this thing where you actually declare the type right you know that's a clever way to put it you can either have it as a bar or you can have it as an infact even C sharp has it and that actually speeds up the compile that that definitely is proving that type type do not exist so that's one the other interesting thing is most machines today have multi-core processors right you know what a very clever JavaScript engine will do boxing and unboxing values it will actually differ to the second processor because box boxing is effectively numerical computation right so one one processor runs the server runs your entire code the other processor is boxing and unboxing it or in fact this is what chakra does one problem one processor runs your code the other processor is automatically generating opcodes for you that definitely uses both the processors and when you hear someone saying that my JavaScript engine uses multi-core effectively this is something that they'll be doing clear and do you know what a GPU is and everyone has been hearing that GPU enabled browsers are fast right aren't you curious what GPU enabled browsers mean can you can you even define what a GPU enabled browser is someone from say Microsoft or someone say Firefox correct so the basic idea is you can defer certain computations to the GPU unfortunately the GPU today has been only utilized for shaders or WebGL or canvas kind of things so you so all these shaders if you notice are typed so in JavaScript you also have this WebGL standard where you're coming up with blobs rate what are the different have you has anyone here encountered a type JavaScript array for example anyone done WebGL open GL DirectX yeah so effectively if you notice though you are untyping arrays in the HTML5 specifications where WebGL is coming you're actually you can actually say that and this is a vector or this is a shader and this shader is of this type that's effectively what the GPU enabled GPU enabled guide us let me quickly go through the different data types the way your browser works and does not work and then let me go to the final sections after that so as far as things are concerned interestingly substring is an O of one operation concat is optimized but concat is not optimized on Opera and Chrome I'm not sure why though concat seem to have this problem similarly array as I said denser the better but then there are ways you can screw it up and we as programmers have the full power to screw it up functions again F is faster because this is a direct function call this is a dictionary lookup right F dot call you have to see what call means and then come back that's why I've got color a little bit faster similarly using arguments slows down execution because it'll have to then fetch the arguments from the stack box unbox them do stuff stuff like that prototypes are better than closures prototypes is prototype hierarchy but once you've gotten there you can use inline caches rate similarly about exceptions funny thing I noticed is mostly exceptions so whenever you put the code inside a try block it's mostly free because try doesn't do anything however the moment it goes into catch sequence it's apparently very very expensive the other thing I noticed is there are certain browsers in certain cases that throw out optimization and they see a try block I'm not sure why and do not use eval and with why because the shape that you created is completely thrown away with an evaluative because the scope changes so how many of you here have heard people saying don't use eval and with why security yeah but apart from that it's also for optimization okay now I'm not going to talk about this we'll see if you guys are able to help me with this so when I say save Z what does box Z mean what is boxing the value mean loud allowed I can't hear you outside with the outside noise what does box Z mean packing it basically and then the funny thing that these guys also do is there's a good chance that the Z may be used later in an operation and instead of having to box it and unbox it again they just leave it in the register and they create a shape if required you know what shapes are right okay garbage collection typically garbage collection is done using mark and sweep where you look at the whole stack of objects you say this is used this is unused this is used this is unused and then you get the things out that are unused that's typical garbage collection a browser use two types of enhancements over it first thing is incremental where rather than looking at the whole stack at every single so problem with this is whenever you're trying to do animations and all your animations become jittery because suddenly your browser your browser thread will pass for garbage collection so they're trying to minimize those passes by doing incremental just say look at the first 10 and then look at 10 to 20 then look at 20 to 30 that's incremental and finally you have generational where this is also in Java by the way generational is some objects are short lived some objects are long lived you can keep collecting the short lived objects whenever they are long lived identify them and put them elsewhere so that you don't run GCs on them frequently any questions on incremental and generational okay and my final slide is I've told you so much how does it all change when Ekma script next comes in what are the name of Ekma I don't remember the standard in either but yeah so one good thing is block scope will reduce variable lookups so instead of saying where you'll have legs and all so you don't have to keep looking up or keep looking into the closures you'll be defining the blocks were better thing you what is a yield operator has anyone here how many of you have heard about the yield operator okay so the idea with yield is it may cause us to save the current context this could be a performance issue we don't know other thing we are going to have WebGL which will have blob data so there's a talk on blob data today and you know the problem with blob data is unboxing and boxing it may actually be a pain we do not know JavaScript Ekma scripts next also so Brenda and I also suggested this concept of classes and you know what classes may at the end of the day be direct representation of object shapes class may be good and things like assignment destructuring where you say stuff like X comma Y is equal to 1 comma 2 that's just syntactic sugar so that won't help you much similarly promises modules and all are just syntactic sugar on how the code is written so I don't I'm not sure whether they'll help you much so conclusions how to make your code the fastest I'm serious don't write any code the browser doesn't have to do any work at all but this for how many of us have this option that's funny you know that's why I took program management and Microsoft because I don't have to write code so yeah that's the option but don't write any code but if you have to you can practice type safety remember that every time you say X is equal to 10 and X is equal to something some JavaScript browser some JavaScript engineer skips a heartbeat so give it a personal touch and try to practice type safety leave hotspots alone inside the loop don't try to create objects if you have if you can do away with it because these are the parts that are optimized the most make an array dense and finally avoid operations at say one plus one plus 1.1 because that requires type coercion again the same type safety thing so that's all I had this is me this is me again and we're open for questions for like minus one minutes I just I overshot my time but I can take questions sure I know I rushed through it because I didn't have time but we can take it offline if the question is longer generational least recently used or when was it last time when was the object last access it has that extra housekeeping bit but this is how it you will know when was it last access things like that and you can even do static code analysis to find out what are the places it was used at any other questions the aim here is to squeeze every single bit the difference may not be huge I mean you you are better off doing DOM optimizations than this optimization but this is a good thing to do that's true so the purpose of the session was to pop the hood of the JavaScript engine and look what's inside it and this these are this is the junk that we get outside out of the hood any other questions thank you