Raw feed for #perfmatters LIVE at SFHTML5


PETER LUBBERS: Nice All right All right, let’s get started Everyone in the back, hopefully, you can hear me Come a little closer Amazing turn-out, tonight Wanted to give a quick, huge round of applause to Google for hosting us, for feeding us, for live-streaming us That’s incredible So a round of applause for Google [APPLAUSE] PETER LUBBERS: All right, tonight’s hashtags are here There we go All right, SFHTML5, perfmatters And wanted to also give a shout out to the folks from the Grant-Eddie Winery that are in the back Maybe a round of applause for them for all the great wines [APPLAUSE] PETER LUBBERS: And for Rocky, for DJing this great music for us He will be back in the break Thanks [APPLAUSE]

PETER LUBBERS: So I should have clicked through here a little bit All right So first of all, I want to thank you all for coming and say a couple of words about the sponsors that keep these events free and possible Again, the first one, specifically to Google Developers Live team doing a great, great job Jamie, Brian are here They’ve been working for four hours to get the live stream going So I also want to say hello to all the people that are watching live The last time I checked, it was close to 100 people live already watching around the world So thanks to them for putting it on Google Developers Live, by the way, is sort of our Google developers’ TV channel, if you will If you want to know more about developer tools, or mobile, or Chrome apps, just go there developers.google.com/live is the place to go All right I wanted to let you know about a great event that is happening in November It’s called the Chrome Dev Summit It’s really a chance for you to connect with the Chrome engineers It’s going to be in Mountain View Registration is going to open up in early October It’s going to be pretty limited seating, as usual, like 300 or so, we can fit in So registration will sell out pretty quickly But it’s a great conference We’re also going to be live-streaming that using the Google Developers Live platform So definitely look out for that There’s a link there– g.co/chromedevsummit How many of you are new to SFHTML5? OK, some of you So we have these monthly meetings We’ve had them now for over three years, every month, usually the last Thursday of the month But we have like one of these big events every month And we also host workshops and other events And our next event will be all about WebRTC Actually, it’s going to be two events We’re going to have three talks about WebRTC Chris Wilson is coming to talk about it We have a guy from vLine We have a guy from PubNub talking about data channels It’s going to be a great event And it’s going to be on October 9 Actually, the registration opened kind of quietly We didn’t announce it to the whole group yet So you can still get in And you know that may be hard sometimes So definitely sign up for that We have that event That’s a Wednesday evening That’s not our usual Thursday It is going to be live-streamed as well And then the Saturday following that, we have a great event, a WebRTC Hack Workshop So actually come in You get to run through a code lab or build your own WebRTC solutions We have a ton of WebRTC experts from Google and other companies on hand to really step you through It’s a really great way to get into that OK, I wanted to thank Adobe, one of our sponsors Of course, great tools for HTML5, and great stuff they’re building They’re extremely active on the web platform Docs Front And that’s a cause that’s really near and dear to our heart We really want to push that forward, get the right web documentation for all of the reference information of the web Also– [APPLAUSE] PETER LUBBERS: –a great event coming to San Francisco and the Moscone Center So it’s now, I think, the fifth version of it And it’s getting bigger and bigger and bigger It’s the week of October 20 There’s a day of training, two days of full conference, HTML5 DevCon I think most of you have been there If you haven’t, it’s an extremely good deal, and two days of full-on conference, followed by more training So there’s some great sessions Anne Burkett is here She can tell you more about it at the break But basically check it out, HTML5 DevCon What’s the date? October 22 and 23, and around that there’s days of training We have a new sponsor, PubNub They make software for real-time publishing and subscribing to data right in your application They actually have publish and subscribe as JavaScript functions, making it really easy to create real-time data feeds and applications around that OK, Bountysource is here They’re going to be doing a little lightning talk at the end of the first break So they’ll come back, and they will also be raffling off some great prizes And by the way, HTML5 DevCon will also be raffling off two tickets to the conference And there will be three Chrome Dev Summit tickets Peter, do you want to say a little bit about the Kaazing? One of our founding sponsors– PETER MOSKOVITS: Sure, thank you My name is Peter Moskovits And I’m here representing Kaazing Kaazing has been a sponsor of SFHTML5 since its inception

Kaazing has a high-performance, enterprise grade, very secure, very scalable WebSocket server We are a start-up down in Mountain View We have about 50 employees at the moment And we are hiring very aggressively So if you’re interested in evangelist roles, you’re interested in engineering, please come and find me Thank you PETER LUBBERS: All right Ben, one of our new sponsors Intel Ben, do you have a couple of words to say about Intel? BEN ODOM: Yeah Hey, my name’s Ben Odom I’d just like to talk a little bit about our new XDK NEW, integrated development environment for HTML5– totally redesigned, browser independent, works in Mac, Linux, Windows, totally free, has brackets integrated We use Cordova 2.9 It allows you to publish to pretty much every platform out there, Windows, Android, pick your favorite stores You can also do web apps So there’s some cards over there to tell you where to get it– software.intel.com/html5 Take a look Give us some feedback in the forums And we appreciate it Thank you PETER LUBBERS: Thanks, man [APPLAUSE] PETER LUBBERS: All right, so we have Vitamin T here, a special sponsor for this particular event Want to say a couple of words? GLORIANNE: Thank you PETER LUBBERS: We have a pretty long break, as well So you can meet up with the sponsors then GLORIANNE: Hi I’m Glorianne And this is Ariel We are here from Vitamin T So Vitamin T is a creative staffing agency We’re a division of Aquent, our parent company, which is the global leader in creative staffing So what do we do? We help people like you find jobs– front-end developers, visual designers, UX designers It could be temp to perm, freelance, full-time, contract, remote, off-site, whatever You name it, we can help So if you’re on the market, or if you have friends who are looking, please come and find us We’re in the back right next to the registration table And also, a little surprise, we have a giveaway, too We’re going to be raffling off this awesome GoPro camera So please, stop by Drop of your business card If you don’t have one, you can just put your name on one of ours And we’ll give it away at the very end OK, thanks so much PETER LUBBERS: Thank you, Glorianne [APPLAUSE] PETER LUBBERS: All right One of our special sponsor for tonight is Dice And I don’t know if you’ve seen it, the Dice Tech Trek bus is back in town That looks like this One of our members won this at a previous event and had a blast, basically, be taken all through San Francisco FEMALE SPEAKER: Yes, that’s right PETER LUBBERS: Tell us more about it FEMALE SPEAKER: So with dice.com, come and see us at our table If you register with dice.com, even if you’re not looking for a job, there’s all kinds of great stuff on there You can get a T-shirt You can get Dice pens But we’re going to be raffling off a couple of things tonight One with you guys, and one over here, back at our table But we’ve got the coffee maker But the best thing is an all-expense paid tour tomorrow night, for you and two of your friends And we’re going to take several winners And we’re going to go to dinner, and dessert, and a bar And we pay for the whole thing And the bus is amazing It was Lenny Kravitz’ tour bus Now, it’s the Dice bus So come check it out on the way out And we’ll stay around for a while afterwards So you can register at the table and go check out the bus PETER LUBBERS: Thank you All right [APPLAUSE] PETER LUBBERS: All right So hopefully, you all have a raffle ticket Because we have some great prizes tonight We have a Chromebook Pixel Some of these sponsor prizes We have wine from Grant-Eddie There’s actually two raffles for that There’s a regular raffle, wine prizes If you want to increase your chance for more wine, drop off you name for their mailing list And you get an additional chance to win All right, so I want to hand it over for the first speaker So I’m really excited about the four speakers we have tonight Actually, Jake and Paul came all the way from London And we said, wow, this is great You’re here in town Colt and Paul are already here Let’s do a performance talk with four speakers And I’m really excited The first speaker is Colt McAnlis He’s a past speaker He’s one of our alumni You know him from the Udacity study group that we’ve hosted here If you’re not familiar with that study group or if you’re not familiar with the HTML5 game programming Udacity course, definitely check that out We did this eight-week study group here, right in the Google office, actually So I want to hand it over to Colt Colt is a developer advocate at Google He focuses primarily on performance And a round of applause for Colt

[APPLAUSE] PETER LUBBERS: Need me to get that? COLT MCANLIS: Can we switch over my slides right there? Hey, real quick, everybody You have no idea how hard it is to plan one of these events, put it together with all of us crazy people, as well as the catering and the prizes Peter Lubbers and Vanessa and everybody involved with this meet-up had done an amazing job Can you give them a round of applause for free beer, please? [APPLAUSE] COLT MCANLIS: Yeah PETER LUBBERS: Thank you [LAUGHTER] PETER LUBBERS: You do have a mic on COLT MCANLIS: Yeah, I got a mic How am I doing on the live feed? MALE SPEAKER: Do you want the podium mic or the handheld mic for the room? COLT MCANLIS: OK PETER LUBBERS: OK, right COLT MCANLIS: How’s that? MALE SPEAKER: We’ll all just wave to you COLT MCANLIS: Can you hear me in the back? AUDIENCE: No COLT MCANLIS: No? How about now? Up more? PETER LUBBERS: One second, we’ll fix that OK COLT MCANLIS: We make self-driving cars, for serious [LAUGHTER] COLT MCANLIS: We can do this We can do this All right, we good? In the back, up? Down? Middle? Down? Bald? Someone said, I’m bald That’s not cool, dude I saw that [LAUGHTER] COLT MCANLIS: All right, we good? No, maybe, all right I’m just going to keep talking How about that? PETER LUBBERS: Yes, Brian, do we need to turn it up? MALE SPEAKER: As high as you can get it COLT MCANLIS: High as we can get it How about we do– PETER LUBBERS: Well, here Maybe we can do– COLT MCANLIS: Maybe Testing, testing, testing Put this down I don’t know How about I do the hand mic? How about I do that? How’s this? Is this better? AUDIENCE: Yeah COLT MCANLIS: How come when you get a mic in your hand and you’re in front of people, you just feel sexy? [LAUGHTER] COLT MCANLIS: You feel like you want to talk, talk to you I feel your pain, right? If there’s anything I could do to entertain a crowd while technical problems are going on All right, my turn Fantastic Hello, everyone My name is Colt McAnlis I am the team lead for the performance section of Chrome Developer Relations And tonight, I want to talk to you about the joys of static-memory JavaScript Now, I’m going to let you know that I gave a great talk at the HTML5 DevCon earlier this year in April And I had a little section in my talk about static-memory JavaScript And bar none, the most questions I got was about static-memory JavaScript And so I actually went back, and I actually wrote this presentation a couple months ago And I was very happy that Peter allowed us to do it tonight But it was really interesting Because when we tried to get this thing together, really it was a one-off shot, right? We had to get the guys from Europe in town, and they only had availability for a window And then we had to figure out what day of the week we had availability for Google’s facilities, and catering, and all this other crazy stuff And it was the most random shot in the dark for us to end up on September 19 Now, I’m in a room full of nerds Does anyone know what September 19 is? AUDIENCE: Aarrr! COLT MCANLIS: Yaarrr! AUDIENCE: Aarrr! COLT MCANLIS: Now, I’m a very simple man And I had to stand in the mirror a couple days ago And I had to ask myself, how much of a man I was If I could take this opportunity to give a talk on the most random shot day to be able to give a talk in front of a room full of my fellow nerds and actually do the entire thing as a pirate [LAUGHTER] AUDIENCE: Aarrr! COLT MCANLIS: My wife didn’t believe this was possible I showed it to her on Google, that this was a thing And so, I’m going to ask you, tonight, can we do this? AUDIENCE: Aarrr! COLT MCANLIS: Listen, ye bilge rats, I’m asking ye, can we do this? AUDIENCE: Aye COLT MCANLIS: One more time We’ve been givin’ ye free booze Give it to me again! AUDIENCE: Aarrr! COLT MCANLIS: Aarrr! Now, that’s the crew I be lookin’ to have tonight Aye Now, tonight, we be talkin’ about one thing in common We be slay’n the waste monster It’s vile tentacles be keepin’ your applications from going too fast I lost me leg and got a new one That’s why I hate it My name is Captain MainRoach And I’m here, not to save your bodies Because the monster be takin’ those I’m here for your souls Well, the application souls I really don’t care about you But we need a refund on– I’ll get to me point If ye be hearin’ anything from Captain MainRoach tonight that ye want to be tweetin’, make sure you be usin’ the right hashtags Because we had those back in the day [LAUGHTER] COLT MCANLIS: And also, be making sure that ye visit our website performance group on Google+ It be a great place for a bunch of mootin– mootineers? That came out wrong All right, this is a little well rehearsed Make sure ye visit it Sign up at goo.gl/webperf Now, listen here, ye mindless yellow-bellied dogs I’m not here to listen to wallow and wane about whether or not ye like the JavaScript garbage collector

I’m here to tell you that it be a vile beast It be takin’ everything from ye Because as it doesn’t it’s evil task, it’s going to be takin’ away a little bit of your frame rate every single time And I’m not here to debate yer dogma I dunna’ care what gods you live to Be that of manage memory, or static memory, or dynamic, anything else I’m here to worship one god alone And that be the one of application speed Can ye say, aarrr? AUDIENCE: Aarrr! COLT MCANLIS: One more time, aarrr! AUDIENCE: Aarrr! COLT MCANLIS: Aye, application speed So stow yer noise, tonight I won’t be debating whether or not JavaScript’s the best language or the worst language But I’ll be telling ye how to make your applications fast Because that’s why you’re here Aye? AUDIENCE: Aye COLT MCANLIS: Aye Yer learnin’ That’s good So I’ll tell ye the trouble with memory Now, many of ye may not be versed in the wild seas of sailing around memory problems But I’ll tell ye, I’ve been there I lost me hair, and me family It be a vile place to be From the depths of hell, memory management come and it take ye It take everything in yer life I’m here, but a husk of a man, trying to make sure ye do not follow the same path Let’s tell ye why So when yer out sailing with yer buccaneers, having a good time writing yer web applications, sooner or later, one of ye’s goin’ to drop dead [LAUGHTER] COLT MCANLIS: In yer web application, one of them will be running around, allocating memory or adjustin’ the DOM And sooner or later, it’ll have one too many pints of beer and die We’re pirates It happens But, now, I tell ye this It’s corpse won’t go away No, your crew have better things to do than remove it Instead, you leave it on the ground, festering, when the rats come and pick at its bones And the gnats come and lay in its eye sockets And the gulls come and feast on its flesh And only then, only then when the monster gets a whiff of the piles of corpses that you been leavin’ around in yer application, only then, will it summon it’s bulbous arms to yer poop deck Poop deck joke, that’s good? Poop deck? More poop deck jokes? OK And when this beast come and find yer vessel, it dunna’ know who’s living and who is dead It’s a blind beast filled with hate and rage It’ll bring its tentacles up aboard yer vessel And it’ll sniff every one of yer crew to figure out which one be inactive, and which one still be on the stack, ready to be used again at a future date [LAUGHTER] And when it finds its evil prey that it be eatin’ on, it’ll take it away from ye And only then, will yer dinghy be operating at peak efficiency, now that all the corpses have been hauled away on your behalf, ye lazy captain But I tell ye this The beast takes away as much as it giveth Because yer schooner be goin’ fast on its mission It be hittin’ 60 knots per second Everyone knows, that’s the magical speed of a boat And as it be goin’ at 60 knots per second, all of a sudden, those piles of corpses will rise high And you’ll hear it You’ll hear the vile beast comin’ from afar Its hate, and its dread, and it’s demon-filled life coming aboard yer vessel, and it’ll stop ye And it’ll take away those knots, and stop ye to zero And all of yer men aboard yer ship will stand there idly and wait for it to do its demon-filled task Meanwhile, your users are standing there, asking why yer ship is not moving [LAUGHTER] COLT MCANLIS: And ye can’t be like, it’s the monster It’s not me Because they blame the captain And then you get fired And ye have to talk like a pirate all day [LAUGHTER] COLT MCANLIS: And when it’s done with it’s deadly task, it’ll let ye on yer way, only to catch ye, again, in the future This be the cycle that it lives and breeds off of, your reluctancy to allow the corpses to lay around because you’ve got better things to do, like CSS Aarrr, I be a venture pirate from back in the days of C++, where a man had to manage his own memory, and his stack overflows, and threading problems, and kernel issues But that be a simpler time then We didn’t really have user interfaces It was mostly command prompt Moving on what ye be needin’ to know, is that this monster can strike at any time, any time it chooses It doesn’t matter what you think it should be doin’ It’s going to do what it wants, be it a CallbackHandler, or when the frame is updating, any time your JavaScript-style dinghy be floatin’ on the water, it’ll rear its ugly head as it sees fit And you should know that the most important thing about your vessel is that it stays constant at 60 knots per second It doesn’t care what ye want It cares for the flesh it’s come to claim Aye? AUDIENCE: Aye COLT MCANLIS: I see some scared in the house They’re like, where is he going with this? Are we talking about memory or fishing? I’m really unclear right now? [LAUGHTER] COLT MCANLIS: Don’t worry It’ll come down Now, here is a great chart, lads

You yellow-bellied sea betters may be lookin’ at me and goin’, listen to this angry man! He be thinkin’ garbage collections a bad thing I’m a friend with that beast We go drinkin’ on Friday nights No! It is not yer friend It’s just usin’ ye for free drinks on Friday nights I’ve been there once We’ll talk about that later If ye dunna’ get nothin’ from me diatribe this evening, I want ye to be rememberin’ this one This is a map built by the most evil of satanic of scientists that follow this beast around And what ye be lookin’ at here is two distinct groups of lines The first group is done by the responsible captains who send their crew to the evil task of managing the dead themselves Now, aye, it does take a little bit more memory for the captain to ensure that the crew is doing the right thing, tossing its shipmates overboard But you can see on the other side is the one where the kraken, the evil corpse monster be doin’ the work for ye Now, these lines mean nothin’ right now But I’ll tell ye what they do show On the bottom line here these numbers chart out how much memory the system has relative to the application it be runnin’ Oh, for yer nautical folk, how big the sea is compared to the size of your ship, aye? AUDIENCE: Aye COLT MCANLIS: Aye? AUDIENCE: Aye! COLT MCANLIS: Aye! More beer, aye! [LAUGHTER] COLT MCANLIS: Now, what ye be seein’ here is three distinct areas that I wish to be pointin’ out this evenin’ Because you’ll find the treasure soon, heh? First, is ye see the bad zone If yer memory is between two and four times the size of yer vessel, ye be screwed [MANIACAL LAUGH] You want to know why? Because this kraken beast, this hate-filled, demon, bile-covered spawn monster be larger than ye think And when the body of water that yer schooner be floatin’ in be small, it has nowhere to put its hefty load of lard So it must put it upon yer vessel, all the way on the poop deck Ye asked for more poop deck jokes I’m going to give them to ye You have to laugh now [WEAK LAUGHTER] COLT MCANLIS: Yeah, a pity laugh, right Now, when ye end up in this second region here, yer doin’ a little bit better You can see that four to six times the size of your memory requirements are ye be about average compared to what yer crew be doin’ manually This is about the sweet spot on mobile devices today These little devices that they have that track all of yer movements as yer goin’ about eatin’ yer food and plunderin’, an’ pillagin’, and all yer pirate ways, right? This is where ye be sittin’ with yer memory But, unfortunately, that’s not where the sweet spot be for yer vessel Nay, yer ship needs to be in a wide-open ocean between six and ten times the amount of memory that yer application be needin’ And it’s only then when ye start to see the hate from this vile corpse monster actually be mitigated Because the water is able to hold its massive rolls of flesh-eating, corpse-filling bile, drinking– fat Unless yer here, ye be screwed So make sure that yer JavaScript class schooner knows what the size of the water it be goin’ in If ye remember nothing, remember this graph tonight, aarrr AUDIENCE: Aarrr COLT MCANLIS: Now, I will tell ye, there be one vessel on the seven seas that seems to escape the corpse monster many times And in fact, many have said that it be the fastest JavaScript vessel in all the world It’s known as the SS Emscripten Do ye know the vessel? AUDIENCE: Aye COLT MCANLIS: I said, do ye know the vessel? AUDIENCE: Aye! COLT MCANLIS: Aye You want to know why it’s so fast? Because it’s captain is damned Aye Everyone really confused right now Is this an open source boat that we’re talking about? Because that means lots of people are damned [LAUGHTER] COLT MCANLIS: Open source boat, that would be interesting That’s a new Kickstarter Ha, ha [LAUGHTER] COLT MCANLIS: Ya-har! And the reason its captain be damned is because, ye know what he does? He doesn’t let his crew die Nay, when he sails from port, the first evil action he be doin’ is he slaughters the lot of them Slits their throats, standin’ on the deck and let the blood flow across the planks and into the water, where the sharks be feastin’ and the gulls be squawkin’ and nestin’ And ye know what he does? He brings a single shaman on board with his deck And that shaman doesn’t let these poor men die Nay, he keeps them in some tribal state of not-dead and not-livin’ Not dead enough for the corpse monster to come aboard He manages the dead objects on his ship, yaarrr Is anyone gettin’ that yet? AUDIENCE: Aarrr COLT MCANLIS: OK And what he’ll do is he’ll summon a corpse as he needs it and revive it and then send it back to dead by slittin’ its throat again Aye, this be an evil captain But what he does well is he escapes the kraken monster once again It can never seem to catch this SS Emscripten, because it

can never find it, because the corpses never rot and ripen You see, this evil bile-flowing, covered with boils and rank and fester, and alimony taking– umm, uh [LAUGHTER] COLT MCANLIS: OK, so I feel I should tell ye something It is true, the monster and I were once in love Ye see, I was a young buccaneer and hadn’t seen much of the world But, ye know, we grow, and we change, and the monster and I parted ways But we’re not here to talk about me tonight But he does take half of me doubloons every month My job tonight, to be keepin’ ye away from the path I be takin’ and teachin’ ye how to use the techniques of SS Emscripten to keep your dinghy moving fast So we’ll start with your own concept of a corpse pool So when ye be gettin’ yer mates on your vessel, make sure to slaughter them thusly Usually across the neck works fine Ye get any fancier than that, it’s just showing off I mean, really, come on We be pirates We simple folk Now, when ye need a task done or ye need a crewman to achieve a goal for ye, the best thing to be doin’ is revivin’ him Use your dark magic And what you’ll need to be doin’ is ye need to remember that this corpse, it has the memories It remembers who it used to be So when you grab it off it’s corpse pool, ye need to give it new clothes and set its properties so it cannot remember who it used to be, and instead, assumes the goal ye want And when ye have a demon-summoned, dead-filled, evil corpse to do yer bidding, you must usually make sure that it follows that path And it does the most evil, heinous thing that you can task it to, generally making the world a worst place for common folk [LAUGHTER] COLT MCANLIS: Take a second to let that sink in, a zombie on SEPDAT Yeah, that would get very awkward very fast, yaarrr And when yer done with it, much like the SS Emscripten, ye slit its throat, and put it back in the pool, and let it float away Again, this will keep the kraken monster from actually coming to board yer deck and takin’ away yer speed And this is some hieroglyphs from an ancient time But I’ll walk through them anyway Because I happen to speak it So you can see that to use such a thing as a corpse pool, the first thing you need to do is actually grab a corpse and revive it, and then set it’s properties accordingly, like where it will spawn in the universe, aarrr Do a jig Walk the plank And then when yer done, slit its throat, throw it back on the pool, and then make sure that any clothes ye may have assigned to it be cast overboard to Davy Jones’ locker He happens to sell things out of the locker That’s why it’s a locker It’s actually a second-hand pirate store, see, aarrr That’s where we get most of our clothes, aarrr What’ll happen is when you use this sort of pattern of corpse pools or object pools, what ye’ll be seein’ is that your memory will slowly grow over time It’ll be ridin’ a wave that will never end And yer ship may never come back to shore It’ll just slowly be increasing Now, what ye’ll notice, though, is that ye be spendin’ a lot of time in here, moving between all these ranks And it’s worth notin’ that under the hood, JavaScript may be doin’ something that ye not be planning as captain And as captain of your vessel, you’re in charge of its fate, aye? AUDIENCE: Aye COLT MCANLIS: It’s not in charge of your fate It’s a boat You’re the captain, aye? AUDIENCE: Aye COLT MCANLIS: So don’t let it do what you don’t want it to do, aarrr AUDIENCE: Aarrr COLT MCANLIS: Do ye know under the hood what happens when you have a pool of corpses and ye add another one to it? Well, if ye’ve actually maxed out the number of corpses and ye add a new one, you know what yer boat be doin’ behind yer back? It be creatin’ a new pool of corpses, double the size That takes a lot of extra memory I don’t know how to say that in pirate better That was a little failure That’s OK We’re doing this on the fly, aarrr Now, let’s say ye consider movin’ forward again And once again, ye get to the point where instead of 200 corpses, ye added yet another And then ye have move again to 200, to 400 corpses ye be moving to Now, what is interesting about this is that every time ye add a corpse to the pile, yer ship have to go back to bay and make more room Ye need to make changes to yer hull to accommodate all the corpses ye be havin’ layin’ around But once yer hull has been destroyed, you have to rebuild it So you have to deallocate the previous array in order to make room for the new one This creates more waste for the corpse monster to come and fester, and bleed, and take away from ye It’ll be takin’ yer time, lads It’s not a good thing, aarrr AUDIENCE: Aarrr COLT MCANLIS: Aarrr, ye gettin’ bored now Aarrr! AUDIENCE: Aarrr! COLT MCANLIS: Don’t worry, there’ll be more booze soon Really, what ye need to be thinkin’ ahead as the captain of yer ship, how many dead corpses will I need to get this job done? Yaarrr, tell that to yer manager That be CEO-level thinking there, yaarrr [LAUGHTER] COLT MCANLIS: Yes, yaarrr, ye see, we can ship a self-driving car But how many corpses can we fit it in, yaarrr? I guess that’s a question ye ask in Las Vegas, yaarrr

Some people got that So what ye need to be thinkin’ of is how many corpses ye need And instead of actually going back to harbor many times, and rebuildin’ yer ship, and getting more corpses, ye need to think ahead and hire the corpses and kill ’em ahead a time And the question that you have, as simple pirate folk who are very bad at math, is how do ye determine the number of people ye’ll need for this evil task ye be settin’ forward And mostly how many knives will ye need because they kind of dull over time Now, the proper way to be doin’ this is an iterative testing loop Again, that really didn’t translate to pirate Just follow with me It’ll make sense in a minute So as yer ship be goin’ out, ye need to be running tests Ye need to run through what ye think the average duration of your journey be And ye need to be figurin’ out how many corpses ye be needin’ over that time And every time, you adjust, and change, and rebuild yer ship And as ye be doin’ all this, ye be rememberin’– or loggin’ out– what your maximum number of corpses be, or yer average number of corpses, or how many of them are bald Then, ye be tellin’ me because then I’ll be upset with ye We’re mostly discriminated against, us bald pirates We don’t have the facial hair And so, we can’t go to all the parties, yaarrr Once ye average been done through this process and ye remember how many corpses ye may need for your final journey, only then can you embark And when ye do yer final journey, ye’ll know ahead of time how many objects to reference and keep and how many corpses to slay And what we’ll end up seein’ is that yer memory profile will look a little bit more stair-like, yaarrr AUDIENCE: Yaarrr COLT MCANLIS: Yaarrr And the number of corpses ye need will statically decrease And ye need not go back to the harbor so many times That means ye stay on the water longer, and ye stay faster more often, yaarrr AUDIENCE: Yaarrr COLT MCANLIS: The wind in yer sails be the best one about, aye AUDIENCE: Aye COLT MCANLIS: Now, sooner or later yer goin’ to need to slit yet another throat, even though you’ve pre-allocated yer corpses And when ye do this, ye need to be thinking back about what yer ship be doin’ without your knowledge Ah ha, ha Will ye let it go ahead and double the arrays every time? [INTERPOSING VOICES] AUDIENCE: Aarrr AUDIENCE:No AUDIENCE: Yaarrr? [LAUGHTER] COLT MCANLIS: That was the most awesome response Yaarrr? [LAUGHTER] COLT MCANLIS: Naarrr? [LAUGHTER] COLT MCANLIS: Nay? AUDIENCE: Nay COLT MCANLIS: The best was I saw one guy over here look at his buddy to go, yar– nay– nar– no? [LAUGHTER] COLT MCANLIS: What if we just say, no You think he’ll point us out? Quit talkin’ He’s lookin’ at us The answer is, nay Ye not be lettin’ the ship do what it wants You’re the captain You make the rules, yaaarrr? AUDIENCE: Yaarrr! COLT MCANLIS: And instead of allowin’ it to double in size every time, as yer application needs it and yer DOM changes and yer objects move, ye be using what we call a linear growth array, where instead of actually usin’ the standard array object, ye be usin’ a linked list of type static arrays So as ye add a single object, rather than doubling the size of array, ye only increase it by certain amounts Ye can be 100 corpses, or 1,000 corpses, or a platoon of corpses if ye choose Either way, they’re the King’s men, and they’re free, ha, ha, ha, ha, ha, ha Sorry, for the British in the audience Yes Now, the linear growth array, actually, be good, because ye be amortizing the cost of the corpses over many, many corpses So every time ye allocate a new array, you’re actually amortizing the death of all those because ye do it once, ha, ha, ha It’s tricky pirate math, ha, ha Look, that be easy to do in this structure Ye can simply index into it with a little bit of magic and fluff and dust Ye be findin’ what ye need However, deletion damn need be impossible I do not recommend that [LAUGHTER] COLT MCANLIS: Don’t do that during a job interview It will reflect on you badly I’m not saying I’ve done that But do not try that The point here be that this is an app-suited container for the growth of static corpses on yer vessel It allows ye to grow It allows ye to preallocate It allows ye to stay fluid when times change, yaarrr And that be the pirate way, he, he Now, for all of ye in the audience, ye may be saying to yerself, I have no freakin’ clue what my memory be doin’, yaarrr? AUDIENCE: Yaarrr COLT MCANLIS: Welcome aboard, mateys [LAUGHTER] COLT MCANLIS: That was the most hearty yaarrr Yes, I have no idea what yer talkin’ about [LAUGHTER] COLT MCANLIS: I am so lost right now [LAUGHTER] COLT MCANLIS: Thanks for playin’ along, lads For those of ye lookin’ to understand what’s going on under the hood of your deck, ye need to be lookin’ at a couple tools To start off, stick with Chrome Developer Tools It actually be givin’ ye a pretty good understanding of how many corpses and objects be used along the duration of yer trip over time And with new tooling on the bottom, it’ll actually tell ye what heap these corpses be coming from, be they the audio heap from the southern regions of France, or they be the rendering heap from Jamaica [PIRATE LAUGH] They be a spicy lot, lads [LAUGHS] Anyhow, stop here Make sure ye run yer application through the tools Figure out where yer memory is going and adjust accordingly Ye be the captain, aye? AUDIENCE: Aye! COLT MCANLIS: Another great tool that’s just come out

However, this shitty picture was all I could find on the internet [LAUGHTER] COLT MCANLIS: Because for some reason, they don’t have anyone who could put up a more high resolution photo of the damn tool There’s a good tool called Adobe GCview And no, I couldn’t get it workin’ So I couldn’t take the picture myself, yaarrr This is a fantastic external tool that will allow ye to do memory profile analysis for multiple different browsers, yaarrr So for those of ye out here who may be sayin’, oh, Captain MainRoach, yer kind of off the plank with Chrome only, check this out But seriously, put up a better picture That’s kind of embarrassing I’m a pirate and I’m callin’ ye out, yaarrr So lads and lasses, my crew tonight, thank ye for listenin’ to me Let me give ye some tips on how to avoid this evil-buildin’ mulch monster First off, know that this monster be eatin’ away at the speed of yer ship And that not be good If you don’t see that garbage collection be hurtin’ yer frame rate, yer not tryin’ hard enough Build a better application Yaarrr, I’m callin’ ye out, yaarrr AUDIENCE: Yaarrr COLT MCANLIS: Yaarrr T-shirt for that man The of ye to the planks High corpse churn summons the monster If ye be movin’ lots of objects around and not doin’ yer duty, then the corpse monster will find ye It’ll slow down yer vessel And then, ye’ll be cursin’ all day long And I will be sittin’ back laughin’ [MANIACAL LAUGHTER] Kill yer crew before ye sail Sail them as zombies I dare every one of ye in here to tweet that right now Kill yer crew before ye sail #perfmatters [LAUGHTER] COLT MCANLIS: The bald pirate told me to say it I’m not crazy Know yer corpse count by testin’ yer voyage ahead of time Be the captain of yer vessel Don’t let it control you You’re in charge, yaarrr AUDIENCE: Yaarrr COLT MCANLIS: That one hurt Hold on Oh– I needed to stretch my yaarrr When ye need more corpses, make sure ye linearly grow Don’t allow the ship to do it Ye do it yerself In honest, I miss the corpse monster We did separate And there were little ‘uns involved But ye know, we’ll be back soon With the new primitives in C++ 11, there may be a chance to get a better high-performance allocation system, where I may not have to manage my memory myself That’s a separate discussion Anyhow, yaarrr, thank ye all for listenin’ to me tonight And I’d like to remind ye that we won’t be takin’ questions, now But we will be doin’ it at the end of the night in a fireside chat manner, yaarrr Thank ye be for listenin’ tonight AUDIENCE: Yaarrr [CHEERS AND APPLAUSE] PETER LUBBERS: Thank you, Colt All right, Colt, we have a special gift for you, yaarrr COLT MCANLIS: Thank you very much, yaarrr AUDIENCE: Yaarrr PETER LUBBERS: OK COLT MCANLIS: Another round of applause for the great SFHTML5 team, yaarrr [APPLAUSE] PETER LUBBERS: All right, so for the next talk, we have Paul Lewis He came all the way from the UK And he’s a developer advocate on the Chrome Developer Relations team specializing also in performance He knows a lot of WebGL, and it’s been just great working with Paul for the last– what? About a year now So Paul, are you mic’d up already? OK, great We have your laptop here We’ll just switch over Oh, the same? MALE SPEAKER: [INAUDIBLE] PETER LUBBERS: Yeah, OK We’re switching over to laptop Like I said, we’ll have one more talk Then we have a pretty good break for about 25 minutes We’ll have more time to hit the different sponsor booths and so on There’s wine And there will be dessert as well So let’s just switch this out right now And then, we’ll have plenty of time for a break Again, a couple of great raffle prizes, conference tickets, and a whole stack of wine and so on So hang on to those raffle tickets We’ll have two more talks after the break And then we’ll have a Q&A panel So we don’t take questions right now We’ll just wait for that at the end And we’ll just pass the mic around the room OK All right, so, one moment OK MALE SPEAKER: We’re a good team PETER LUBBERS: [LAUGHS] MALE SPEAKER: All right, thank you Do you need to put it behind this [INAUDIBLE]? PETER LUBBERS: Hmm? MALE SPEAKER: Do you need to put it behind this? PETER LUBBERS: Maybe So it doesn’t fall OK Does he need this? [SIDE CONVERSATION] PAUL LEWIS: All right, I got it I’m good You all good? You can hear me? [INTERPOSING VOICES] PAUL LEWIS: Yeah? All happy, huh?

[IN PIRATE VOICE] Now ye may be noticin’– [LAUGHTER] PAUL LEWIS: –that today– [LAUGHTER AND APPLAUSE] PAUL LEWIS: But I think not [LAUGHTER] PAUL LEWIS: Yeah, but what I thought I would do is I thought I’d take a step back for us now, and I thought I’d visualize the speakers for you by help of a trustee Venn diagram Now, on the left, we have bald people On the right, we have Pauls Colt, firmly in the bald camp Professor Irish, firmly in the Paul Me, making up the middle, the intersection, if you will But unfortunately, we have Jake– [LAUGHTER] PAUL LEWIS: –who’s thinning up top and trying to get into bald I wish him well [LAUGHTER] PAUL LEWIS: Now, what I wanted to do is set the scene And I feel like resetting the scene Talking about rendering performance, there’s a lot of people who kind of go, eh, I’m not so sure What’s he mean by rendering? This performance chat– and often, what we’ve done, I think, is we’ve gone, OK How long does this thing takes to load? How many requests am I making? Have I got GZip switched on? What about eEtags? They’re dead Ew, I don’t know what to do And I understand why we’ve done it But the thing is, it’s only part of the picture OK, it’s only part of the problem, because as Colt discussed with the memory thing, you know, that’s something that doesn’t fit into page load time, right? And that’s a part of performance So it’s a little bit of a question And so, what I thought I’d do is just a quick, highly technical chart for myself of two apps App one is fast to load and slow to render And App two is slow to load and fast to render And which is worse? Which is better? Well, the answer, of course, is both of those are going to hack off your users They are not going to be happy with you So it matters So what I thought I would then do is take us through the pipeline a little bit like this The idea here is from a page load perspective– because that means we will hit every part of the pipeline– I want to get through from how the browser does a request and gets pixels onto the screen That’s actually the job of the browser It’s there to get content on your users’ screens So it’s good to understand it And then when your users are scrolling, and dragging stuff about, and just generally using your site or your app, then we’ll hit parts of this pipeline again So it’s good to understand it And this is part one of two Because I would normally talk about the DevTools-y part of this, where you can figure out how your project is actually working But Paul Irish is going to actually do that part later on So think of this as a scene setter, a part one, if you will Now, we start off our journey with the humble GET request, like so Our server is going to respond for us with some HTML, all pretty awesome And the first thing that the browser is going to do– and it does clever stuff with doing streamed, and look aheads, and all this kind of stuff– but it starts to parse that And when you look in DevTools, you’ll see things like Parse HTML, which is this process, really, of taking our tag soup and turning it into this, which is the DOM And that’s the DOM for that HTML So we’ll just make our lives a little bit easier and just call it the DOM And then what we do is we take the CSS, and we’re just going to add that plus in there We take the CSS, and some of that CSS will come part of the browser as the default style sheets With the browser, there’s the stuff you put in line There’s the stuff that’s in your style sheets And we start to actually figure out from the DOM what CSS applies to what And historically, people have spent quite a lot of time trying to optimize CSS selectors, you know, how quickly And it’s actually a bit of a waste of your time because the browser is very, very, very fast at doing selector matching So just bear that one in mind Anyway, this will show up in DevTools as Recalculate Style So what happens– and I’m about to do a sound effect, I can feel it coming on– we put these together like– [FART NOISE] PAUL LEWIS: –that [LAUGHTER] PAUL LEWIS: And we get the Render Tree Paul Irish is happy with that noise He’s happy with that Now, the Render Tree looks distinctly like the DOM, except that things are missing, like the head, for example, or a script They’re not there because we’re not going to render them So they don’t appear in that tree

But let’s say, for example, I decide that in my style sheets I’m going to put section p– boop I’m going to say, Display None That will disappear from the Render Tree because it’s set to Display None It’s not something we’re going to draw It’s not something we care about Equally, I could have a pseudo element, and that would add something into the Render Tree So the Render Tree, as I said It looks like the DOM, but it’s not the DOM It’s the styles applied to the DOM So that’s that Now, the next job– and it’s going to look like a really simple job We’ve got all this CSS that we want to apply And it’s basically like widths, and heights, and display blog, position absolute, all this kind of stuff And what the browser has to do is take that and go, whoof, where does everything live on screen? Why are there boxes here? And as you probably know, this can actually get extremely expensive because everything tends to be contingent on everything else So if I were to change the height of Body, everything that’s inside Body needs to be recalculated And this will show itself up in DevTools as Layout And, yeah, that’s where all those boxes are coming from Good So the next job that we have is to actually fill in some pixels We know where those boxes are But they now need filling in with pixels So we need a rasterizer Now, just a bit of terminology in case you don’t spend your time looking at this stuff Vectors are basically shapes that we have the mathematical formulae for, or we have the positions of the corners, for example, in the case of a triangle But we’re interested in actually pixels So what we actually have to do is we have to figure out from our triangle which pixels we need to fill in and what color they need to be And this is the process of converting vector to raster OK? All pretty simple Now, if you and I were to have a fun afternoon and we were to create a rasterizer, we’d probably include methods like this And I know that we would, because these are the ones from Chrome’s rasterizer, which is called Skia And so you can imagine there drawPoints, drawOvals, drawRectangles, drawBitmaps, draw some text And if you’ve worked with the HTML5 canvas, a lot of this stuff will actually look quite similar It’s the rasterizer, basically So now what we can do, I actually run that HTML through Skia and said, what did you do? And it told me So if thought I’d show you what it does Ta-daaa! But you probably didn’t see what was going on So why don’t we have ourselves an instant replay Now, you’ll see that as we get through each of these calls, we’re starting to build up the picture of what’s actually going on Draw around the rectangle, which isn’t that clear, but that’s the drop shadow Draw the path Here we go Draw the bitmap, which is my face Do a bit of tidy up, and we’ll call it a day DevTools is going to show you that as Paint That’s how it goes about letting you know that it did some of that work Now, some of this bears a little bit more scrutiny, I think, specifically, drawBitmap Now, I was a good developer I sent through my tiny JPEG I compressed it I’m good on the page load time I’m happy Well done, me But you’ll notice that it’s called drawBitmap and not drawJPEG, or drawPING, or drawGIF– ”jif,” “gif”– Hands up for “gif.” Ooh, it’s going to be close Hands up for “jif.” You’re wrong [LAUGHTER] [APPLAUSE] PAUL LEWIS: There not “jraphics,” are they? [LAUGHTER] PAUL LEWIS: All right? Anyway, so now, we have our JPEG And we basically go through, and we’re going to decode out an image into a bitmap– red, green, blue, and possibly alpha But the thing is, we’re also maybe doing a bit of responsive web design So we also have to do some resizes as well on the other side So these are extremely expensive They show up in DevTools You can spin down Paint records And you’ll see image decodes and image resizes And they will kill your frames per second, if you have them, particularly, resizes, actually OK, so we spent some time we drew a bitmap The next thing we want to look at is– we’re quite fancy– we’re going to do a bit of animation What we’re going to actually end up doing is we’re going to move that picture of me up to there Now, when this happens, we basically took this rectangle around everything and said, this is now damaged and dirty This area needs fixing This needs repainting So we actually have to step through one-by-one and re-run all those commands with the drop shadow, and the white box, and the bitmap And it doesn’t take much imagination to figure out that if we have a lot of things that need painting, or we move something a really, really long way, that could be a

hugely expensive thing that we just did So what we do to work around that is we do these things called layers Instead of having one surface that we rendered into, that we rasterize into, we have several So this is my website And actually, the masthead thing is a canvas So why don’t we boost that out a little bit Now, what happens is we can basically do this So that when we want to change something in the masthead, we don’t have to worry about repainting the thing behind We keep it separate This is extremely useful What’s also interesting about this– or at least to me, because I’m a nerd– is the Next and Previous buttons are actually DOM elements on their own, right? But they’re sitting on top of something that was just boosted out to its own layer So what Chrome ends up doing is it ends up creating more layers, just for those So you actually end up with four of the suckers And these all get sent across the GPU, which we’ll talk about in a second And then composited layers is what you’re going to see in DevTools It’s taking all these layers and all this stuff And it’s basically going, “schwip,” putting them all together again, figuring out what layers it needs, where they need to live, all that kind of stuff So those are the layers They’re pretty cool And you might be asking yourself– I hope you are– how do I get a layer? That’s exciting to me You’ll notice it’s subject to change because it’s an implementation detail But all the same, let’s have a look at them 3D or perspective transform, anybody use the node transform hack? Anybody translate z happy? Yeah? Work for you? Good OK, that’s the classic one Video elements, canvas elements, composited plugins, like Flash or Silverlight, an animation on opacity, interesting Transform filters, like Blur and all those ones And then the last one, which are my Next and Previous buttons Those are rendered on top of another layer So those are the ones You could imagine that we might add some more We might So the last little part– and this is the website from tonight– is to actually take those rastered images and send them across the GPU Now, the thing to bear in mind, all that rasterization that we did was done actually on the CPU And when we do rasterization– this is a small detail I just wanted to include it for completeness’ sake We actually rasterize into tiles It doesn’t make any difference to us as developers, but I just like to include it, I don’t know So there we go That doesn’t matter for what we do But we have the CPU All this work so far has happened on the CPU So when people are talking about hardware accelerated this and that, so far, everything we’ve done was on the CPU The last thing that we actually end up doing at this point is sending those tiles across to the GPU Happy days And that was a nice simple animation But the bandwidth between CPU and GPU might be quite constrained, especially on a mobile device It’s very easy to saturate that link And if you’re doing a lot of repainting, you’re just sending a lot of stuff across to the GPU, you might really struggle So it’s a finely balanced thing Anyway, that’s going to show up as composite layers And finally– whoosh, there we go– we end up with something on screen So now we know how you get from the humble GET request all the way through to some pixels on screen So with that said, I am now interested in the bit where we control the workload I really want to ask [PIRATE VOICE] are ye the captain of yer ship? Aarrr! But I’m not going to But we are And so, seeing as we’re in control, let’s talk about some millisecond stuff for a second Let’s frame what we’re interested in When a user interacts with your site or your application, we have 100 milliseconds in which to respond for that user to feel like it was an instant response If we take more than 100 milliseconds to respond to the user’s interaction, we have failed They will notice The second thing that we care about is 16 milliseconds If we’re doing anything like scrolling, or dragging, or anything that’s regularly animating and updating the screen, we have 16 milliseconds in which to get all the work done So this is just to frame our argument here– response time, 100 milliseconds; frame time, 16 milliseconds OK? Bear that in mind Now, all I’m going to do at this point, as I said, normally, I’d show you some DevTools But I’m going to just talk about some stuff you want to look at, some stuff you need to be careful of And then Paul will actually run you through DevTools and the tools that are available to you Small style changes can have big layout knock-ons If you’re, say, changing Body, as I explained before, we have to re-layout everything Huge deal if you’re trying to do that in an animation, for example You decide you’re going to change some high-level element, like one or two levels into the DOM, everything’s probably going to get recalculated That will kill you in terms of your frame rate

This is something of a common misconception, that layout is somehow always triggered by JavaScript It’s not You can have a transition that’s in response to a hover It’s not done by JavaScript But it’s layouts all the same And layout isn’t painting Now that you’ve been through that pipeline with me, again, there’s often a misunderstanding the layout is, somehow, painting But actually, if you do change the position of something, we might need to repaint And we’ll have a look at something that’s doing that in a second There’s a thing that looks a little bit like this And the code, it doesn’t really matter too much what the code is doing But I’ll tell you what it’s doing anyway, just for a laugh We’re going through some paragraphs And we’ve got some other element that we want to match the widths of all our paragraphs to So the first thing we do is we ask for the width of this thing called “green block.” Now, we asked for its offset width, which causes Chrome– and, in fact, any web kit or blink-based browser– to go off and do a layout operation Go, what’s the width of the green block, please? And then, we set the first paragraph’s width And then we go through that loop over, and over, and over, and over, and over again And that is, effectively, read, write, read, write, read, write, read, write, read, write And that’s not a good thing Because every single write invalidates the previous read This is called layout thrashing You do not want this in your applications What you wanted to do– there we go– was to ask for the width once Read, write, write, write, write, write Happy days Paint– show you this demo, right There’s this brilliant tool called “show paint rectangles.” If you’re ever wondering whether something’s painting in Chrome, that is your tool And what’s going to happen is, see, I select some text, right? And you get this red box around it And that’s, basically, Chrome saying, I had to do some repainting here, Paul Thanks, Chrome I expected you to do it, and you did You’re so reliable Anyway, so what I’ve got is I’ve got these buttons, and your scroll bar– that’s getting repainted– now, I’ve got this button up here that says Animate It is a highly realistic animation Look at this, woo! Now, the interesting thing here is that this one big area needed repainting because we’re moving everything inside But we can also figure out that they’ve all been flattened down to one surface, one layer that we’re actually painting into, right? So this is the thing that’s getting invalidated It needs repainting That might be slow So we’re quite smart What we want to do is we’re going to use the translate z hack to isolate all those boxes And all we’re doing is moving them around, and the GPU is really good at just moving stuff around It’s fantastic at it So we’re going to do that There we go Change them to black, just so it’s a bit easier And then, you see, we’re not painting anymore Because we painted them once, all these layers And then we just asked the GPU to move them around This is an awesome way of using the translate z hack I’ve come full circle I used to hate it Now I love it, just for this reason The danger that we then have is– I’m just hovering over it in this– animate the radii Now, these boxes have a slightly rounded corner What I’ve got is I’ve got an animation queued up that’s going to change the border radius of each of those boxes Ready? Aa-aa-aa-aah! Daah! Look how much it crawls! So it’s not always a good thing to isolate everything and put a translate z hack on it Because you can end up creating a lot of extra work if you end up having to paint each one of these things These all need rerasterizing And then they all need copying over to the GPU Eeew! Should be what you feel So this tool is amazing When you want to figure out, is something getting repainted? What’s getting repainted? Switch on that tool, have a look at what goes red If you see a big red flash across your whole screen, you’ve probably got a problem OK? So that’s a good way to find that out So painting, avoid it You can’t avoid it on the first time you page load But you want to try after that You can promote elements to isolate them If you have one element that is moving around and maybe does need repainting, promoting it is, actually, often a really good way to just make sure that nothing else has to be repainted unnecessarily But bear in mind that it can also spoil other layers like I showed you with the Next and Previous buttons You just want to be careful with it Layers themselves do actually have a knock-on effect for memory, the management, and the transfer, as I mentioned So just be careful with that Often people say, well, how many layers can I have? And there isn’t a good answer to that Because it depends on the device that you’re talking about and whatever else you’re actually trying to do

So just profile it and see if you can see how your frames per second’s doing and respond to that, really Paint storms, we were debating this term earlier, what it really means What it really comes down to is you wouldn’t want to be caught in an actual storm You don’t want to be caught in a paint storm, either It’s generally you’re doing paint that you shouldn’t be doing You’re either painting too much, or you’re painting too often, all those kind of things It’s just a nice name for saying it’s not what you want to be doing You’re doing too much paint So don’t do that Interestingly, because the GPU is exceptionally good at these things particularly, they often don’t cause paints If you something, isolate an element and then monkey around with it, so opacity and transforms, we won’t be repainting Like those boxes, they didn’t repaint Happy days We all smiled a happy smile Image decodes and resizes, those are done on demand So when we’re rasterizing, we hit one of those drawBitmap calls, we actually queue up the decodes and resizes So it can make for very sporadic frame rates, let’s call it Because we do it on demand So when something comes into view that we need to rasterize, we go and get the image We decode it, which could kill us And for all intents and purposes, that’s not a good thing So bear in mind that handling images is expensive You can’t really avoid images on the web But just bear in mind that handling them is expensive So you want to see if you can mitigate it And one of the best ways to do that is actually avoid resizing them when you can And I say that, uh, frustratedly Because responsive web design is A, popular and B, quite cool But it does put a really heavy tax on the browser So if you’re going to do it, just know that there’s a tax And be happy to pay the tax There you go Now, requesting an animation frame, if you’ve not come across it, when you are changing things on-screen, please avoid these They are not timed to the browser’s refresh cycle So they will just run whenever suits, and that could be at the worst possible time for the browser What you want to do is use friendly green requestAnimationFrame It’s so helpful Anybody use jQuery? Yeah? Anybody us jQuery animate? Yeah? OK It currently uses set interval I would love that to change In fact, I actually double checked that from the jQuery source It does use set interval There are patches that you can apply that then switch it back to requestAnimationframe, simple enough thing to do And it might be worth it for your project if you are using jQuery animate, as it stands today Scrolling performs is a big, big deal, actually Because most the time, people scroll on the web Apparently, it happens quite a lot Scrolling then, it does cause paints Because as content becomes visible, we have to rasterize We have to paint that stuff So we want to make sure that when we do it, we keep things light The easiest thing to do with scrolling is to avoid doing anything There’s a really good one, actually, that you might want to look at It doesn’t take too much imagination If you were scrolling through and you trigger a hover on an element, as you’re scrolling, then we have to repaint the thing that you hovered Then you keep scrolling, and you hover out And we have to repaint the thing that you now hovered out, just because you were scrolling past it Now, if your hover effects are really expensive, that’s going to be awful What you want to do is you want to, basically, switch off anything changing So you basically add a class or something that basically switches off hover effects while your scrolling You know, waste a little bit of time Then switch them back on again Happy days There’s a “HTML5 Rocks” article about that, that I wrote Pretty good [LAUGHTER] PAUL LEWIS: I, mean the idea is good It wasn’t my idea I just wrote it up Anyway, debounce scroll handlers What do you possibly mean, Paul? I mean this If you aren’t a scroll listener to your window, in this case, don’t do anything inside that scroll handler Please, for the love of all that is decent, don’t do it What you do, store the value if you need to Great Super And then schedule a requestAnimationFrame to handle the scroll, the thing that happened Because you could get 5, 10, 20 of these events But really, you probably only want one You want the last one, most likely, to know the current scroll position because you’re doing a parallax site [LAUGHTER]

PAUL LEWIS: What? Whoo! Just because it’s cool, doesn’t mean it’s right [LAUGHTER] PAUL LEWIS: Just throw that out there, if anybody’s listening OK, last thing I want to do– because we’re running low on time– is just do a little bit of myth-busting JavaScript, you’ll notice I haven’t talked about it at all You, maybe, thought I would, right? Because when we’re not talking about page load time, we’re talking about JavaScript and how slow it is and horrible But it’s not, actually Work is often triggered by your JavaScript You maybe changed your class with dot class name, or class list, or something, whatever It’s often triggered by JavaScript But the work that’s actually running is often carried out in C++ Layout is not done in JavaScript Layout is done in C++ It’s done lower down So bear that in mind And slow JavaScript– you know, this idea that, oh, JavaScript is slow And that’s why the mobile web is slow No, it’s not actually the reason most of the time Because it’s not JavaScript that’s actually running It’s the other stuff that’s inside the browser that’s actually running Unless you’re making a game or– there are classes of applications that do rely on JavaScript quite heavily I do want to say that I’d like you to start treating JavaScript benchmarks with deep, unyielding cynicism Because JavaScript probably isn’t your bottleneck Layout probably is your bottleneck Paint is probably your bottleneck So you know, if you start seeing, oh, it’s really fast– with JavaScript Yay! And then, the other thing is, the DOM is slow You hear this one quite a lot for fairly similar reasons to the last, actually Interacting with the DOM is, actually, quite fast, as it happens The problem is that changes to the DOM probably incur changes that are layout or vCalc style, layout, paint, composite– misery So be careful Now, going forth, aim for 60 frames per second It is well and truly achievable You control the browser’s workload You are, in fact, the ship’s captain –I brought it round Performance is a feature It’s not a unit test It’s not something, you get to the end of the project, am I fast? No Aah, ship anyway Nobody will notice Wait until they complain That’s what we’ll do No, think of it, put it on the list It might be two, three, four, but make sure it’s on the list Ideally, put it number one I do I love that Profile, then fix A lot of times you’ll read things that are like, this is fast Do this And that’s fine Sometimes you need to do that But you end up writing things that don’t fix the problem you’ve got You end up writing something that makes Paint better But you’ve got a layout problem Profile, use DevTools Paul will show you how Profile your stuff Figure out where you’re actually slow Then fix that thing Sounds simple enough, because it is Profile early Profile often Smile a happy smile Do it Thanks [APPLAUSE] PAUL LEWIS: Time for a break, isn’t it? Yes PETER LUBBERS: Paul, thank you for speaking Here’s our San Francisco HTML5 speaker gifts PAUL LEWIS: Oh, cool PETER LUBBERS: Original painting– PAUL LEWIS: Well, thank you all FEMALE SPEAKER: And here you go PETER LUBBERS: And a little bit more PAUL LEWIS: Thank you very much PETER LUBBERS: All right, thanks, everybody We have a break We need to be back here, seated, around 8:00, not too much later to keep on schedule We have dessert out We have more wine, beer, the sponsor tables Check it out Enjoy [MUSIC PLAYING]

PETER LUBBERS: –announcement by Glorianne


MALE SPEAKER: Testing, testing, one, two, three

GLORIANNE: So hi, everyone! It’s Vitamin T again And just want to make an announcement about the GoPro camera So this drawing is separate from everything else You have to give us a business card in order to be considered We weren’t part of the whole ticket thing So it’s not going to rely on the ticket that you received It’s a business card So if you haven’t dropped off a business card, yet, please do [? Ani ?] and Ariel are walking around with containers So you can drop it in if you want to be considered The odds, right now, look like they’re 100 to one, for a GoPro camera So if you want to get in the drawing, please, drop off a card All right, thanks PETER LUBBERS: Thank you All right So next up, a quick announcement about the Bountysource project You want to take it away? Great, thanks, Warren WARREN KONKEL: Hello My name is Warren I’m one of the founders of Bountysource Bountysource is a crowdfunding platform for open-source software So you can basically come to the site and you can place bounties using Google Wallet, Paypal, et cetera, on GitHub issues, Bugzilla issues, Track issues, and so on And so, if you’re a developer looking to earn some extra beer money or quit your job and work full-time on open source, Bountysource is actually a great platform to do so

We work with GitHub, Track, Bugzilla, all those platforms We also have fundraisers, kind of similar to how Kickstarter works But exclusively for open-source software We’ve worked with some large companies like Adobe and Mozilla And we’re growing quickly So definitely, come check us out We also just launched a new feature called “teams.” So if you’re part of a company and you want to give your developers a budget, or you’re a developer and want to have a budget for yourself to go spend on bounties, and bug fixes, and so on, ask your managers or your co-workers to come check out Bountysource You can basically allocate $1,000 to a team And members can come in And when they get a bug, instead of fixing it themselves, they can go create a bounty on it Anyways, thank you very much If you want to come talk to us, we’re all wearing green T-shirts that say Bountysource Thank you all for coming out tonight [APPLAUSE] PETER LUBBERS: Thank you All right OK So our talk is now starting So Jake Archibald, also here, all the way from the UK We’re really happy to have him here He’s a developer programs engineer in the Chrome Developer Relations team And before working at Google, he worked at Lanyrd and basically made that whole site work well offline, which is amazing You may know him from his douche-bag article JAKE ARCHIBALD: Ah! I’m going to shake that I need to shake that Hey, you’re the douche-bag guy Thanks, everyone PETER LUBBERS: I can assure you, he’s not a douche-bag JAKE ARCHIBALD: [LAUGHS] PETER LUBBERS: All right So thank you, Jake JAKE ARCHIBALD: Hey, excellent OK, people at the back, how is that? People at the back, can you hear me? Yeah? AUDIENCE: Yeah JAKE ARCHIBALD: Is that good? Excellent I’ll try and keep this volume up Wave if I let up, OK So I’m going to try out something a little bit different And it depends on the Wi-Fi working It’s been a bit of a nightmare It’s probably a stupid idea So let’s find out We’re going to do an interactive quiz These slides are going to be interactive So if you don’t have a web-enabled device in front of you now, get it in front of you A laptop or a phone, it will work on both But make sure you’ve got that ready It’s a quiz But it’s really just an excuse to string together some bits of browser trivia to relate it to performance stuff So what you’ll need to do is get on the Google guest Wi-Fi That’s the SSID there And then if you go to this lovely URL, which is my laptop here So that’s, port 3,000 And there’s a clue Yes, it’s a node server Very nice Yeah, if you’re watching the live stream, nah That’s not going to work Sorry Just play the game using your mind or whatever Just play with yourself No Wait It doesn’t matter OK, move on Once you go to this URL, you’ll be asked to enter a username and password Just make up any old password It’s going to be stored in plain text on my machine So don’t use your credit card number unless you wish to make a donation All donations are gratefully received The reason I’m asking for a password is if you want to switch devices halfway through, like you start running out of batteries or whatever, you can just enter the username and password again on another device and pick up from where you left off Now, I hacked this thing together quite quickly You could probably break it by trying to break it So please, don’t do that I’ve at least made sure our Little Bobby Tables can play So if you’re in the room, you’re all right Is everyone getting access to it? It’s kind of working? Wow, brilliant I want to stress that this quiz is tough And I’ve seen it catch out people who do this sort of stuff, this minor details of browsers for a living, and it catches them out So if you’re the kind of person who flips tables over when you don’t win, then maybe stay away from tables for a little bit because this could get rough OK, I’m going to get this huge, horrible, Helvetica off the screen Oh, of course, what kind of quiz would be complete without a grand prize? [IMITATING GAME SHOW ANNOUNCER] The Chromebook Pixel is Google’s latest laptop, featuring an i5 1.8 gigahertz processor, 4 gigabytes of RAM, and the touchscreen with a higher DPI than a MacBook Pro Couldn’t get a hold of one of those Sorry– [LAUGHTER] JAKE ARCHIBALD: –they wouldn’t give me one Never mind But if you do win, then we will swag you We will swag you good [LAUGHTER] [CHEERS AND APPLAUSE] JAKE ARCHIBALD: You’re all quite dazzled by that I thought you might not, so I thought I’d go all in and, like, yeah! Look at that stuff! A neon thing, a glass Have you see one of those before? And a cup, brilliant OK The lens flares are sold separately Sorry about that [LAUGHTER] JAKE ARCHIBALD: Let’s get started We’re going to start off really simple, like images in HTML right? You’ve done that before Fair enough OK, here is a div The div has a source, like an image might Which browsers do you think are going to make a request for that? Now, on your phones and your laptops, at the moment, it should have given you the options for this question If it hasn’t, just hit refresh And you should get them

Now, when we we’re talking about these browsers, we’re talking about the latest version of them, the latest stable release You get one point for each one you get right And you will lose a point for each one you get wrong So if you say Firefox doesn’t make a request, and it does, you will lose a point there You can assume the HTML5 doc type And there’s nothing funky in the head, like a base tag that might throw things off There’s no trickery going on And what you’re seeing here is a live read out of the opinion of the room So the needle will swing one way when you think yes It will swing the other way when you think no, although the direction is randomized for each question So you cannot just go along with the room You will be probably getting it wrong if you do that All right OK, that’s probably enough time If you haven’t answered, yet, answer quickly Because I’m going to close the question in three, two, one And OK, so the needle’s going roughly in the middle, which means collectively you don’t have a clue Well done, everyone [LAUGHTER] JAKE ARCHIBALD: You were kind of thinking, yes in– well, most of the browsers, kind of more strongly in Internet Explorer It’s almost like you’d been bitten by that browser in the past [LAUGHTER] JAKE ARCHIBALD: The answer is, of course, no Not in any of the browsers None of them are going to do that Well done, the people that got it right, four people by the sounds of things [LAUGHTER] JAKE ARCHIBALD: Excellent, well done But this is not as mad as it seems So in XHTML2, you could do this You could have any elements, such as a div with a source, and the browser would replace that element with the content of that resource And it was kind of a good idea It was the start of a good idea because you could take rich semantic content and replace it with an image It made the Alt attribute completely redundant Pretty cool But XHTML2 had the backwards incompatibility issues And it carried with it XML’s Draconian error-handling And once you invite XML into your home, it XMLs everything It XMLs all over the carpet, up the walls [LAUGHTER] JAKE ARCHIBALD: And in the same way that smurfs stick the word “smurf” in front of everything to make it a smurf thing, XML sticks X at the start of everything You don’t want HTML You want XHTML You don’t want frames You want Xframes [LAUGHTER] JAKE ARCHIBALD: You don’t want forms You can have Xforms If you let XML take over your life, it will turn your boyfriend or girlfriend into an X-boyfriend or girlfriend [LAUGHTER] JAKE ARCHIBALD: And “XMLcool” with that Because you don’t need a partner Because you’ve got XML to look after you now Things fitting that, in 2009, XHTML2 became an X-specification [LAUGHTER] JAKE ARCHIBALD: We didn’t care about it anymore And no browsers ever implemented source on something like a div But what about this? We’ve got an image element It’s got a source Which browser is going to make a request? Now, notice that I have spelled image incorrectly, in terms of HTML Does the browser treat this like an unknown element? Or does it do something special? We saw XML was too Draconian, too strict for the web But is HTML this lenient? Or are the browsers more lenient than the spec in this case? So we’re seeing you’re kind of leaning towards one way And pretty much all the browsers– ah, you’re changing your mind and going back into the middle We’re going to keep this rolling quickly So just make a decision I’m going to close the question in three, two, one And it’s closed So you’re kind of thinking, pretty much, yes, in all the browsers And you would be absolutely correct In all of them– AUDIENCE: Yay! JAKE ARCHIBALD: –it will make a request for the image And note, in these situations, it doesn’t have to show the image We’re just talking about making a request But in this case, all of the browsers will actually show the image as well You see, back in the past– I don’t know if you remember the past– but one browser decided that IMG was too difficult for developers to remember, and that image should work as well And we’ve been stuck with that ever since Now, which browser vendor do you think we have to blame for this? Oh, yes, of course, it is– [LAUGHTER] JAKE ARCHIBALD: –Mosaic– [LAUGHTER] JAKE ARCHIBALD: –back in 1993 The people who invented the image tag, they did this And a study in 2005 showed that, like, 0.2% of pages were using this incorrectly spelled image So all the browsers have to support it for pretty much forevermore The WhatWG recognized this and added it to the spec This is the parsing spec And you can see there, start tag, if it’s image, change the token name to IMG and reprocess it Don’t ask, right? [LAUGHTER] JAKE ARCHIBALD: But recently, I-M-A-G-E was using the kind of a clever hack, Alexei Ten came up with this So you would use this on your page instead of an image, this block of sort of SVG with an image inside it And what it’ll do is it will show an SVG and in browsers that support SVG And it will do a PNG in other browsers So a modern browser will parse it like this Ah, OK That’s an SVG element OK, it’s going to be 100 by 100 That’s fine Oh, and this is an SVG image Because in SVG, image elements are spelled fully– I-M-A-G-E. Oh, it’s got a width and a height That’s great And I’m going to load img.svg Because this is how you define the source for an image in SVG because it’s part of XML And why have a link, when you can have an Xlink? [LAUGHTER] JAKE ARCHIBALD: And then, it sees this And it goes, [RASPBERRY SOUND] That mean absolutely nothing to SVG images, so I’m

going to ignore it Whereas an older browser, maybe the Android 2, IE8, they’ll parse it like this Neh, eer-a– [LAUGHTER] JAKE ARCHIBALD: –ffyya, er, I mean, going to ignore that Oh, look, the developer spelled “image” wrong OK, I am going to use that It’s 100 by 100 Pha-pe-ffff-ha! [LAUGHTER] JAKE ARCHIBALD: Whoa! Developer got high I’m going to ignore that And I’m going to load img.png It’s great So this doesn’t require JavaScript, and you’re switching between the two image formats And we got kind of excited about it, and we started tweeting about it The mistake we made is we didn’t test it So a few of us started testing it And we found something interesting All of these browsers support SVG Which ones download both images? They shouldn’t And I’ll give you a clue– it doesn’t go one way or the other for all browsers Some of the browsers are doing it differently So you’re going to have to pick the browser or browsers that you think get this wrong because not all of them get it wrong I’m going to close the question Ho-ho [LAUGHS] Oh, dear [LAUGHTER] JAKE ARCHIBALD: Oh, no, OK We’ve got some IE fans in the room Closing the question in three, two, one OK, so you’re edging towards Internet Explorer being the bad guy here And in this case, you are correct As a kind of group, you’re doing quite well You should all form a company or something It’s great So all the browsers here, all the latest versions, they have two parsers inside, a relatively new thing for browsers to have But these ones, they all have it One parser runs ahead as quickly as it can and picks up things that it should download, like images, scripts, all that sort of stuff The other parser does the heavy lifting like building the DOM tree, and parsing scripts, and all that stuff This has a surprisingly large benefit You know, Ilya is posting about this This study that was done through 2,000 sites And it had a 20% speed improvement That’s pretty incredible That’s time to get DOM content loaded In order to be quick, this other pre-parser, this first one is a little bit stupid In Internet Explorer, it’s that little bit too stupid, and it kind of gets overexcited And it’s like, I’m going to show a PNG! I’m going to show a PNG! Yep, here I go! I’m going to show the PNG! Here it goes! Naw, actually, no It’s an SVG– [LAUGHTER] JAKE ARCHIBALD: –nevermind Fair enough It kind of sees the image But it misses the SVG context So it picks up the wrong source And then the main parser comes along and goes, pppfff, what are you doing? No, this is an SVG thing, and downloads the correct thing The moral here is if there’s some kind of performance advice going on, don’t just blindly trust it In Chrome we say, use tools, not rules And it rhymes So it must be true, right? [LAUGHTER] JAKE ARCHIBALD: But also be on the lookout for existing tests, if someone has done the leg work for you, and you can just run that test yourself One of my favorite stories in science involves this guy August Weismann He wanted to disprove that evolution was learned Like if you had some kind of life experience, that that would be passed to your children He wanted to disprove that was a thing because it wasn’t the Darwin evolution So he took some mice, and he cut their tails off, and he bred them together And then the next generation, he cut their tails off and bred them together as well And the theory was, well, if evolution is learned, we’re going to start getting mice born without tails And he was quite a way into this research until someone went, uh, you do realize, August, that the Jewish people have been carrying out this test a lot longer than you have? [LAUGHTER] JAKE ARCHIBALD: And ay-uh-uhh! [LAUGHTER] JAKE ARCHIBALD: Fair enough, yeah, OK Job done So yeah, don’t reinvent the wheel unless you want to learn a lot about wheels And that could be cool sometime OK, what about this? I’ve got an image It’s inside a div that is displaying Not in this image It’s not going to be displayed But which browsers are going to request the URL and download the image regardless? So I did it quickly We’re going to go for, oh, are we still thinking IE is going to do something different? People are thinking Firefox is going to do something different I’m going to close the question in three, two, one There we go The countdown is going to get old But I’m going to do it for every question anyway OK, so, we’re sort of saying, yes in IE, maybe no in Safari, no in Chrome, and maybe in Firefox The answer is yes in all of them They’re all going to download the image in this case And this behavior is part of this specification as well In the beginning, there is nothing, right? And then the browser gets sprayed with HTML text And then from that, it is going to construct this tree of elements that, as Paul was explaining earlier, is the DOM When one of these things is constructed, the constructor steps for that element are run And if we look at the spec for image, it’s quite complicated for what you would think would be a very simple thing But this is the image stuff They all run synchronously, step 14, fetch the image No mention of CSS No mention of anything like that And that’s good in some ways because it means the browser can start the image downloading before the CSS is there The pre-parser can deal with it Downside is, well, we couldn’t do polyfills for things like responsive images Because by the time JavaScript gets there to do something clever, the image has already started downloading, and you’re just going to trigger a second request by changing the source

This won’t be a problem in the future +The resource is priority spec, has this postpone attribute, which means the image won’t download if it’s Display None And it allows the browser to avoid downloading it, even if it’s just outward view on the page as well So you don’t have to rely on these heavy scroll events for image lazy loading OK, what if we’re using CSS? Does visibility matter then? What about this? Once again, that image is not going to be displayed because it’s inside an element that is Display None So we saw here that the image would download in this case But what about in CSS? Is it going to do something different? Does visibility matter here? Are some of the browsers going to do something different? I’m going to close the question in three, two, one Oh! Going right to the middle Collectively, once again, no clue Don’t worry about it, guys It’s quite difficult What’s the answer? None of the browsers will make a request here And that’s kind of cool, right? We want to be able to rely on that kind of behavior Slightly different one What about now? Same thing again Image is not going to be rendered because it’s on a Display None element But it’s not inside a Display None element It is on the Display None element So we saw the browsers weren’t downloading before What about now? Did the browsers do something different? Did they all download it? Did they all not download it? I mean, they don’t need it It’s not going to be rendered I’m going to close the question and three, two, one, done All right We’re saying no in pretty much every browser Most browsers will download it in this case Only Firefox won’t So what’s going on here? Well, once you’ve got some DOM elements on the page, as Paul was explaining before, they are going to get their styles calculated, where the browser goes to see which of your cascaded styles of your font tags– if you’re from the ’90s– which styles apply to each element individually But not everything gets it’s style calculated So you’ve got these two elements at the bottom No style calculation And the reason is this div at the top here turned out to be Display None And the browser shortcuts, because it knows the styles of these elements have no impact on the rendering of the page So it doesn’t bother It takes a shortcut So if these have background images, the browser never finds out about it If the Display None element has a background image, the browser does find out about it And that’s why we see most browsers downloading it, at that point Firefox is a little bit smarter here But if you use something like Visibility Hidden or Opacity Zero, Firefox will be downloading as well Who’s getting it right according to the specification? Everyone is! It’s great So the specification says absolutely nothing about this Because this tiny note that says the browser may optimize It may avoid downloading images that are out of view, even if there’s another element over the top The browser may avoid downloading at this point No browsers are that smart yet This kind of freedom in the specifications is great Because it means the browser can do what’s right, given the situation, and the kind of device, and the network connectivity, et cetera, et cetera But it’s also kind of scary because this is where you’re going to get the browsers doing different things, as we saw here But I kind of like that I think that’s the diversity that makes the web great It’s not one company driving forward with its own interests It’s lots of companies driving forward in different directions And we get this sort of car crash But a car crash with a happy ending! [LAUGHTER] JAKE ARCHIBALD: And that’s the web that we have today [APPLAUSE] JAKE ARCHIBALD: So if you want to avoid downloading backgrounds and CSS, hiding element isn’t enough You need to put it inside something that is hidden So the browser won’t find or even look at that element But when you do that, realize you are relying on just what the browsers do It is not specs behavior The only sure-fire way is don’t let the browser find out about the background image Take the class off until you need it, or don’t put the element in the DOM until you need it All right Things have been quite easy, so far Let’s get JavaScript involved What do you think? Creating an image element, once again, I’ve spelled “image” wrong I’m applying a source to it It is not in the document So it’s not going to be displayed yet And it’s spelled wrong We saw the browsers correcting for that before But that was in HTML What about in the DOM? Is that going to be different? I’m going to close the question in three, two, one All right, done OK, so we’re edging towards yes, in most browsers It is yes in most browsers, except Firefox Firefox does something different here And there are two parts to this explanation We saw before that the DOM builds up, and these creation steps for elements are run But even if you create the elements, and it’s not part of a document, that’s still going to run those creation steps And we saw before, step 14, fetch the image We can use this to our advantage because you can make a GET request to any URL by making an image element and assigning a source And you could use the image element constructor It’s a tiny bit of code You can make a request anywhere This is kind of how Google Analytics communicates back to the server Oh, yeah, but Firefox didn’t make a request So what’s going on there? It’s because we spelled “image” wrong And most browsers, Chrome, Safari, IE will give us an HTML image element when we do that

Firefox will give us an HTML element It’s not an image You add it to the page It will not show an image And you know what? It’s the only one getting it right We saw before that the specification says, if you encounter a start tag, you can correct it But this is the parsing spec We bypass the parsing spec by creating the element in JavaScript So yeah, actually, technically, it should have returned an HTML unknown element But it’s getting closer to right than the other browsers I think I preferred it when the web with all the browsers, like, there was one bad guy, and all the other browsers seemed perfect It was like an orchestra, and Internet Explorer 8 was just this screaming child hitting two cymbals together [LAUGHTER] JAKE ARCHIBALD: But then we finally got rid of the screaming child with the cymbal, and then we started conducting again And we went, oh, actually everyone’s out of tune We just didn’t notice, because of the screaming cymbal child Oh, fair enough [LAUGHTER] JAKE ARCHIBALD: All right, let’s get CSS involved again What about this? So as before, creating a div, I’m going to give it a background image So I’m not creating an image Creating a div, giving it a background image We saw, here, that images would download at this point Is it different with CSS? Do different browsers do different stuff? So we are edging towards the don’t know Oh, wow! It sort of swung the other way Closing the question in three, two, one All right, so we’re edging towards yes in everything Wrong-uns, the lot of you No browser will download here And this is kind of the same as the Display None case It’s not in the document So the browser is not going to go looking for the styles, because it doesn’t need to know the style information, because it knows it’s not going to render All right, going to be cruel Same thing, but I’m going to add it to the DOM And then, I’m going to take it away In the same block of JavaScript, will the browser see that element in the document long enough to actually trigger the download? What do you think? I’m going to close the question in three, two, one We’re edging towards yes in everything Wrong again [LAUGHTER] JAKE ARCHIBALD: None of the browsers None of them The browser doesn’t think about styles or layout until as late as possible, which normally means when it needs to render something And this isn’t going to change any pixels because JavaScript is going to be blocking the chance to do some of that painting stuff What about this? I’m adding it to the document I’m going to ask for it’s text content It’s an empty element Text content is going to be empty as well And then, I’m going to remove it again Does that trigger different behavior in the browser? Element is completely empty so, you know But is that going to trigger the browser to go, oh, yeah, I’m actually going to get that background image I’m going to close the question in three, two, one What have you said? Aaah, you don’t know Fair enough Yes, it’s tricky No None of the browsers at this point I am going somewhere with this I promise you Getting the text content of an element is pretty easy It’s just going to go and pick up the text nodes It doesn’t need to look at the style or anything What about this one? InnerHTML? Same as before But instead of text content, I’m going to ask for the old innerHTML Oh, wow! IE is doing something different to everyone else Interesting I’m going to close the question in three, two, one All right, so, you’ve said yes in IE, and no in everything else Bloody hell You’re right Well done IE makes the request And the reason for that is because– I don’t know [LAUGHTER] JAKE ARCHIBALD: Some things in the world cannot be explained, like why it takes three attempts to plug in a USB cable, even though there’s only two possibilities [LAUGHTER] JAKE ARCHIBALD: These things just cannot be explained Moving on Similar again Instead of HTML, it’s innerText What do the browsers do here? Do they do something different? We saw IE is quite request-happy with innerHTML Does it do something different with innerText? Does it trigger a requests in any of the other browsers? I promise you, I am going somewhere with this Closing the question in three, two, one There’s quite a strong opinion of no across all the browsers Sorry, guys [LAUGHTER] JAKE ARCHIBALD: Yes, in everything except Firefox And this actually makes sense Let’s make a div We make a div We get a background image I’m going to give it innerHTML, where it’s got, Hello, World And the div is a div around the world or whatever Text content is “Hello World,” as you might expect The innerText has a line break in it And this is how it is in IE, Chrome, and Safari Because innerText is more like what you would get if you copy and pasted the text of the elements And because div is a block level element or so it is in this example, it gets a new line So if we run this, the browser goes, yeah, yeah, yeah, text content, easy enough, innerText Oh, innerText is style dependent So I’m going to have a look at the styles of the element And, oh, it’s got a background image That’s interesting I’ll download that And that’s why we see most browsers doing it Firefox doesn’t download at this point because it doesn’t support innerText It’s the only browser that doesn’t So it just returns undefined at that point

But if you used any of these, apart from innerText, like, anything that’s going to get some style data from the page, Firefox would have started the download as well So Paul was talking about this earlier You can start doing layout thrashing if you start doing these reads and writes You’ll trigger extra layouts, et cetera The browser is quite clever about this stuff It will batch changes together Like if you do this, like, Display None, Block None, Block, et cetera, et cetera, Loads of Width, this is actually a really light piece of code It’s not tricky for the browser to understand because it’s going to ignore– all right, I hope that’s not my cue to get off because that’s very passive aggressive [LAUGHTER] JAKE ARCHIBALD: Anyway, so, it will just take the last change that you make Oh, that’s nice [LAUGHTER] JAKE ARCHIBALD: This is great But it can lead to unexpected results Let’s have a look at a practical example Paul and I, we want to go over there You can tell because we’re pointing Let’s do it with code We’re going to start at left zero We’re going to transition left one second, go to 100% We run that code, and it works Yay! We solved the world’s problems with code Now, we’re very happy at this point But let’s run the code again Nothing happened And this is because the browser is going to ignore this first right of left It’s just going to batch them together It’s only going to listen to our last– right here And it’s 100% We’re at 100% already So nothing happens We can fix this by forcing a synchronous layout here Because that forces the browser to go and look at all the styles of all the elements in the page And it realizes, oh, yeah, we are supposed to be at left zero So when we make the next changes, it will start from zero And we can run this code as many times as we want And it works You might have encountered this kind of behavior and tried to use set timeout or something to get around it No, you can just force a layout like this Right OK, last question Let’s go through this quickly Because I’m going to be chucked off the stage in a few seconds Imagine a page full of Lorem Ipsum It looks like this– 595 pixels across; media query, min-width 600 min-width So we wouldn’t really be expecting it to display Which browsers are going to download that gif, anyway? Are the browsers going to do something different? I’m going to say, would we expect it to even display that gif? Who knows Last question, so make it a good one Closing it in three, two, one Straight down the middle I feel like I’ve broken you as an audience [LAUGHTER] JAKE ARCHIBALD: I’m very sorry What happens here? IE and Firefox will download, and they will actually display the background as well And this is quite sneaky My measurement did not include the scrollbar With the scrollbar, it brings it over 600 pixels Now, yeah, they don’t call me Cunning Jake– they don’t actually call me Cunning Jake [LAUGHTER] JAKE ARCHIBALD: This seems insane to me, to include the scrollbar width! What if the user has a 200 megapixels scrollbar? Why should I care about that? But including the scroll bar is mandated by the specification It’s interesting And Chrome and Safari are breaking the spec here It’s fixed in the Chrome nightlies It’s not fixed in the WebKit nightlies Why is the scrollbar included? Well, imagine this bit of code I’m forcing no scrollbar And then when the width gets to 600, I’m going to introduce a scrollbar 500 pixels, that’s fine We get to 601, ah, we need to put a scrollbar in Oh, now we’re less than 600 pixels We’ll take it away And so on– [LAUGHTER] JAKE ARCHIBALD: –and so on, and so on In reality, it doesn’t get stuck in a loop But here, we can see what Safari does I’ve got a background picture and a scrollbar coming in at a particular width And we’ll see, I’m only making it bigger I’m not moving both ways And we can see– [LAUGHTER] JAKE ARCHIBALD: –that the background image flickers on and off And then once we get beyond the width of the scrollbar, it stabilizes And that’s it Let’s have a look at the rankings Don’t worry If you haven’t scored great, it won’t actually show your name on the screen It’s only going to show the top 10 So don’t worry too much Here we’ve got prettyFlyForAWiFi Very good Who’s that? [CHEERS] JAKE ARCHIBALD: Excellent Right, I will swag you good and proper [LAUGHTER] JAKE ARCHIBALD: Oh, god, you’ve done really, really well OK, that’s my time up Thank you very much, guys Cheers, bye [APPLAUSE] PETER LUBBERS: Jake, here’s our special gift for you JAKE ARCHIBALD: Oh, thank you very much PETER LUBBERS: A little bit more JAKE ARCHIBALD: Oh, thank you Cheers now [CHUCKLES] Right, I’m going to run away PETER LUBBERS: I’m sorry You’ve got all the swag? JAKE ARCHIBALD: Yes I will catch up with you in a bit And we’ll do the swag thing MALE SPEAKER: Thank you JAKE ARCHIBALD: Cool, right PETER LUBBERS: That’s pretty good [INTERPOSING VOICES] PETER LUBBERS: We’re also hiring [CHUCKLES] All right OK, well, thank you, Jake We’re just switching laptops Just a quick idea on the timeline We have another 25-minute talk And then we have a very short break Maybe 10 minutes, just to reset the video, and so on And then, we’ll have a Q&A discussion until 9:30

At which point, we’ll start with raffling off all the goodies All right, so next up, we have Paul Irish, who is also a repeat speaker, here, at SFHTML5 Happy to have you back, Paul And Paul’s a developer advocate in the Chrome Developer Relations team, focusing mostly on developer tools And I think we’ll see a lot more about that next OK, we’re doing a little sound– oh, yeah Do you have the one? Ah-ha We’re trying to get these monitors to work They all worked in the pre-test And they stopped working Again, a couple of events that are coming up Chrome Developer Summit, November 20 and 21 It’ll be in Mountain View at the quad, the Google office there We will be live streaming that event as well There are about 300 people that can fit in the building there Registration will open in October We’ll post some things about that HTML5 DevCon happening the week of October 20, training sessions followed by a two-day conference And then two days of training on top of that Very, very reasonably priced, so definitely, check that out And– [CHUCKLES] Well, you’re going to have the mic on there All right PETER LUBBERS: Are those screens working, or no? OK PAUL IRISH: That’s cool We’ll– all right Yeah, that seems almost workable, yeah? MALE SPEAKER: Better PAUL IRISH: Hey– MALE SPEAKER: There you go PAUL IRISH: All right This is nice Oh, yeah There you go Still loading, huh It’s kind of aggravating to look at, isn’t it? It’s just like, come on! Uh Yeah, OK So let’s start So I’m going to talk a little bit about the tools that are available to identify and improve some of the things that we actually saw tonight And so to start off, I want to separate some of the performance ideas into two separate buckets If this works for you guys I don’t know It seems kind of OK The user experience of performance is mostly separate into two things, like, give me the damn thing that I wanted And now that I have it, I want to interact with it really nicely So in “give me the damn thing I wanted,” it’s page load, often abbreviated as PLT, Page Load Time In here, we’re talking about things like the network waterfall; getting image assets that are appropriately sized; non-blocking delivery of all of our assets; getting the CSS that we need to render the top of the page quickly, and not much else; and also fonts Can we see the text quickly? When we’re talking about runtime performance, we’re talking about, like, I want to interact with the page I want to click a button and see that response very quickly, any sort of transitions, animations When I’m scrolling, does it stick to my finger? Like, I am scrolling with my finger on the device, and it should just be moving, immediately, with things, what we heard about with memory leaks and garbage collection, and also Java-based innovation, like with the requestAnimationFrame But to show a little bit more about this stuff, I want to take an example So we’re going to start off with a demo This is a site for a festival in Canada, and it’s the Canadian National Exhibition So we’re actually just going to go over to the site now, the live site And we’re going to play around I’m actually going to do it here in Chrome Canary OK, cool So how’s this look? Oh, it’s two-eyed OK, yeah, seems good So Canadian National Exhibition My friend, Mike Taylor, who works for Firefox, found this site And he said, I defy you to find a site that is jankier in its scroll And I was like, oh, I know of a site, actually So like, this one What is it? Exception? Inception? Inception Explained, is it? Is this it? AUDIENCE: Yeah PAUL IRISH: It’s really bad So Paul mentioned parallax sites before Parallax sites can get into trouble really fast And this side is so cool But the frame rate on this is just so poor It’s rough But let me go back to what I was talking about So Canadian National Exhibition So here we are And we got some things happening We’ve got this laying in the background, full bleed in the back

This header that kind of scrolls up as I go down But let’s actually look at the tools to see what we’re talking about So first thing, I’m just going to turn off this debug mode I had on earlier And always, first thing, go to timeline Start recording I use Command E. And we just scroll up and down, OK So we’re seeing a lot of activity already, a lot of stuff We’re seeing mostly purple, right? I’m scrolling in on this area, just to get a better zoom And it looks like recalc style is consuming a lot of each of these frames So OK, recalc style Some things could be happening I’m not really sure what So we hover on the item And we can see the JavaScript call sect that’s associated with this So the last thing that happened was here, inside removeClass, inside jQuery OK, so I’m going to click that, just to find out what exactly it was We’re minified here OK, we’ll pretty print down at the bottom Looks good Now, I’m going to come back and just repeat that click again OK, cool So now we just repeat the click, and it brings me to the exact place I really like it when the cursor does it’s pretty thing So I’m like, aah, yeah! [LAUGHTER] PAUL IRISH: So it brings me right to the class name assignment So there’s a setting in the class name, on an element And that is what triggered the recalc style OK, it’s good to know Now, let’s find out why that happened We look down into the user code And so, here, we go inside CNE.js Let me try clicking that, once again, line 33– aah, ooh, aah Remember how Paul might have mentioned, do as little as you can inside your scroll handlers So inside their scroll handler, they get the height of the window, the scroll top They do a little bit of math And then they toggle some classes on the HTML element in every single scroll– toggle, toggle, toggle, toggle Not great Certainly, not great [LAUGHTER] PAUL IRISH: But we can make this better So the best way to do this is– you can see it’s a conditional toggle class, right? You’re using this second argument, inside jQuery It’s a toggle class They conditionally change it, depending on that math working out So that’s OK So ideally, you set this in an if block, and you only touch the DOM if you satisfy that requirement That makes a bit more sense We could, actually, cheat things a little bit So I’m just going to edit the JavaScript right here Oh, one sec This is OK All right, I’m going to edit the JavaScript right here So I’m just going to backspace– oh, come on All right, cool And we’re just going to get the DOM element itself And then we’re going to use class list from HTML5 And it turns out, class list toggle actually has the exact same method signature as jQuery’s toggle class And now, I’m just going to hit command S. And Chrome is just going to update that function, on the fly, which is pretty cool So now we’re going to go back to timeline, and I’ll start recording again, and repeat my action Yeah! AUDIENCE: Yay! PAUL IRISH: Nice Pretty sweet So here we are We do not have massive recalc style anymore But we do have some green paint going on Hmm Now, on this device, I’m still hitting mostly 60 FPS So that’s kind of OK But on mobile devices, I certainly wouldn’t be I want to see if I can do anything about this paint first So first things first, I’m going to come over into the settings and turn on Show Panit Rectangles And usually, when I do this, I like to turn on Show Composited Layer Borders at the same time They kind of go hand in hand So bring DevTools down a little bit And now, I’m just going to scroll up and down So my paint recs are in red And we’re seeing things A lot going on, but I can definitely see up top, this section, the header is just in red non-stop Now, the reason why is because the header is position fixed, and the content is moving beneath it But that’s not going to work So it’s basically repainting this, even though it really shouldn’t It knows what that looks like, right? So the trick here is what? What’s the fix for this fixed-position element? AUDIENCE: Translate z PAUL IRISH: Ooh! Yeah! Translate z, there it is! I’m excited to type it, and then I also dread it AUDIENCE: Yeah PAUL IRISH: It’s like a combination of things, really OK

WebKit, transform, translate z Ah, my friend Some people do the 3D version But then you have to do, zero, comma, zero, comma This is my favorite So I got that in I promoted the layer And in fact, there is now this little gold border around the top And if I just toggle this, you can see that gold border coming on and off because that is now a layer All right, so we’re going to put it back on And if I scroll up here– oh, cool Yeah we do not paint that But then, we get about here, and it moves And we see that paint So let’s fix this So the movement is here We just move the top Now, what’s probably a better way of moving this top other than just changing position absolute if we want to move an element? AUDIENCE: Translate PAUL IRISH: Translate Yeah, sounds good Let’s do a transform translate So WebKit and Blink still have prefixed transform So we will do that, hop over here, and do a translate y And that seems to work And since I have a CSS transition down here, I should probably update that Ah, OK Now that’s a bit nicer I still do see red, hmm Let’s see if– ahh, yes Is that right? You know Aah, ooh, aah! And I don’t know if it feels smoother to you But it feels smoother to me [LAUGHTER] PAUL IRISH: It feels good All right, so that’s pretty good And let’s take a look over in the timeline All right, cool So in general, in the middle, we got nothing going on We got a little bit of paint when I’m going between the top or when the new image is coming in That’s pretty good So that’s a little bit of things that we can do inside the DevTools I actually made a video showing taking this all the way The background has a fixed position And we can actually move that to the body element and get some wins there But I’m going to come back to my slides first Ah, yeah All right, so, I want to walk through some of those operations that we were seeing Recalc style, so, what’s happening inside recalc style is it is getting all the style rules that affect the page This is anything inside a style sheet, an in-line style, the user-agent style sheet It’s getting all the style rules It’s bringing them into an object model Then it takes all those selectors that you got hanging around and matches those against what’s in the DOM And it says, oh, there it is That one right there, yes, uh-huh The selector matching Now, as Paul said, it happens really fast Usually in recalc style, the selector matching takes up about 10% of the general purple bar Not very much Don’t worry about it Now, that it has that and matched against the DOM, it calculates the computed style for every single DOM element So you know in JavaScript, when you ask for a GET computed style? It’s doing that But for every CSS property, for every element, it figures out how things should look It makes sense OK, moving on into layout Layout is the geometry of the page And I want to show one way to look at layout So I’ll open up this little demo right here And– come on JSbin’s server is in the UK, isn’t it? AUDIENCE: Yep PAUL IRISH: Yeah It’s like looking at a loaded spinner All right, cool So I’m going to click these buttons like that Now, what I’m going to do is I’m going to hit switch layout And we’re going to start this animation Now, if I open up Timeline and record, you can see that, as that animation’s happening, we’re getting a lot of layout costs And that makes sense because layout is reevaluating the geometry of the page And this sort of animation here has to figure out this new text flow And when the text flows, then we get a new height for where person two starts and person three starts And it’s a lot of work to figure out that new geometry And it happens every single frame of that animation It’s a bit expensive Now, the next thing after layout is determined is paint We heard a lot about this from Paul Paint hurts a lot on low-end devices Old Android phones with not a lot of hardware have a tough time updating anything when it requires paint on every frame Debugging this with continuous paint mode is probably one of the best ways to do it So I’m going to show that real quickly I said real quickly And then, I loaded up a JSbin URL Come on, England

Come to me, the bits All right Handy trick– DevTools at the bottom, you might like it on the right You can just take the bar here and drag it up to the– [LAUGHTER] PAUL IRISH: You can also click the button [LAUGHTER] PAUL IRISH: Great I have a lot of DevTool extensions, and I’m just going to make excuses You might have noticed inside of Chrome Canary that I have– wow Let’s go back So we’re here We’re looking at this page We have lovely boxes all over the place That’s real good But we’re going to turn on continuous paint mode Now, continuous paint mode, basically, says to Chrome, hey I know you know what it looks like But I just want you to tell me what it looks like, again, and again, and again, and again, and again So it’s just going to repaint everything that needs to get painted So if I look at Timeline, it is just doing the same work over and over again But what this allows us to do is make some changes and see how it affects that graph up there So right now we’re looking at– what is this? 8 milliseconds or so per paint of the entire page Now, we can try some different things So maybe I’m going to come over here and toggle the box shadows So I turn on box shadows And you can see pretty quickly– sorry about that– paint time dives really, really high So the box shadow is adding quite a bit to how long it takes to paint the page I also know that there’s a border radius on these boxes I can try turning that off See if that makes any difference It does make a slight difference, yeah But this gives you an option to figure out things Now, a handy trick when you’re using continuous painting mode is the H key hides DOM elements So you can walk through you’re DOM, hide things and see what the effect is So maybe you’ll hide the header, get that out of the way It bisects the DOM, figuring out where your costs are This H works all the time It’s pretty handy So that’s continuous painting mode real quick I got a question recently which is, there’s all these operations inside the DevTools timeline What is the order that I should see them in? And then what we’re looking at right here is basically it So a lot of times, you start off with some JavaScript It touches the DOM It changes something Then the browser does have to recalculate style It has to layout the page It has to paint it and probably composite some layers Ideally, this is the flow And there’s only one operation per, basically, paint Paint is the user got to see something When we were talking about layout thrashing before, layout thrashing is, oftentimes, we’re doing a bunch of recalc style and then layout, and then recalc style and layout, recalc style and layout And the user doesn’t see anything There are no paints So ideally, you have only one layout per paint So here’s a little cheat sheet for taking action from what the timeline is telling you If the timeline is telling you, oh my god, lots of yellow There’s so much time being spent inside JavaScript I should point out that that Canadian expo site, remember when I profiled it before? Was there any yellow at all in it? No There was no JavaScript at all slowing down that site It was all inside the rendering But if you’re in a case where you are on a lot of JavaScript, you can use the flame chart I’m going to show this really quickly Who has seen or used the flame chart? It’s good It’s a powerful thing So this is MathJax and a really good polyfill for MathML But I want to check out how fast it can render these things So I’m going to turn off these Come down here And so it’s actually just rendering this stuff out And I can choose to render it in SVG or HML CSS Come under Profiles, and I’m going to collect JavaScript CPU profiles and record Change this Ooh, aah! All right, cool Now, normally when you come into the JavaScript profile, you see something like this Just go down to the bottom, right there and select Flame Chart What it’s going to give you is a view like this And so, this is a time-based view of JavaScript execution And it progresses from left to right over time just like you expect on the timeline And in fact, if you want, you can record on the timeline and on the JavaScript profiler at the same time But you see some spikes

You want to go investigate what’s actually happening And so, I’ll take a look at the SVG one first So we can see there’s actually a good amount of latency There’s good gaps between all these flames And if you look on timeline, there’s actually a bunch of network activity that’s happening between these things So they’re making network requests as they’re trying to pull together things And it’s a bit inefficient Over in this version, they don’t have that problem But we can identify where all the function costs are coming from Now, height is just call stack So height is really not important What’s important is width because width is time But we’re able to see here what are the functions that are taking up time We also get to understand the execution code paths here, and what calls what, and how do we go from start to finish in this operation So that’s if we’re spending a lot of time on Script If we’re spending a lot of time in Layout, dig into the JavaScript that’s triggering it In DevTools timeline, like I showed before, you’ll see a call stack Find out what you’re doing in JavaScript that it’s forcing the browser to do a layout With Paints, find what is actually being repainted Turn on those paint rects, turn on the layer borders, and see what’s happening You might have to promote a layer using translate z to get out of a paint storm This often happens with fixed-position elements But take another look at what Paul showed you You can bisect what are actually expensive things happening using continuous paint mode And if none of these things answer your questions, it’s time to dig into About Tracing, which is a really extensive tool And I’m not going to touch it right now But to tackle all of these operations and how they actually map to your CSS, we should probably take a look at that So if we take this little block of CSS, the selector up there– and that does have to get matched up to a DOM element So the selector will be caught up in recalc style The height affects the geometry of the box So that is mostly captured inside the cost of layout And a text shadow does not affect any geometry of the page whatsoever It is just a visual effect, right? So it will have no effect whatsoever inside Layout and Paint Now, this is helpful to know Because if you turn on Continuous Painting mode, it’s only going to give you numbers that reflect things that have an effect on paint So you change the height of a box inside Continuous Paint mode, not much, really You’re not going to get a good result But another way to look at this is that different CSS properties affect these different things So like Paul mentioned before, transform and opacity are really fast because the GPU can handle it 100% So this happens here If you’re touching transform and opacity, you do not need to lay these out You do not need to paint them A few happen at Paint So this is box shadow, border radius These are visual effects Like I said, they don’t affect any geometry Outline is also here Because outline is similar to border But you can change an outline from 1 pixel to 100 pixels, and everything stays the same place But a lot of CSS properties do affect the layout Of course, anything that affects the positioning of the boxes Width, margin, border, absolute positioning, relative positioning, these things affect layout And actually, I took a look at all the CSS properties So Chrome, actually– yesterday, I think– released some numbers around the popularity of all CSS properties on the web And this is them So width is the most popular CSS property Who would have expected that? But it’s interesting to look at these and identify what sequence of operations they force And so most actually do affect the geometry of the page But, of course, opacity, like I mentioned, does not Another cool way to look at this is Animatable Lea Verou made this tool And hopefully, I can show this really quickly So this is just using key frame animations, just to change a single CSS property on a bunch of different things But it’s pretty cool to bring this up and try it out to see what it actually looks like inside Timeline So like I said, we’ll take a look at font size There we go So as we animate font size, font size does cause layout And we see it right here

Box shadow, like I mentioned, does not have any effect on layout and– oh, did I lie? Ooh, tough, Paul Let me try one more There we go That’s pretty good So we’re doing a transform animation It’s just staying on the GPU We’re not going back to layout So this is extremely efficient when it comes to animations So in transitions, there’s four things that a browser can do really, really fast in jank-free It can scale It can move, it can rotate, and fade These translate in CSS to these guys I should point out, you might need the null transform hack, maybe But if you’re doing any animations, any visual effects, you want to be doing them with these operations These can be fast It could be fast on low-end hardware It could be fast on high-end hardware Every other operation is going to incur layout or maybe a good amount of paint So it’s going to be slower Now, when it comes to measuring, we want to know that these performance enhancements that we’re doing are good for people If we take a look at Twitter, the load event, window outload, fires about midway through the network waterfall And the end of activity is quite a bit later So looking at window.load for knowing that the page is done is not going to work out So we need better ways to identify how successful are we? So this is an approach developed by a guy named Pat Meenen, who runs WebPageTest So up at the top, we have the filmstrip view of loading a page that’s been optimized two different ways And so, you can see that the third way is delivering content to the user faster than the other ones Down here is a plot of the percentage of the visual progress, plotting these out So you can see, here, we’re already showing things to the user And so, that’s why gold is jumping up Now, if we want to take this and turn it into a metric, we can take the area above that line and just absorb it into a figure So this is called the speed index It’s basically the area above the curve that accounts for the visual progress being shown to the user So this is a nice, quantitative measurement for getting a successful picture in front of the user Now, in the real world, we want to be able to identify things like, how as we’re developing a project over time, are we regressing performance? Are we improving it? Adobe Topcoat is a CSS library that has a really nice framework set up for benchmarking So they’re using a project called Telemetry that Chrome works on And so, this is actually a view of their button element And the horizontal axis we just have commits And we can actually see– for the mean frame rate, the load time, and the layout how things are progressing And so you can actually see this is a pretty big regression in load time of this test case And then things actually did slow down later here as well But we’re able to track this over time, which is really powerful Another developer took a look at this and applied this to Bootstrap over the history of the project from 1.0 to 3.0 And so this is just a quick view of the dropdowns component inside Bootstrap And we’re looking at the first paint metric First paint is a tricky one And it’s hard to find the good metrics, but I think speed index is one of the best ones Inside Google Analytics there’s a few tools for these You’re looking at network activity You can identify page load time, domain look up, page download time All these are the exact same as window.performance.timing But since all major browsers support this, Google Analytics will report it here You also get these numbers split up by browser, by operating system So this is just a view I made of browsing operating system Here, you can see Safari on iOS is considerably slower on page load time than the rest And I think that’s mostly because it’s on a mobile network, whereas nearly all these others are desktop on Wi-Fi Speedcurve is a really cool site It’s still in private beta right now But it’s hoping to give you a lot more insight when it comes to the performance of your site over time And so, here is HTMLRocks– which I work on– plotted against Amazon and TripAdvisor to see that

But one tool that I really want to show is WebPageTest, and I’m going to show it with a site called RetailMeNot This page I just loaded now I’m going to do a shift refresh because it’s so fast The developers behind this have worked quite a bit on the page load time, and it really shows But what’s really cool is taking a look at what WebPageTest tells us So I ran this just earlier today So this is RetailMeNot, assuming a cable internet connection inside Chrome And so here, if you’ve seen WebPageTest before– it’s been around for a while– you might know it has the waterfalls and stuff It has a lot more than that I really encourage you to take another look First thing I’m going to show is the filmstrip view So over here in the filmstrip view, we have– just like before, every 100 milliseconds, we have a snapshot of what the page looks like And you can see, at 0.9 seconds, we start to have an actual page being rendered It’s really cool As I scroll through this, you can see my waterfall We’re going through my network waterfall, and we’re seeing that correlation Now, another really nice thing is that you can ask WebPageTest to capture the DevTools timeline recording And so we can just view the DevTools timeline associated with this So I’m just going to do that right now So Chrome DevTools has a web app, as you know So we’re just viewing this as a web app And this is the actual recording that we are looking at on the WebPageTest And we can see a lot more So we can see, here’s the data coming in, the HTML Google Analytics causes a layout They’re asking for offset width So you get the screen size And we come down here And pretty soon, we get a paint And so this is that paint, that 818 milliseconds That’s why we are seeing a thumbnail right then The last thing I’ll show is that it even takes those numbers from the timeline and aggregates them over the load of the page So we can actually see, for that entire duration that it was recording, let’s summarize all the time that it spent in Layout, in JavaScript, in Paint And so we can see here, for that page load time, where was the browser spending it’s time? So here we’re mostly spending a lot of time in JavaScript, to be honest But Layout does contribute a little bit to this So WebPageTest, really cool, had a lot of features recently And the nice thing is that you can take the difference between multiple recordings and be able to track your performance over time If you use webpagetest.org, the site you’re testing has to be online But you can run a private instance So you can run against a development server if you want It’s all open source So to sum up, a few things We heard a lot of numbers tonight Under 16 milliseconds is smooth animation Under 100 milliseconds feels pretty much instant Under one second, mm, I’m OK with it Over a millisecond, users are unhappy So here are some aggressive but good goals And things that we should really be striving towards When it comes to mobile connectivity, it is hard to deliver things fast But users get really impatient quite fast Shoot to show the content that’s above the folds in under a second One important part of this is serving the above-the-fold content in the first 14 kilobytes of response This includes the CSS that you need to render everything that’s above the fold You can defer the rest of the CSS later on You don’t need it just yet But fit in that first 14 kilobytes That number is not totally magic It’s based off of how TCP slow-start works It’s the first time that you’re really going to get a considerable amount of data back A maximum of 200 millisecond server response time, 60 FPS on scrolling, 60 FPS on transitions And a speed index of under 1,000 would be pretty good So aside from reaching those goals, which are hefty but good, what can you do? It seems, talking to the people that I do, a lot of people explain that it’s hard to make the case to work on performance You know, you’ve got to ship features You’ve got to get that out the door People expect the end results And I think we really need to be able to make the case that performance is incredibly important And the best way to do that is, you can show them the numbers from Google, and Amazon, and Microsoft, and anyone who has said that it affects the bottom line significantly But I think most people really want to see it with their own site, with their own data So find, in your own analytics, ways to correlate

performance wins to actual business wins that they care about So maybe, the speed index correlated to conversion rate People that are experiencing your site faster are performing better Make the case to your client that performance often might trump their feature request That awesome, cool feature that the user will find once they register for your site, they probably won’t get to that if they’re waiting 10 seconds for the site to load Set up infrastructure to track your perf So you can identify, over the development of the project, how if you’re addressing performance or if it’s improving And to be honest, there’s some tools available I showed some of them tonight But I think it’s still quite early in the space And the open-source community could use a lot more to help everyone track this stuff better So I encourage you to join a project or start a new project to help everyone in this area All right Thanks, everyone Stick around We’re going to do Q&A in a little bit Thank you [APPLAUSE] PETER LUBBERS: Thank you, Paul PAUL IRISH: Yeah PETER LUBBERS: We have a great gift for you PAUL IRISH: Cool PETER LUBBERS: I think you will enjoy PAUL IRISH: Thanks, Vanessa Thank you very much Wow! PETER LUBBERS: All right So we need a couple minutes to set up the Q&A panel You can get up for a little bit We’ll probably call back in about seven minutes or so, and then have everyone back up here for the Q&A At about 9:30, 9:35, we’ll start with the raffle There’s still some wine in the back I think the beer is almost gone And we’ll just reset And we’ll be right back [MUSIC PLAYING]


[INTERPOSING VOICES] PETER LUBBERS: All right Let’s make our way up to the front We’re going to get started for the Q&A session [INTERPOSING VOICES] PETER LUBBERS: All right, so, Q&A time And if those of you in the back that are not participating, maybe just go a little bit in a quieter area in the very back Right, that’s a problem Hey, everybody! Can we get the noise down in the back a little bit, so everyone can– yeah, thank you So who’s got a question? I have a mic for you coming your way We’re going to pass this mic around We’ll repeat the question here from the expert panel PAUL LEWIS: Take it, Jake Take it COLT MCANLIS: I vote Jake PAUL LEWIS: Jake, take it! JAKE ARCHIBALD: The word “expert” feels wrong COLT MCANLIS: Expert AUDIENCE: Can you hear me? PANEL: Yep Yeah AUDIENCE: All right Actually, my question was for Jake, the– JAKE ARCHIBALD: Oh AUDIENCE: –last one So first thing is, really, every time I use Chrome Dev Tools, they seem to [INAUDIBLE] It’s really great But I still have one concern about the whole thing That’s I get concerned about the fact you say in the talk that if it’s slow, use translate z, and put zero [INAUDIBLE] And, actually, I have the impression it’s like you are expecting people to understand the [INAUDIBLE] by doing that And I’m pretty sure most people will just not get it And it can actually harm other browsers Or it can harm even Chrome, because you do something wrong in [INAUDIBLE] I don’t know, would it? And it’s kind of like saying to people, you’re good Go just to assemble And so people who are really good at assembling will make the cut very fast And it’s amazing! And we’d say, oh, I mean, assemble Oh, I know, my god, it’s 10 times faster And someone else will try and will just make a mess And it will be much slower because he tried to optimize And I think a compiler might do a better job So all you’re trying to– PAUL LEWIS: So the question– JAKE ARCHIBALD: Yeah, repeat the question PAUL LEWIS: So the question is why are you saying use something like translate z when for something that could be an anti-pattern or it could just be misused? Fair question? AUDIENCE: Yeah PAUL LEWIS: Cool All right, so firstly, what we always say is profile your stuff Learn to use profilers OK, if you start just applying rules that you’ve heard secondhand, it will work some of the time It may not work in others And it may just be a complete disaster So firstly, learn to profile What I’ve been saying recently is that when you write code, you should expect it to work according to the spec But as Jake pointed out, loads of stuff isn’t actually specced And so to get great performance, sometimes you have to understand the implementation of the specification It’s a reality of what we do And that’s OK Yeah, we should just accept that We’re growing up as an industry We’re doing more, and we’re going to have to understand more It’s a slightly uncomfortable thing There are always people who will just apply stuff and make a mess of it And we’d much rather they’d learn to profile and figure that stuff out But right now, this is the way to get past the problem We’d rather you didn’t have the problem We’re always working to try and find better ways of doing Chrome so that we don’t have these problems But it’s a case of saying, look, if you need to work around this problem, here is a way to do it We’re looking at ways from our side as well to make that happen So is that fair? JAKE ARCHIBALD: Although I think there is a lot of validity in what you’re saying, like the advice that

we could give today might not work tomorrow I mean, an example of this would be, we used to give advice like, if you are going to concatenate a string, don’t use plus, right? That’d be insane No, use an array, and then join the array at the end And that was faster at the time, but now it’s slower than just doing a normal string concatenation But, yeah, so these are tips that today will make your ship really fast But you need to be on top of that You need to be checking it tomorrow Look after your site if a new browser comes along that does something different And mobile especially can’t handle a lot of layers Then, yeah, profile it, and if it’s not helping, do something different PETER LUBBERS: Question over here AUDIENCE: So I’m trying to use my time offline To me it seems like you’re in a really good memory problem, basically, where you store all of your assets locally And then they only update afterwards So it compares a lot And I wanted to hear that Except that the user never has to update anything They just use the app and all in the background later And despite the fact that they don’t always have the absolute latest version of the site, basically starting with a fresh project, what would be your recommendation, to use HTML5 offline or not? JAKE ARCHIBALD: OK, so, repeat the question Would you recommend using HTML5 offline on a new project? If by HTML5 offline, we mean application cache– uuh, eeeh, aaah, eeeh– if it’s a single page app, then you could probably get away with it But if you have URLs, which the web should, then you’re probably going to get a lot of pain trying to do that But we’re working on a new thing, right? We’ve got this navigation controller where you– PAUL LEWIS: Service Worker JAKE ARCHIBALD: Service Worker! Well, we’ll change the name again Don’t worry about it Don’t try to remember anything Yeah, yeah Thanks But the idea is that you’re going to have this web worker that is going to be able to receive events And one of those events is going to be fetch, when the browser tries to go away and fetch something from the network And you can cancel that event in the same way you can cancel a click on a link And you could do something else, which could mean it might pull something from a cache or make up a response and serve it And you’re right The native apps, they serve something from the cache straight away and then go and look for an update And that’s the model that we’re promoting I’ve been banging on about progressive enhancement for a while But this is a next step of that We’re going to treat the network as an enhancement that might not be present So yeah, that’s what you’d do, have a native app model, serve stuff that’s there, and then make an extra request for updated data And let that fail silently, and that will be your offline experience PETER LUBBERS: OK, we’ve got a question right over there AUDIENCE: I’m a little new So not that I didn’t love the analogy with the pirates, but can you do a brief summary and– [LAUGHTER] [APPLAUSE] JAKE ARCHIBALD: Excellent, sir AUDIENCE: Well, we could the garbage collection and– COLT MCANLIS: Gaarrr-bage collection [LAUGHTER] COLT MCANLIS: Yeah, absolutely So it all comes down to this Is that garbage collection events only kick off when there’s unreferenced objects sitting around in your memory heap So you allocate an object, you de-reference it, and it’s sitting around This is going to happen over time You’re just going to continue to do this At some time, you won’t be able to control it It’ll happen randomly The garbage collector will decide it’s time to take 10 milliseconds of your frame It’ll stop I’ll do some work It’ll clear out your unreferenced objects And then, it will give control back to you This will eat your frame rate Now, it won’t eat the frame rate equally across every apps I think what we were trying to say earlier was tools not rules, right? Which means take everything we say up here with a grain of salt against whatever you’re profiling So the whole point of my talk was don’t let your objects die, and it’ll keep your GC from actually running, which means you actually have to manage the memory yourself This is something I’ve been harping on JavaScript developers for almost a year now is, quit being JavaScript developers Start looking back towards the trends you see in C and C++, because those patterns of writing code actually result in very, very fast JavaScript execution So sorry for everyone in here who doesn’t agree with that [LAUGHTER] PAUL LEWIS: You’ve got the microphone now AUDIENCE: OK, so we have a lot of really good profiling tools in a desktop environment– PANEL: Oh, yeah, he’s going to ask about mobile AUDIENCE: –if we’re profiling in a mobile environment, that’s real, not emulated PAUL IRISH: Yeah, so everything that we showed

today in the Chrome Developer Tools works against Chrome and Android, all of it COLT MCANLIS: Give us a round of applause PAUL LEWIS: Yay! [APPLAUSE] PAUL IRISH: So the memory management stuff, I didn’t show the frame rate meter But actually the frame rate meter also shows you your available GPU memory and how much is currently being consumed, which gets really interesting when you are scrolling images into view and out of view, and images are being decoded into memory and not And so, Chrome in Android has extremely extensive developer tools Firefox does as well And mobile Safari does now as well So really the only browser that does not have good tooling is the legacy Android browser in the web view But as far as dealing with that, your options are that you have [? Winery. ?] And you don’t have a lot of the performance tooling But pretty much you can extrapolate the performance of Android browser based on the performance tools that you use inside Chrome So debugging Chrome in Android, all the improvements that you make will have huge impacts in Android browser PAUL LEWIS: One thing that I think it does touch on is you still need the device And this remains a challenge that you can’t emulate the GPU of a mobile device from a desktop device It’s just not the same thing It’s not got the same driver It’s just not the same thing That remains a challenge I don’t think there’s a good answer yet other than have the device that you’re trying to ship for on your desk tested against that profile in that You may have a lot of devices ultimately But there isn’t a shortcut to that process I mean, you can get really far just using Chrome DevTools against a decent Nexus device, for example You can do that And you can get pretty far And you can extrapolate, as Paul said But you might need to just get specific devices COLT MCANLIS: It is worth pointing out there’s a fantastic blog post out there that shows with the Nexus 10 device you can actually emulate different frequencies and patterns And you’re actually able to emulate a whole swath of different performance profiles with a single item, including different resolutions and whatnot So find that post on G+ PAUL LEWIS: I’m just going to throw in that I have seen bugs very specifically on certain handsets for the GPU that didn’t manifest themselves on anything other than very specific hardware So sometimes you’re just going to have to buy it JAKE ARCHIBALD: I haven’t said anything for this question And I’m feeling left out [LAUGHTER] JAKE ARCHIBALD: So– COLT MCANLIS: Give it back! [LAUGHTER] PETER LUBBERS: We’ve got our next question, right here AUDIENCE: Yeah, so thanks for some great performance tips I think this goes for Paul Lewis I think you showed some examples of that I, as a developer, as a front-end guy, I need to combine an animation frame, and a scroll handler, and an [? event ?] handler And I need to combine some positions I need to remove some class If I’m scrolling into a group performance, I think that’s a lot of complexity to add on each individual front-end developer in this room, that I need to figure out, OK, I’m scrolling So I should probably remove a class so I don’t have concessions And– PAUL LEWIS: Right AUDIENCE: –do you think that’s a problem? Or we you looking into some ways that we can annotate these things, including the different ways? PAUL IRISH: That’s a good question PAUL LEWIS: Yeah, the tools should tell you, I think The question is, OK, dealing with this performance of scrolling, getting fast scrolling adds a lot of complexity for developers Is that a good thing? A bad thing? Evil? Happy? Smile, smile– no, as I said, first of all, again, it’s a tools thing If you don’t have this problem, don’t worry about it If you do have a bottleneck, you want to solve it If you play the cards right, you should expect the browser to do the right thing You shouldn’t expect fast performance You have to understand the implementation today That gap will close over time as the implementation gets better But it doesn’t remove a developer’s responsibility to understand the system they’re programming for COLT MCANLIS: [CLAPPING] PAUL LEWIS: [LAUGHS] [LAUGHTER] COLT MCANLIS: Thank you Well said PAUL LEWIS: I try Where that line is– I think the thing that personally frustrates me is how easy it is for you to shoot yourself in the foot today I would love for it to be impossible for you to shoot yourself in the foot I would But I don’t think that’s going to happen anytime soon We’re doing everything we can to make sure that your code runs well And you can imagine– the web is the most general computing case that you can probably think of Every developer writes code differently, that has different problems in different places, because you can do pretty much whatever you feel like doing This is great This is the brilliance of the web It’s unbounded But writing something that can interpret unbounded and do it

well without you having to step in and go, actually, here’s what I meant, Mr. Browser AUDIENCE: That’s why my second part of the question was, are we looking into other ways we can annotate this so, hey, my elements I’ve got animation from the scrolling key card has– PAUL LEWIS: Yes AUDIENCE: –rendering some little– PAUL LEWIS: Right, so we’ve just recently added a Show Potential Scroll Bottlenecks checkbox inside DevTools, which is like it’s going to put a box around it and go, hey, you have a touch handler here, which, for various reasons, will get in the way A mouse wheel handler is very similar So we’re looking at ways, where we see these things crop up, that we flag them to you, give you the kind of alert that this might be a thing And it’s kind of a hand-in-hand thing Hopefully, you’ll then go, huh, I maybe don’t need that there I’ll remove it COLT MCANLIS: Can I say something angsty, really quick PAUL LEWIS: Yeah COLT MCANLIS: I want to make sure we get through all the questions But I want to say something super angsty Because I’m the angry bald one He’s the happy bald one Let’s be very clear This is a perfmatters meet-up This is a perfmatters talk You’re here because you care about performance You’re here because you should own performance, right? The browser will do what the browser’s going to do The spec is going to do what the spec is going to do You are in charge of your performance Ye be the master of ye ship, right? AUDIENCE: Aarrr! COLT MCANLIS: And the browsers are going to optimize differently But, dear god, if anyone in this perfmatters meet-up thinks that any other view besides you are responsible for your performance is the right one, I’m sorry, but you’re missing the boat here, literally, right? Own your performance Take pride in it Perf matters Wear it like a badge Show it to your boss, your wife, your ex-girlfriend who thinks you’re not worth anything anymore Wear the badge Make it your credence And you will ship better products Don’t wait for the platform Don’t wait for the browser Don’t wait for the guy sitting next to you Be the captain of your damn ship Thank you [CHEERS AND APPLAUSE] JAKE ARCHIBALD: I’m going to add something boring to that, in that part of the standards process is we– because if you’re finding that you’re doing these tricks with JavaScript to enhance performance, like adding an element over the top to catch hover events so you see they’re not going down to the CSS, make noises about that on the standards groups as well Because when we see this common pattern happening loads of times, we can put that directly in CSS, and it will be faster still We saw this with things like query selector role, CSS animations, that kind of thing PAUL LEWIS: Actually, generally, just let us know if you find something that really sucks from a performance point of view We love those because we put those in front of engineers We talk it through with them We either would say, oh, yeah You could change a code And that would fix this problem Or it’s just something that’s like a platform thing that we’re trying to fix and fix quickly So if you find anything that’s just pathologically bad, then just let us know We’d love to see a bug filed against it And then we’ve got something to rally around OK, all right AUDIENCE: –That kind of sums up what you just talked about The HTML5 Dev Conference introduces things like, hey, spice up your pages with CSS animations So I actually had a situation where I wanted one button to stand out as a command people should be noticing And I put it in And all of a sudden, a couple weeks later, I realize that my CPU’s getting eaten up And so, I think, to put it in Colt’s terms, we’ve been given a plank, and we can walk off it, if we wish, OK? And so, I totally agree This was very enlightening today And so, I had an offline discussion with a couple of you And I’m very impressed with the tools And I think one of the next steps potentially to take– and I’d like your commentary on it– is a little bit of AI to say, hey, how are you shooting yourself in the foot? How are you killing yourself? Because a lot of people are very functionally oriented and aren’t really proactively looking at the tools So I’d just like your comments on that PAUL IRISH: One of the things that we want to do inside the Chrome DevTools is– right now, the situation is that if your interested in performance, you profile You look at the results You interpret them, and you make changes And that works extremely well But it doesn’t reach everyone Because not everyone asks the question, why am I slow? Why is this not great? So one of the things that we want to explore is being a bit more proactive in our recommendations So oh, I noticed that you’re not concatenating your JavaScript and production And I noticed that you have paint storms I noticed that you’re layout thrashing for three seconds as you’re loading the page And we have abilities to determine this and show that to the user We’re not there yet But it’s something that we definitely want to do PETER LUBBERS: We got two more questions And if we could keep them pretty short AUDIENCE: Sure, really quickly Using the WebPageTest thing, I think it’s a performance thing Stuff that happens after the [INAUDIBLE]

captures stuff up till there Does that matter in terms of loading more network access and stuff, after that event? Do you think that matters to– PAUL LEWIS: I think we’ve all got an opinion on this one, apart from Colt AUDIENCE: –mostly to things like search engines and such I guess it could also be used as– PAUL IRISH: I don’t think I understand it PAUL LEWIS: No, I don’t think I– now, you’ve added the search engine thing PAUL IRISH: Could you repeat? Because we’re not exactly sure JAKE ARCHIBALD: Do you mean our search engine’s going to penalize you for extraloading after onload? AUDIENCE: Yeah, exactly Because WebPageTest mostly does until that point PAUL IRISH: Ah, OK So on WebPageTest, the definition of fully rendered for WebPageTest is 2 seconds of idle network activity after window onload So it basically looks at the network waterfall, makes sure that the network activity is still and that the page is done And that is how they determine doneness, which seems like a reasonable thing Search engines are pretty OK with that, too JAKE ARCHIBALD: Yeah, if it’s a great user experience for you to get to first render really quickly, but then use the network to cache stuff for the next page or start loading something further down the page, do that Don’t do something else because you think it’s going to get you a better rank on Google Because ultimately, Google is going to change how it works, how it search indexes based on what gives the best user experience So never try and game it PAUL LEWIS: Just sort of related, every time you do the progressive enhancement thing, and you load the page And then you run some JavaScript that injects something else into the page And then you do some Ajax, and you put something else into the page Just out of interest, remember that you’re paying the tax every time you do that Because you’re going to have to layout– well, recalc style, “layout.” You’re actually going to parse HTML– recalc style, layout, paint, uncomposite for each one of those things just in the process of loading So there’s a real balancing act here It’s not a one-size-fits-all, right? You want to get stuff on screen quickly But if you keep nudging things along, you’re going to pay that tax several times over So just profile it, figure out what your metrics are for winning– yay– and then go there MALE SPEAKER:Are we on last question? AUDIENCE: Hey, Colt– PETER LUBBERS: OK, I guess we’ll have two final quick questions COLT MCANLIS: Yes PETER LUBBERS: Quick answers COLT MCANLIS: Sweet I’ll answer in 10 words AUDIENCE: So isn’t your object pool going to have to be pretty specialized to not proffer any classes? And also isn’t GC time proportional to number of live objects, especially in mark and sweep? So will your mark and sweep be super, super long, if you happen to incur one COLT MCANLIS: Yes, you should have object pools that are unique to class-specific data I generally disagree that you should write JavaScript with heterogeneous types in it You should have an object and duplicates of that that are heterogeneous Again, that’s my C++ background And yes, mark and sweep is fantastic And the iterational garbage collector in V8 is probably one of the most cutting edge you’ll find anywhere in the industry However, you still lose time And we can sit here and debate all day about the micro-optimizations Go to the tools Go to the tools Go to the tools PETER LUBBERS: And our final question of the night AUDIENCE: Right, these questions are for the angry pirate captain So you talk about reallocating your memory, and that’s the memory that you can control, like all your JavaScript objects What about the stuff you can’t control, like images floating in and out of view? I know in something I’m working on in the moment, I have very little JavaScript getting allocated But it just ramps up and GC pops And it’s because a lot of images are floating in and out of view Can you control the garbage collection on that stuff as well? COLT MCANLIS: That’s a fantastic question For people who didn’t hear that on the live stream, can you control the garbage collection of things that aren’t JavaScript-created objects, images, DOM, and stuff like that? So we could sit down and profile your whole site and give you a million different ways to handle this The short answer is, yes, if you’re willing to be super tricky For instance, objects will come down off the network and images will be created You can’t fix that That’s under the hood But how it’s resident in your memory on the page, for example, having a static pool of 10 canvases, right? And then, swapping and managing in how those canvases are filled as sprite sheets and how the UV coordinates on that is handled could definitely be a potential solution for that that would cut down a lot of your texture-memory residency there So thousands of different things, depending on all of your use cases Again, this comes back to it JAKE ARCHIBALD: You can talk about that PAUL LEWIS: I think, in general, something like the image one, very specifically, we’re working really hard

There are loads of optimizations we feel that we can make in terms of image decoding and image resizing in the pipeline When you see them crop up in DevTools and you see these huge green spikes of paint, and you see a little arrow And you’re like, I know what’s inside this You spin it and it goes, image decode Image resize! And you’re like, yeah, I knew that was coming And we want that to be a complete nonissue, right? We just want it to go away We have ideas The engineers are looking at it It’s a thing So we want it to go away In the short term, it’s about avoiding resize, like we said before It’s about doing all you can to mitigate it But it’s just one of these things that is hopefully going to get better over time We know it’s a thing We want it to be better But can go crazy and do the canvas thing I did that It’s weird COLT MCANLIS: But it works PAUL LEWIS: It works But you just go so far off road You understand that the browser does it for you for a reason JAKE ARCHIBALD: Can I say something? PAUL LEWIS: No, Peter’s going to take it away JAKE ARCHIBALD: No– COLT MCANLIS: Don’t give it to him! Don’t give it to him! JAKE ARCHIBALD: Aaah! [LAUGHS] The guy who did really well on the quiz that I did, I owe you swag Yeah, come up to the front And you’ll get swag Brilliant In a minute COLT MCANLIS: Not now JAKE ARCHIBALD: I’ll stay here COLT MCANLIS: That’d be super awkward JAKE ARCHIBALD: Yeah COLT MCANLIS: If you just came up here, and we’re like, yay! JAKE ARCHIBALD: I’ll present to you PETER LUBBERS: All right, well, one more time A big round of applause for these great speakers [APPLAUSE] PETER LUBBERS: Thank you Thank you [APPLAUSE] PETER LUBBERS: Thank you Everybody on the live stream, we had over 200 people on the live streaming, which was great Everybody, thanks for joining And that was one of the longest average view time, like 25 minutes per person So that was awesome So thanks for joining us All of these talks were recorded But they will be posted on our site shortly on the Google Developers Live site as well MALE SPEAKER: Tell your friends PETER LUBBERS: Yeah And we’d like your feedback So if there is on the meet-up site– when you’re done, you’re probably going to get an email seeing if you can give a rating Let us know your feedback We’re always open to making changes for the better So I hope you enjoyed it And we’re going to say goodbye to the live stream and move on to the raffle here Thank you [MUSIC PLAYING]