AV-Portal 3.23.3 (4dfb8a34932102951b25870966c61d06d6b97156)

Understanding JavaScript Performance

Video in TIB AV-Portal: Understanding JavaScript Performance

Formal Metadata

Understanding JavaScript Performance
Title of Series
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Everyone wants their apps to be fast. However, it is not always clear how to get there. In this talk, we will dig into the internals of JavaScript engines to understand why performance is often so counterintuitive. What is a JIT, and how does it make my code fast? Where does it fall short? We will also discuss why you shouldn't trust micro-benchmarks and some better ways to measure real-world performance.
Color confinement Slide rule Scheduling (computing) Scripting language State of matter Feedback 1 (number) Code Planning Water vapor Neuroinformatik Software Internetworking Software Normed vector space Form (programming)
Process (computing) Different (Kate Ryan album) Sinc function
Context awareness Process (computing) Mereology
Server (computing) Channel capacity Multiplication sign Channel capacity Combinational logic Revision control Force Binary tree Forest Chain Bridging (networking) Mathematical singularity Computing platform Point cloud Series (mathematics) Computing platform
Point (geometry) Moment of inertia Real-time operating system Oracle
Series (mathematics) Local ring
Greatest element Pixel Code Multiplication sign Sheaf (mathematics) Mereology Perspective (visual) Neuroinformatik Mathematics Sign (mathematics) Physical law Software framework Series (mathematics) Thumbnail Area Software developer Data storage device Sound effect Physicalism Bit Arithmetic mean Befehlsprozessor Process (computing) Triangle Right angle Summierbarkeit Row (database) Slide rule Overhead (computing) Cone penetration test Divisor Open source Parity (mathematics) Connectivity (graph theory) Similarity (geometry) Rule of inference Number Goodness of fit Hierarchy Operator (mathematics) String (computer science) Computer hardware Ideal (ethics) Software testing Macro (computer science) Authentication Physical law Diffuser (automotive) Mathematical analysis Code Line (geometry) Limit (category theory) Cartesian coordinate system Kernel (computing) Loop (music) Software Personal digital assistant Computer hardware Charge carrier Physics Object (grammar) Local ring Library (computing)
Greatest element Multiplication sign View (database) Set (mathematics) Mereology Spherical cap Software framework Endliche Modelltheorie Error message Social class Algorithm Keyboard shortcut Sound effect Perturbation theory 10 (number) Category of being Befehlsprozessor Vector space Volumenvisualisierung Website Right angle Cycle (graph theory) Resultant Point (geometry) Mobile app Server (computing) Service (economics) Connectivity (graph theory) Virtual machine Web browser Field (computer science) Number Product (business) Prime ideal Latent heat Term (mathematics) Profil (magazine) Operator (mathematics) Macro (computer science) Addition Default (computer science) Electronic data interchange Validity (statistics) Content (media) Code Cartesian coordinate system System call Frame problem Graphical user interface Software Personal digital assistant Logic Case modding Limit set
Point (geometry) Email Execution unit Code View (database) Multiplication sign Real number Connectivity (graph theory) Gender Aliasing MIDI Port scanner Insertion loss 10 (number) Hypothesis Event horizon Strategy game Different (Kate Ryan album) Operator (mathematics) Volumenvisualisierung Summierbarkeit Macro (computer science) Library (computing)
Injektivität Multiplication sign Code Menu (computing) Instance (computer science) Mereology Revision control Data model Event horizon Klassengruppe Factory (trading post) Graph (mathematics) Gamma function Extension (kinesiology) Pulse (signal processing) Social class
Pointer (computer programming) Befehlsprozessor Profil (magazine) View (database) Graph (mathematics) Maxima and minima Discrete element method Summierbarkeit Planar graph Library (computing)
Arm Different (Kate Ryan album) Multiplication sign Phase transition
Point (geometry) NP-hard Functional (mathematics) Implementation Run time (program lifecycle phase) Poynting vector Length Execution unit Shape (magazine) Mereology Field (computer science) Product (business) Power (physics) Number Revision control Inference Medical imaging Root Square number Endliche Modelltheorie Position operator Mathematical optimization Condition number Social class Mapping Weight Instance (computer science) Line (geometry) Machine code Compiler Category of being Type theory Vector space Self-organization Object (grammar) Freezing Resultant Distortion (mathematics)
Point (geometry) Intel Information Multiplication sign Lemma (mathematics) Maxima and minima Menu (computing) Web browser Non-volatile memory Function (mathematics) Object (grammar) Operator (mathematics) Normed vector space Electronic meeting system Energy level Logic gate Logic gate Physical system Compilation album
Scripting language Mapping Confidence interval Multiplication sign Bound state Code Benchmark Mathematics Goodness of fit Different (Kate Ryan album) Software framework Computer-assisted translation Error message Position operator Mathematical optimization Library (computing)
and thank you know Palomar from and we're not already know I'm not really you can find your Internet those continually as a few weeks ago I'm also solve now officially diversity confinement can think about the reader where you can watch me build completely useless stuff on the computer that sounds interesting to you please to subscribe to the general and form like a fallers I just want point out that I do to give feedback Where's seriously last year I gave a very very serious topic do here and that was the the fact that so this year decided the software things in the work of the of the of the and the then where kingdom angels like their need someone to like entertain a grant of the ones who can afford a comedian so like that interested in shoreline out of out they get that and then I was thinking about like you know will be like to Larry like what if what if I made an abstract for Fig talk and put it on the schedule normalcy is coming so so here we are I didn't really think it was in the pot of water the boat that I never thought I should brollies I I had a topic is on this I'm actually prepared for this like in advance and the wrote everything down on paper and like a joke you know they treat papers and then I was singing along on the news to make the slide after the speaker denarius state but then when I got home Thomas at me like I i've got all your notes so change of plans but anyway you have
been around 1 of you probably know that this is what I do here I and the canadian on team I represent a country and Canadian Ambassador to and that was me
I those near representing 10 on national TV or US at national through a years ago but since last year notice something different like these days when I meet someone you like before bring up anything usually usually they want before even brary thing they would tell me all like actually want to to Canada so was like while I'm probably this such a good job in the last years and not you need they don't really need me anymore so I am very proud to say I have
promoted myself to a world Ambassador this year and as part of my job I have traveled to quite a few places in the last 2 years and and last year and I will love to tell you about and because I'm aware
master I will like to call it the whole world to work but if you work for VC fund started probably more used to calling it an incredible journey which is the same thing so here you go 1st of on lots of
great through that really recommends buying time in their beautiful countryside but the only
weird thing is their government were on a trial version of a chain servers so they all platform has very limited capacity and a series of dialogs everywhere so
makes the same for and same is
busily tag combination is is not the government got really investing thing all the latest tourist attraction is this thing called sing Cloud forests where you can watch the interview as farmers grow combined with binary trees so that was pretty interesting for
me I can accept Spain I don't know
a lot about countries like you that before when but I feel like if the 1st Google search for countries like a real times I don't really need to say too much to promote this having also the point out that this is actually not become the complete list because of you might that there at least once you more meals in the oracle so that's stained for in a nutshell non Australia there was something I will point out there but I
never go out and so on but I do remember that for this flush the other way around so
that sad and then solve Korea the muzzle press something for me was that they have free
putting balls in there somewhere and I I couldn't read Korean but then like they have pictures to show you how to for all the people he was used this hour and
then in Japan and you probably know
that Japanese he will reorganize and they were provisionally and the secret is that they have standardized everything and you can go to the standard bookstores to like you know there are series souls like this I so I got a couple of years 6 when I was there in japanese so can't really read but anyway the last the
last not least since very well I I figure should appalling the shallow as well 1 of the best thing about for land is our we're able to support a lot of them local businesses so why are you here it would be great if you can help was sold by hashtag shot local from for example my favorite
clothing store is local but the cone and have you craving for authentic mexican
cuisine there's a little shop called private time and now if you're missing
from an I countries you really can is this traditional American restaurant in the northwest industrial area and yesterday I also learned they have the best coffee in town for him in the morning yeah and then
finally is you're looking to buy some artisanal handcrafted local software to take home with you but you can go wrong with this tiny shall uh in downtown Portland are they also higher anyway that's a wrap for our incredible journey and if you happen to run a conference in country and you're looking for someone to promote a city please you didn't touch the and with on a series of other way we can finally get to commonly section but what I really want I is a thing invented invented which I call the hierarchy of speed for and you might have heard of a similar concept in psychology or from today's keynote and this is where the psychologists and Tom you took inspiration from at the bottom of parody you have laws of physics and hardware there's little kernel code and then there's little use 1 code and on top of that you have a human factors so the reason this is a parity is because everything kind of builds on top of the layer below it so I'm and each layer adds a little bit of overhead so that every time improve the layer everything on top of that ultimately benefits from it the so over some of the major network as you make network faster everything we just down quicker and have to make this CPU faster you add would all make automatically when fastest over you have to do anything the and on the other hand the bottom layer also set an upper limit of how fast in me the the layers on top of that red so for example the speed of light that is constantly can change of physics work so if you make a network around from from here to back then it's Skinner even in the ideal world that's in cost you like at least 70 ms probably a lot more on that in practice on and it also turns out that we're getting pretty good at building these CPU's so the mouth time it takes for a signal to travel from 1 corner to the other corner of the city actually turns out to be from the placing a woman act on the bottleneck in upper bound on how fast we make use of these so what that means said as a Johnson as a judge would developers quite unlikely that you have to come go way to bottom of this pyramid and if you're and rather slow it's quite unlikely that you can get the blaming physics so instead of going and the whole thing will focus on a small part of triangle which the I call the hierarchy just the performance so I'm at the bottom you have just of engines like 8 right on top of that you have libraries and framework use like amber and on top of that since your application code unfortunately I only have 3 minutes and I read you have that on jokes so I can go very deep day and so in so this is going to be 0 . 4 where you get out like case tests of of everything that we can go all out like we can get into a lot of death for each topic um so my job here is primarily to give you a mental framework to about performance and we will all of trying to take that framework and applied to each of the layers here and finally will pop back up and talk about and the big picture and how these things interact with each other so let's start with the mental the framework so MLP and they're 2 ways to analyze right the 1st way is to look at this from the perspective of your time budget so let's say you have decided several important for active and render in like and the 2nd right so for about a MS right so a question you can ask yourself is how many operations union each of layers before you do have so as is not very scientific row sums and uh the apologize for using metric here are the things you do and just the engines tend to be measured in nanoseconds so and other things to do in the library has to be measured in microseconds and things to do at the high-level operations in in your application code tends to be mission milliseconds so if you do the math on that and then that's the have an operation that takes 70 ms in your application right then you only have to do it 10 times before you you have a budget on the other hand if it's a 15 microsecond operation and inside Emerald say on you have you can often times and likewise if you have a 15 on signing operation and engine it would be like you basically run 10 million times to have the same effect so to help you visualize it let's say you have a pretty complicated component that takes 50 milliseconds to and maybe some music and and then use a few other components decentering localization foreman and stuff like that are so if you put 10 of those on string the then on that would be half of the year 1 2nd right there so doing this have a very significant effect on 1 line on the other hand if let's say you measure the overhead of a computer probably a member it's say 15 microseconds right so in this case and you would have to do that and dozen times to have the same effect on AP and finally I let's see you worry about about the cost of allocating an object in just the red so mission that turns out to be 50 nanoseconds itself to which means that we did 10 million times you have the same effect and to Apple done perspective this is what it looks like that so I literally ran pixels on the means of the sky over things it's roughly 5 times the pixels that was on the previous slide so that's how it compares everything the so and there's some carriers here right for example rendering component the 1st time is always much more expensive because it doubled poet of the possibility of you want to capture some like that you can't really just multiplying numbers like that but he nevertheless it's still pretty good rule of thumb and the more of the story is it's always the case that you can make the most impact on at the upper layers of the pyramid so that's the time budget analysis and the other way to look at it as a look at a micro versus macro splits so amounting like macro means do fewer things overall and micro means you the same thing faster so let's say you have a loop belts like this the micro approach will be to us while polygraph why is it wise the sleeping millisecond that seems like a real long line of the macro approach is like women why are we sleeping and oftentimes like why we sleeping and I ap at all the now in the real world this is not going to be so straightforward will will look at some examples later but this is this is the rough idea of what I'm getting at and the other way to understand mycorrhiza micro splitters 2 of base on a persona right so sometimes you're an application developer sometimes you are working on open source libraries spread so you're putting on different what in different layers in those cases and so the way the Hank will look at
is the macro basically means improving your algorithmic of properties and the current layer that you're working on basically how can I use your things over my and versus micro would be how can I be smarter in the ways that I use the layer below so that's that's that's the that's the framework parts so now we can try applying this to you the layers we have on the left so let's start with the application layer if you recall we said that things are generally measured in milliseconds here that of the hypothetical example we have was found that the complaint exerting milliseconds to render from Harvard was hanging from usually is things like the network request witches usually a very easy way to blow tens or hundreds of milliseconds In a budget so if you are if you can find ways to eliminate that do it if you can use to blast do that if you can use service worker great do that repair so those problems are the lowest paying for but then those also pretty well understood so today I want to focus on a lesser known part of that problem which I call on it and it's so in particular will like the call tissue specific cases of this problem and the big data problem and vector and involved the so you let's see that the so what I mean by Big Data is that when you are dissolving feature you are probably working with a limited set of mopping and machine or like mock account on the staging server so everything is 3 thousand that however as soon as you deployed at to production you might be surprised that some of the customer will actually have a lot more data than you expect right so now so you're acting out you or perhaps building a new product that so at the beginning you don't really have a data and there also things of course of sites but over time your customers and a lot of data to the base and your app over time I lost ability to keep up with that so that's the big data problem and having a lot of it is intrinsically bad because you need to let down all those things and cost and so that's 1 of the problems but even if those times look as acceptable to you they're still in their free dangerous aspect of that is of which is the way they come out so this is the time that you know you wish you pay attention in the last class so let's say you're rendering 100 model which is perhaps a little too much of this and sound catastrophic yet that high imagined to render each of those model you need to render a computed property which compares dancing model to every other more right so then I suddenly without noticing that we are back to the 10 thousand magic number which if you recall is the number of times you have the called like of 50 microsecond operation to have the same effect as you like many components it so so so that's 1 of the way that this could creep up on you and the the out favor the problem which I will do briefly is the backtracking problem which is invalidating already flush content so let's say you have a uniform prior so you have a date that you rendering and then you render a big picture to change that so i'm however and that that receive matters folks on data-components you have some validation logic result of this is temporary for years and update doesn't exist so I need to do something by this effective default however you will notice that on the left and the pairing component we have already rendered the date field and now you're setting like this this is all a bit tricky because on this is bubbling up the air of to a bindings but there are also other ways for this manifests itself that the general theme as you already render something strain and now you sending it again in the same but render cycle so the only thing we could do at that point is to ask likes is a complete agreement and then rescheduled entire when the top to bottom again of which basically doubles your work so that's a bacterium from MLP and these are the the prime kind of problems that like framework should text for you so from since to 10 this is this this is now an error we are got much better at catching these cases and we have a much better error message for these things to get and from intercom so that's that's so let's recap so I owned by giving micro sir macro is in general approach to hand that is free of promotions in the aware of if you can avoid doing the work in the 1st place then don't do it if you can reuse the work by either foisting up the common operations or by adding catches do that right like another way to deal with that is you don't immediately need to work because is below the fold or you don't need it until the user try to interact with it and try to defer it until you actually need and then if you run of activation into then the micro things in the here is the basically as a set this is about how we can use the layer below smarter is in this case how can we help our Member out to be more performance so generally you should do these things but in hot and you have no other ways to do it and you can do is give in terms of the problem is the rendering component is too expensive for some reason other than the 1 of the work around so you can use the helper that returns a DOM node instead of using a component again usually does not necessary but on is that comes down to it like if you have a very hard and then this is something consider are likewise there's the unbound helper which is basically hinting at women to be smarter about how it handled of the content there and low the 1st 1 is not really available yet but I have an the that allows you to create custom components that are more tailored to your skis which might be helpful in cases where the performance of critical and so the 4 out of this layer let's talk about some of the tools that you have a new disposal to look at the problems in of this layer the so the 1st 1 is the network that in from the 2nd time slot actually the network that is basically every browser the timeline is more specifically chrome and the first one is the additional five-user timing API which is as far as I know implemented in most browsers so um
this is just very quickly this is the network cap and from Inspector basically show you that now we're requesting making which is again the lowest hanging for usually I and then this is the timeline view which is a little more complicated so take some time to understand that it basically tell you how many frames are rendering 2nd how much CPU using and you just the profile and things like that can finally the use of highly
API basically in doing the performance not marked and things like that to insert custom of points that you're interested in at this and you can you know like template the time you spent in particular things and the nice thing about this is actually what if you use the exam API would actually show marker in anachrome timeline view which is freely unites incremental to so some place that we don't have a long time to get into the details
of it if you have specific questions and talk about it after the talk the so the 2nd layer is the libraries layer so the hypothetical example ideas and this is not real number but let's say we're really worried about the kind of operations like and about gender and of manner on the outset retinal scans from low-level operations and so the thing libraries is they're written in JavaScript so it's not that different from the code the main difference is that on these things tend to be called a lot more times than you go right so you're you're component of the rendering 10 of them and 100 and that's many but it would not be surprising at all if ever get it's called tens or hundreds of thousands of times in like in a single render and also these school tend to be but quite generated in the in the sense that they're doing a very general purpose things so sometimes it's very difficult to think about ways that you can optimizer because the API so generous so again the macro strategy and this layer is basically the same thing I don't do work we use a work on the 4 and have some reason examples that I cannot again going to
of details that and 1 of the things that came to mind as recently and or up until recently the instantiating the 1st instance of the class number is somewhat expensive because we have to some extent your class 2 times for 2 2 at the factory injections as that's known as a double extend problem and Stern turns on the only reason we have to do that is to support the private API Collins below about factory so we did is on so we we basically deprecated that private API and expose the new public API factory for under this and have the same problem so that that happened recently and I think as of the current data we have the new and the new API but the new API landed in the last in to 12 basically and because we landed that in 12 into 14 and above we were able to eliminate the cost of the the extend which is being used I'm and I 1 by Robert is to are basically make some of the lesser of used features pay-as-you-go and finally on every is then redating
have been doing a lot of work on the and issues and as you can see there are a lot of pr as was reason version some part of them at the end of the last movies so about this place like roughly twice as fast so micronization and this
layer requires understanding engine which is what we're going to make so I will skip that for now and the tools on this layer is basically Hassibi profilers or sampling profile same graphs and a library that the do team was using to find all those issues of and so this is the CPU profile
and from which is basically the same thing as a just profile and the timeline view but it gives you more and more focused due to work with and then this is the same data represented using a plane graph I yeah I don't think I can explain that now all but we can talk about it more if you if you're curious later and then finally this is
from 1 of the the formula for and all which is what would they basically out it's similar to user timing guy in the sense that it lets you mark different phases in coat arms but it just has but API for tracking in a specially nasty things and also grouping them nicely um you can look at this
for request were data for more details so
let's get final layer so engines the so far so here is a quick organs for a for more injunctive engine will found images that fast so very briefly let's look at how the work I apologize for have that it will still be quite so I let's say you have a function c that takes a point and tried to calculate the of I guess the point vector and for account with the length of the vector which is square root explorable y squared so but the thing about C is the compiler can see all like distortions taking a thing called points and then you can what you're doing p dot x and p of y here but no problem because you know point is a struck and there's 2 fields therefore you know if point is located here then peter out x would be located on the 1st line and people don't why would be located in the 2nd slot and that's how you get access to the and the parts of the point seems to and however on JavaScript's of everything is a dictionary exploring recessive or a model right so I'm serious yeah there's no type annotation so when like you needed to this function like you don't know what is related to strengthen the number of nodes the and so now when you need to access Peter makes this with the runtimes like mocha like do you have a thing products in you find it for me I'll go get results so basically as you can imagine implementing everything as a dictionary would be very slow and so at some point in the 18 more like that I believe this is actually an optimization that was worlds from small Popper something from the visibly S you're part of creating an instance in actually and track what properties are in those instances and basically created hidden class for these things were also known as shapes or maps visibly diagnosing things so what you can do is when you call this function the you can basically look at all the what is the map or what is the heading phosphatase type and all OK it's basically a struct with 2 field seems good and where you can do now is you can say always this thing is that p and you can hardly basically what Hough 0 I would just offset at the this your position on the the 1st position and what this enables use just-in-time optimizations for as the Paul inference in unit I weighting the now as you can compile optimized version this is not a real annotation but like you would do for a purpose you can comprise special optimize version of land hard codes of PTB the the points tied physically and so on and everything else that falls that just folder assumption and you what you can also do more in line and so basically you can't come instead of actually calling method of power left the square root you can just copied implementation moving into here the nice thing is because you already know at this point that P is the point then you can also eliminate a lot of data checks and left of power of square root but it's basically the chickens and conditions so the tolls here are native syntax or natives syntactic from freezing our 102 to so the easiest
way to play with natives and for to explore his campaigns is to use probably so you can launch a node with that of while natives invites this syntax and you can see that if you create different object and their shape can use the percentage syntax to our check what type they the engine things that are and
this this is the prompt reason which is a thing you probably from coal social phrasing which actually show you on a low level and operations of the browsers doing and finally i
102 is a little of dark magic that and it's basically a tool that allow you to look at the compilation of that gate is doing and then it would also show you some information about the off switch unfortunately we don't have time to get to the um maybe it will show up in the blood flows in the future to however I would like to jump back to the big picture point it quickly and so
unfortunately we don't have time to go through the of stuff visibly on when you combine all the layers together they could interact in ways that we do not expect so at the end so even if your account and you still have to rely on very macro and and benchmarks to know that you want you can't and that you can actually achieve the possible change so our then retain basically role war called and bench which allowed us to the scripts building custom bills of amber and hasn't build off AP and uses of war that Chris book called from tracing the that basically launches from many many times for you and like good like this it is your own the courthouse how long to 4 rendered do it like a thousand times and give you error bounds and stuff so that was how we were able to make a lot of these micro optimizations and will working Glymour and things like that even tho they are like the in isolation very difficult to measure with confidence so finally 1 last thing is from 1 of the big picture promises 1 doesn't give her cat from Plato finds and not no 1 single person is doing a lot of things but then of because you're using different libraries or in different teams are responsible for different parts of of you I you and I'm doing a lot of repeated work or not a lot of good reason and no single party is responsible for it and then it think this is where the a framework like emperor really shine because we have a lot of opportunity to notice that notice these duplicated work and we can come yeah do some actual optimization that that are not otherwise possible by coordinating better by eliminating some of these repeated works think we will probably not doing as much as we could but I think we're in the what we're going plenty of those but I also think we're in a good position to do more of that in the future and so anyway that is my very quick tour of just the performance for you and thank you very much the you so I think that in the in the thing is
a mapping between the EU he thank and