DOWNLOAD FILE via Mediafire HERE
DOWNLOAD FILE via Googledrive HERE
[music playing] 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, hugeround of applause to google for hosting us, for feedingus, for live-streaming us.
that's incredible. so a round of applausefor google. [applause] peter lubbers: all right,tonight's hashtags are here. there we go. all right, sfhtml5,perfmatters. and wanted to also give a shoutout to the folks from the grant-eddie winerythat are in the back. maybe a round of applause forthem for all the great wines.
peter lubbers: and forrocky, for djing this great music for us. he will be back in the break. thanks. peter lubbers: so i should haveclicked through here a little bit. so first of all, i want to thankyou all for coming and say a couple of words about thesponsors that keep these events free and possible.
again, the first one,specifically to google developers live team doinga great, great job. jamie, brian are here. they've been working forfour hours to get the live stream going. so i also want to say helloto all the people that are watching live. the last time i checked, it wasclose to 100 people live already watching aroundthe world.
so thanks to them forputting it on. google developers live, by theway, is sort of our google developers' tv channel,if you will. if you want to know more aboutdeveloper tools, or mobile, or chrome apps, just go there. developers.google.com/liveis the place to go. i wanted to let you know abouta great event that is happening in november. it's called the chromedev summit.
it's really a chancefor you to connect with the chrome engineers. it's going to be inmountain view. registration is going to openup in early october. it's going to be pretty limitedseating, as usual, like 300 or so, we can fit in. so registration will sellout pretty quickly. but it's a great conference. we're also going to belive-streaming that using the
google developerslive platform. so definitely lookout for that. there's a link there--g.co/chromedevsummit. how many of you arenew to sfhtml5? ok, some of you. so we have these monthlymeetings. we've had them now for overthree years, every month, usually the last thursdayof the month. but we have like one of thesebig events every month.
and we also host workshopsand other events. and our next event willbe all about webrtc. actually, it's goingto be two events. we're going to have threetalks about webrtc. chris wilson is comingto talk about it. we have a guy from vline. we have a guy from pubnubtalking about data channels. it's going to bea great event. and it's going tobe on october 9.
actually, the registrationopened kind of quietly. we didn't announce it tothe whole group yet. so you can still get in. and you know that maybe hard sometimes. so definitely signup for that. we have that event. that's a wednesday evening. that's not our usual thursday. it is going to be live-streamedas well.
and then the saturday followingthat, we have a great event, a webrtchack workshop. so actually come in. you get to run througha code lab or build your own webrtc solutions. we have a ton of webrtc expertsfrom google and other companies on hand to reallystep you through. it's a really great wayto get into that. ok, i wanted to thank adobe,one of our sponsors.
of course, great toolsfor html5, and great stuff they're building. they're extremely active on theweb platform docs front. and that's a cause that'sreally near and dear to our heart. we really want to push thatforward, get the right web documentation for allof the reference information of the web. also--
peter lubbers: --a great eventcoming to san francisco and the moscone center. so it's now, i think, thefifth version of it. and it's getting biggerand 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 youhave been there. if you haven't, it's anextremely good deal, and two
days of full-on conference,followed by more training. so there's some greatsessions. anne burkett is here. she can tell you more aboutit at the break. but basically check itout, html5 devcon. what's the date? october 22 and 23, and aroundthat there's days of training. we have a new sponsor, pubnub. they make software for real-timepublishing and
subscribing to data rightin your application. they actually have publish andsubscribe as javascript functions, making it really easyto create real-time data feeds and applicationsaround that. ok, bountysource is here. they're going to be doing alittle lightning talk at the end of the first break. so they'll come back, and theywill also be raffling off some great prizes.
and by the way, html5 devconwill also be raffling off two tickets to the conference. and there will be three chromedev summit tickets. peter, do you want to say alittle bit about the kaazing? one of our founding sponsors-- peter moskovits: sure,thank you. my name is peter moskovits. and i'm here representingkaazing. kaazing has been a sponsor ofsfhtml5 since its inception.
kaazing has a high-performance,enterprise grade, very secure, veryscalable websocket server. we are a start-up downin mountain view. we have about 50 employeesat the moment. and we are hiring veryaggressively. so if you're interested inevangelist roles, you're interested in engineering,please come and find me. thank you. peter lubbers: all right.
ben, one of our newsponsors intel. ben, do you have a couple ofwords to say about intel? ben odom: yeah. hey, my name's ben odom. i'd just like to talk a littlebit about our new xdk new, integrated developmentenvironment for html5-- totally redesigned, browserindependent, works in mac, linux, windows, totally free,has brackets integrated. we use cordova 2.9.
it allows you to publish topretty much every platform out there, windows, android, pickyour favorite stores. you can also do web apps. so there's some cards over thereto tell you where to get it-- software.intel.com/html5. take a look. give us some feedbackin the forums. and we appreciate it. peter lubbers: thanks, man.
peter lubbers: all right, sowe have vitamin t here, a special sponsor for thisparticular event. want to say a couple of words? glorianne: thank you. peter lubbers: we have a prettylong break, as well. so you can meet up withthe 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, ourparent company, which is the global leader increative staffing. so what do we do? we help people likeyou find jobs-- front-end developers, visualdesigners, 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, orif you have friends who are looking, please comeand find us. we're in the back right nextto the registration table. and also, a little surprise,we have a giveaway, too. we're going to be raffling offthis 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 awayat the very end. ok, thanks so much. peter lubbers: thankyou, glorianne. one of our special sponsorfor tonight is dice. and i don't know if you've seenit, the dice tech trek bus is back in town. that looks like this. one of our members won this ata previous event and had a
blast, basically, be taken allthrough san francisco. female speaker: yes,that's right. peter lubbers: tellus more about it. female speaker: so withdice.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 ofgreat stuff on there. you can get a t-shirt youcan get dice pens. but we're going tobe raffling off a
couple of things tonight. one with you guys, and one overhere, back at our table. but we've got thecoffee maker. but the best thing is anall-expense paid tour tomorrow night, for you and twoof your friends. and we're going to takeseveral winners. and we're going togo to dinner, and dessert, and a bar. and we pay for thewhole thing.
and the bus is amazing. it was lenny kravitz'tour bus. now, it's the dice bus. so come check it outon the way out. and we'll stay around fora while afterwards. so you can register atthe table and go check out the bus. peter lubbers: thank you. so hopefully, you all havea raffle ticket.
because we have some greatprizes tonight. we have a chromebook pixel. some of these sponsor prizes. we have wine from grant-eddie. there's actually tworaffles for that. there's a regular raffle,wine prizes. if you want to increase yourchance for more wine, drop off you name for theirmailing list. and you get an additionalchance to win.
all right, so i want to hand itover for the first speaker. so i'm really excitedabout the four speakers we have tonight. actually, jake and paul cameall the way from london. and we said, wow,this is great. you're here in town. colt and paul arealready here. let's do a performance talkwith four speakers. and i'm really excited.
the first speakeris colt mcanlis. he's a past speaker. he's one of our alumni. you know him from the udacitystudy group that we've hosted here. if you're not familiar with thatstudy group or if you're not familiar with the html5game programming udacity course, definitelycheck that out. we did this eight-week studygroup here, right in the
google office, actually. so i want to handit over to colt. colt is a developer advocateat google. he focuses primarilyon performance. and a round of applausefor colt. peter lubbers: needme to get that? colt mcanlis: can we switch overmy slides right there? hey, real quick, everybody. you have no idea how hard itis to plan one of these
events, put it together withall of us crazy people, as well as the cateringand the prizes. peter lubbers and vanessa andeverybody involved with this meet-up had donean amazing job. can you give them around of applause for free beer, please? colt mcanlis: yeah. [laughter] peter lubbers: youdo have a mic on.
colt mcanlis: yeah,i got a mic. how am i doing onthe live feed? male speaker: do you want thepodium mic or the handheld mic for the room? colt mcanlis: ok. peter lubbers: ok, right. colt mcanlis: how's that? male speaker: we'll alljust wave to you. colt mcanlis: can youhear 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. colt mcanlis: we can do this.
we can do this. all right, we good? in the back, up? down? middle? bald? someone said, i'm bald. that's not cool, dude. i saw that.
colt mcanlis: allright, we good? no, maybe, all right. i'm just going tokeep talking. how about that? peter lubbers: yes, brian,do we need to turn it up? male speaker: as highas you can get it. colt mcanlis: highas 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 youget a mic in your hand and you're in front of people,you just feel sexy? colt mcanlis: you feel like youwant to talk, talk to you. i feel your pain, right? if there's anything i could doto entertain a crowd while technical problemsare going on. all right, my turn. fantastic.
hello, everyone. my name is colt mcanlis. i am the team lead for theperformance section of chrome developer relations. and tonight, i want to talkto you about the joys of static-memory javascript. now, i'm going to let you knowthat i gave a great talk at the html5 devcon earlierthis year in april. and i had a little section inmy talk about static-memory
javascript. and bar none, the most questionsi got was about and so i actually went back,and i actually wrote this presentation a couplemonths ago. and i was very happy that peter allowed us to do it tonight. but it was really interesting. because when we tried to getthis thing together, really it was a one-off shot, right?
we had to get the guys fromeurope in town, and they only had availability for a window. and then we had to figure outwhat day of the week we had availability for google'sfacilities, and catering, and all this other crazy stuff. and it was the most random shotin the dark for us to end up on september 19. now, i'm in a roomfull of nerds. does anyone know whatseptember 19 is?
audience: aarrr! colt mcanlis: yaarrr! colt mcanlis: now, i'ma very simple man. and i had to stand in the mirrora couple days ago. and i had to ask myself, howmuch of a man i was. if i could take this opportunityto give a talk on the most random shot day to beable to give a talk in front of a room full of my fellownerds and actually do the entire thing as a pirate.
colt mcanlis: my wife didn'tbelieve 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? colt mcanlis: listen, yebilge 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!
colt mcanlis: aarrr! now, that's the crew i belookin' to have tonight. aye. now, tonight, we be talkin'about one thing in common. we be slay'n thewaste monster. it's vile tentacles be keepin'your applications from going too fast. i lost me leg andgot a new one. that's why i hate it.
my name is captain mainroach. and i'm here, not tosave your bodies. because the monsterbe 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 fromcaptain mainroach tonight that
ye want to be tweetin',make sure you be usin' the right hashtags. because we had thoseback in the day. colt mcanlis: and also, bemaking sure that ye visit our website performancegroup on google+. it be a great place fora bunch of mootin-- mootineers? that came out wrong. all right, this is a littlewell rehearsed.
make sure ye visit it. sign up at goo.gl/webperf. now, listen here, ye mindlessyellow-bellied dogs. i'm not here to listen to wallowand wane about whether or not ye like the javascriptgarbage collector. i'm here to tell you thatit be a vile beast. it be takin' everythingfrom ye. because as it doesn't it's eviltask, it's going to be takin' away a little bitof your frame rate
every single time. and i'm not here todebate yer dogma. i dunna' care whatgods you live to. be that of manage memory, orstatic memory, or dynamic, anything else. i'm here to worshipone god alone. and that be the one ofapplication speed. can ye say, aarrr? colt mcanlis: one moretime, aarrr!
colt mcanlis: aye, applicationspeed. so stow yer noise, tonight. i won't be debating whether ornot javascript's the best language or the worstlanguage. but i'll be telling ye how tomake your applications fast. because that's whyyou're here. aye? colt mcanlis: aye. yer learnin'.
that's good. so i'll tell ye the troublewith memory. now, many of ye may not beversed in the wild seas of sailing around memoryproblems. 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 everythingin 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 yerbuccaneers, having a good time writing yer webapplications, sooner or later, one of ye's goin'to drop dead. colt mcanlis: in yer webapplication, one of them will be running around, allocatingmemory or adjustin' the dom.
and sooner or later, it'll haveone 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 thingsto do than remove it. instead, you leave it on theground, festering, when the rats come and pickat its bones.
and the gnats come and layin its eye sockets. and the gulls come andfeast on its flesh. and only then, only then whenthe monster gets a whiff of the piles of corpses that youbeen leavin' around in yer application, only then, will itsummon it's bulbous arms to yer poop deck. poop deck joke, that's good? poop deck? more poop deck jokes?
and when this beast come andfind yer vessel, it dunna' know who's livingand who is dead. it's a blind beast filledwith hate and rage. it'll bring its tentaclesup aboard yer vessel. and it'll sniff every one of yercrew to figure out which one be inactive, and which onestill be on the stack, ready to be used again ata future date. and when it finds its evil preythat it be eatin' on, it'll take it away from ye.
and only then, will yer dinghybe operating at peak efficiency, now that all thecorpses have been hauled away on your behalf, yelazy captain. but i tell ye this. the beast takes away asmuch as it giveth. because yer schooner be goin'fast on its mission. it be hittin' 60 knotsper second. everyone knows, that's themagical speed of a boat. and as it be goin' at 60 knotsper second, all of a sudden,
those piles of corpseswill rise high. and you'll hear it. you'll hear the vile beastcomin' from afar. its hate, and its dread, andit's demon-filled life coming aboard yer vessel, andit'll stop ye. and it'll take away those knots,and stop ye to zero. and all of yer men aboard yership will stand there idly and wait for it to do itsdemon-filled task. meanwhile, your users arestanding there, asking why yer
ship is not moving. colt mcanlis: and ye can't belike, it's the monster. it's not me. because they blamethe captain. and then you get fired. and ye have to talk likea pirate all day. colt mcanlis: and when it's donewith 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 livesand breeds off of, your reluctancy to allow the corpsesto lay around because you've got better thingsto do, like css. aarrr, i be a venture piratefrom back in the days of c++, where a man had to manage hisown memory, and his stack overflows, and threadingproblems, and kernel issues. but that be a simplertime then. we didn't really haveuser interfaces. it was mostly command prompt.
moving on. what ye be needin' to know, isthat this monster can strike at any time, any timeit chooses. it doesn't matter what youthink it should be doin'. it's going to do whatit wants, be it a callbackhandler, or when theframe is updating, any time your javascript-style dinghybe floatin' on the water, it'll rear its ugly headas it sees fit. and you should know that themost important thing about
your vessel is that itstays constant at 60 knots per second. it doesn't care what ye want. it cares for the fleshit's come to claim. colt mcanlis: i see somescared in the house. they're like, where ishe going with this? are we talking aboutmemory or fishing? i'm really unclear right now? colt mcanlis: don't worry.
it'll come down. now, here is a greatchart, lads. you yellow-bellied sea bettersmay be lookin' at me and goin', listen tothis angry man! he be thinkin' garbagecollections a bad thing. i'm a friend with that beast. we go drinkin' onfriday nights. no! it is not yer friend.
it's just usin' ye for freedrinks on friday nights. i've been there once. we'll talk about that later. if ye dunna' get nothin' fromme diatribe this evening, i want ye to be rememberin'this one. this is a map built by themost evil of satanic of scientists that followthis beast around. and what ye be lookin'at here is two distinct groups of lines.
the first group is done by theresponsible captains who send their crew to the evil task ofmanaging the dead themselves. now, aye, it does take a littlebit more memory for the captain to ensure that the crewis doing the right thing, tossing its shipmatesoverboard. but you can see on the otherside is the one where the kraken, the evil corpsemonster be doin' the work for ye. now, these lines meannothin' right now.
but i'll tell ye whatthey do show. on the bottom line here thesenumbers chart out how much memory the system hasrelative to the application it be runnin'. oh, for yer nautical folk, howbig the sea is compared to the size of your ship, aye? colt mcanlis: aye? audience: aye! colt mcanlis: aye!
more beer, aye! colt mcanlis: now, what ye beseein' here is three distinct areas that i wish to be pointin'out this evenin'. because you'll find thetreasure soon, heh? first, is ye see the bad zone. if yer memory is between two andfour 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 monsterbe larger than ye think. and when the body of water thatyer schooner be floatin' in be small, it has nowhere toput its hefty load of lard. so it must put it uponyer vessel, all the way on the poop deck. ye asked for morepoop deck jokes. i'm going to give them to ye. you have to laugh now.
[weak laughter] colt mcanlis: yeah, apity laugh, right. now, when ye end up in thissecond region here, yer doin' a little bit better. you can see that four to sixtimes the size of your memory requirements are ye be aboutaverage compared to what yer crew be doin' manually. this is about the sweet spoton mobile devices today. these little devices that theyhave that track all of yer
movements as yer goin' abouteatin' yer food and plunderin', an' pillagin', andall yer pirate ways, right? this is where ye be sittin'with yer memory. but, unfortunately, that's notwhere the sweet spot be for yer vessel. nay, yer ship needs to be in awide-open ocean between six and ten times the amountof memory that yer application be needin'. and it's only then when ye startto see the hate from
this vile corpse monsteractually be mitigated. because the water is able tohold its massive rolls of flesh-eating, corpse-fillingbile, drinking-- fat. unless yer here,ye be screwed. so make sure that yer javascriptclass schooner knows what the size of thewater it be goin' in. if ye remember nothing,remember this graph tonight, aarrr.
audience: aarrr. colt mcanlis: now, i will tellye, there be one vessel on the seven seas that seemsto escape the corpse monster many times. and in fact, many have saidthat it be the fastest javascript vessel inall the world. it's known as thess emscripten. do ye know the vessel? colt mcanlis: i said, doye know the vessel?
you want to know whyit's so fast? because it's captainis damned. everyone really confusedright now. is this an open source boatthat we're talking about? because that means lotsof people are damned. colt mcanlis: open sourceboat, that would be interesting. that's a new kickstarter. ha, ha.
colt mcanlis: ya-har! and the reason its captain bedamned 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 slaughtersthe lot of them. slits their throats, standin' onthe deck and let the blood flow across the planks andinto the water, where the sharks be feastin'and the gulls be
squawkin' and nestin'. and ye know what he does? he brings a single shamanon board with his deck. and that shaman doesn't letthese poor men die. nay, he keeps them in sometribal state of not-dead and not-livin'. not dead enough for the corpsemonster to come aboard. he manages the dead objectson his ship, yaarrr. is anyone gettin' that yet?
and what he'll do is he'llsummon a corpse as he needs it and revive it and then send itback to dead by slittin' its throat again. aye, this be an evil captain. but what he does well is heescapes the kraken monster once again. it can never seem to catch thisss emscripten, because it can never find it, because thecorpses never rot and ripen. you see, this evil bile-flowing,covered with
boils and rank and fester,and alimony taking-- umm, uh. colt mcanlis: ok, so i feel ishould tell ye something. it is true, the monster andi were once in love. ye see, i was a young buccaneerand hadn't seen much of the world. but, ye know, we grow, and wechange, and the monster and i parted ways. but we're not here to talkabout me tonight.
but he does take half of medoubloons every month. my job tonight, to be keepin'ye away from the path i be takin' and teachin' ye how touse the techniques of ss emscripten to keep yourdinghy moving fast. so we'll start with your ownconcept of a corpse pool. so when ye be gettin' yer mateson your vessel, make sure to slaughter them thusly. usually across theneck 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 doneor ye need a crewman to achieve a goal for ye, thebest 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, ithas the memories.
it remembers whoit used to be. so when you grab it off it'scorpse pool, ye need to give it new clothes and set itsproperties so it cannot remember who it usedto be, and instead, assumes the goal ye want. and when ye have ademon-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 makingthe world a worst place for common folk. colt mcanlis: take a secondto let that sink in, a zombie on sepdat. yeah, that would get veryawkward very fast, yaarrr. and when yer done with it, muchlike the ss emscripten, ye slit its throat, and put itback in the pool, and let it float away. again, this will keep the krakenmonster from actually
coming to board yer deck andtakin' away yer speed. and this is some hieroglyphsfrom an ancient time. but i'll walk throughthem anyway. because i happen to speak it. so you can see that to use sucha thing as a corpse pool, the first thing you need to dois actually grab a corpse and revive it, and then set it'sproperties accordingly, like where it will spawn inthe universe, aarrr. do a jig.
walk the plank. and then when yer done, slit itsthroat, throw it back on the pool, and then make surethat any clothes ye may have assigned to it becast overboard to davy jones' locker. he happens to sell thingsout of the locker. that's why it's a locker. it's actually a second-handpirate store, see, aarrr. that's where we get mostof our clothes, aarrr.
what'll happen is when you usethis sort of pattern of corpse pools or object pools, whatye'll be seein' is that your memory will slowlygrow over time. it'll be ridin' a wavethat will never end. and yer ship may nevercome back to shore. it'll just slowlybe increasing. now, what ye'll notice, though,is that ye be spendin' a lot of time in here, movingbetween all these ranks. and it's worth notin' that underthe hood, javascript may
be doin' something that ye notbe planning as captain. and as captain of your vessel,you're in charge of its fate, aye? colt mcanlis: it's not incharge of your fate. it's a boat. you're the captain, aye? colt mcanlis: so don't letit do what you don't want it to do, aarrr. colt mcanlis: do ye know underthe hood what happens when you
have a pool of corpses andye add another one to it? well, if ye've actually maxedout the number of corpses and ye add a new one, you knowwhat yer boat be doin' behind yer back? it be creatin' a new pool ofcorpses, double the size. that takes a lot ofextra memory. i don't know how to saythat in pirate better. that was a little failure. that's ok.
we're doing this onthe fly, aarrr. now, let's say ye considermovin' forward again. and once again, ye get to thepoint where instead of 200 corpses, ye added yet another. and then ye have move againto 200, to 400 corpses ye be moving to. now, what is interesting aboutthis is that every time ye add a corpse to the pile, yer shiphave to go back to bay and make more room.
ye need to make changes to yerhull to accommodate all the corpses ye be havin'layin' around. but once yer hull hasbeen destroyed, you have to rebuild it. so you have to deallocate theprevious array in order to make room for the new one. this creates more waste for thecorpse monster to come and fester, and bleed, andtake away from ye. it'll be takin' yertime, lads.
it's not a good thing, aarrr. colt mcanlis: aarrr, yegettin' bored now. aarrr! colt mcanlis: don't worry,there'll be more booze soon. really, what ye need to bethinkin' ahead as the captain of yer ship, how many deadcorpses will i need to get this job done? yaarrr, tell thatto yer manager. that be ceo-level thinkingthere, yaarrr.
colt mcanlis: yes, yaarrr,ye see, we can ship a self-driving car. but how many corpses canwe fit it in, yaarrr? i guess that's a question yeask in las vegas, yaarrr. some people got that. so what ye need to bethinkin' of is how many corpses ye need. and instead of actually goingback to harbor many times, and rebuildin' yer ship, and gettingmore corpses, ye need
to think ahead and hirethe corpses and kill 'em ahead a time. and the question that you have,as simple pirate folk who are very bad at math, is howdo ye determine the number of people ye'll needfor this evil task ye be settin' forward. and mostly how many knives willye 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'ttranslate to pirate. just follow with me. it'll make sense in a minute. so as yer ship be goin' out, yeneed to be running tests. ye need to run through what yethink the average duration of your journey be. and ye need to be figurin' outhow 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 yourmaximum number of corpses be, or yer average numberof corpses, or how many of them are bald. then, ye be tellin' me becausethen i'll be upset with ye. we're mostly discriminatedagainst, us bald pirates. we don't have the facial hair.
and so, we can't go to allthe parties, yaarrr. once ye average been donethrough this process and ye remember how many corpses yemay need for your final journey, only thencan you embark. and when ye do yer finaljourney, ye'll know ahead of time how many objects toreference 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 morestair-like, yaarrr.
audience: yaarrr. colt mcanlis: yaarrr. and the number of corpses yeneed will statically decrease. and ye need not go back tothe harbor so many times. that means ye stay on the waterlonger, and ye stay faster more often, yaarrr. colt mcanlis: the windin yer sails be the best one about, aye. colt mcanlis: now, sooner orlater yer goin' to need to
slit yet another throat, eventhough you've pre-allocated yer corpses. and when ye do this, ye need tobe thinking back about what yer ship be doin' withoutyour knowledge. ah ha, ha. will ye let it go ahead anddouble the arrays every time? [interposing voices] audience:no. audience: yaarrr?
colt mcanlis: that was themost awesome response. yaarrr? colt mcanlis: naarrr? colt mcanlis: nay? audience: nay. colt mcanlis: the best was i sawone guy over here look at his buddy to go, yar--nay-- nar-- no? colt mcanlis: what ifwe 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 shipdo what it wants. you're the captain. you make the rules, yaaarrr? audience: yaarrr! colt mcanlis: and instead ofallowin' it to double in size every time, as yer applicationneeds it and yer dom changes
and yer objects move, ye beusing what we call a linear growth array, where instead ofactually 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 increaseit by certain amounts. ye can be 100 corpses, or 1,000corpses, or a platoon of corpses if ye choose. either way, they're the king'smen, and they're free, ha, ha,
ha, ha, ha, ha. sorry, for the britishin the audience. yes. now, the linear growth array,actually, be good, because ye be amortizing the costof the corpses over many, many corpses. so every time ye allocate anew array, you're actually amortizing the death of allthose because ye do it once, ha, ha, ha.
it's tricky piratemath, ha, ha. look, that be easy to doin this structure. ye can simply index into it witha little bit of magic and fluff and dust. ye be findin' what ye need. however, deletion damnneed be impossible. i do not recommend that. colt mcanlis: don't do thatduring 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 isan app-suited container for the growth of static corpseson yer vessel. it allows ye to grow. it allows ye to preallocate. it allows ye to stay fluid whentimes change, yaarrr. and that be the pirateway, he, he. now, for all of ye in theaudience, ye may be saying to
yerself, i have no freakin'clue what my memory be doin', yaarrr? colt mcanlis: welcomeaboard, mateys. colt mcanlis: that was themost hearty yaarrr. yes, i have no idea whatyer talkin' about. colt mcanlis: i am solost right now. colt mcanlis: thanks forplayin' along, lads. for those of ye lookin' tounderstand what's going on under the hood of your deck,ye need to be lookin' at a
couple tools to startoff, stick with chrome developer tools. it actually be givin' ye apretty good understanding of how many corpses and objects beused along the duration of yer trip over time. and with new tooling on thebottom, it'll actually tell ye what heap these corpses becoming from, be they the audio heap from the southern regionsof 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 applicationthrough the tools. figure out where yer memory isgoing and adjust accordingly. ye be the captain, aye? colt mcanlis: another greattool that's just come out. however, this shittypicture was all i could find on the internet.
colt mcanlis: because for somereason, they don't have anyone who could put up a morehigh resolution photo of the damn tool. there's a good tool calledadobe gcview. and no, i couldn'tget it workin'. so i couldn't take the picturemyself, yaarrr. this is a fantastic externaltool that will allow ye to do memory profile analysisfor multiple different browsers, yaarrr.
so for those of ye out here whomay be sayin', oh, captain mainroach, yer kind of offthe plank with chrome only, check this out. but seriously, put upa better picture. that's kind of embarrassing. i'm a pirate and i'm callin'ye out, yaarrr. so lads and lasses, my crewtonight, thank ye for listenin' to me. let me give ye some tipson how to avoid this
evil-buildin' mulch monster. first off, know that thismonster be eatin' away at the speed of yer ship. and that not be good. if you don't see that garbagecollection be hurtin' yer frame rate, yer not tryin'hard enough. build a better application. yaarrr, i'm callin'ye out, yaarrr. t-shirt for that man.
the of ye to the planks. high corpse churn summonsthe monster. if ye be movin' lots of objectsaround and not doin' yer duty, then the corpsemonster will find ye. it'll slow down yer vessel. and then, ye'll be cursin'all day long. and i will be sittin' backlaughin' [maniacal laughter]. kill yer crew before ye sail. sail them as zombies.
i dare every one of ye in hereto tweet that right now. kill yer crew before yesail #perfmatters. colt mcanlis: the bald piratetold me to say it. i'm not crazy. know yer corpse countby testin' yer voyage ahead of time. be the captain of yer vessel. don't let it control you. you're in charge, yaarrr.
colt mcanlis: that one hurt. hold on. oh-- i needed to stretch my yaarrr. when ye need more corpses, makesure ye linearly grow. don't allow the ship to do it. ye do it yerself. in honest, i miss thecorpse monster. we did separate.
and there were little'uns involved. but ye know, we'llbe back soon. with the new primitives in c++11, there may be a chance to get a better high-performanceallocation system, where i may not have to managemy memory myself. that's a separate discussion. anyhow, yaarrr, thank ye all forlistenin' to me tonight. and i'd like to remindye that we won't be takin' questions, now.
but we will be doin' it at theend of the night in a fireside chat manner, yaarrr. thank ye be for listenin'tonight. [cheers and applause] peter lubbers: thankyou, colt. all right, colt, we have aspecial gift for you, yaarrr. colt mcanlis: thank youvery much, yaarrr. peter lubbers: ok. colt mcanlis: another round ofapplause for the great sfhtml5
team, yaarrr. peter lubbers: all right, sofor the next talk, we have paul lewis. he came all the wayfrom the uk. and he's a developer advocateon the chrome developer relations team specializingalso in performance. he knows a lot of webgl, andit's been just great working with paul for the last-- what? about a year now.
so paul, are you mic'dup 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 overto laptop. like i said, we'll haveone more talk.
then we have a pretty good breakfor about 25 minutes. we'll have more time to hitthe different sponsor booths and so on. there's wine. and there will bedessert as well. so let's just switchthis out right now. and then, we'll have plentyof time for a break. again, a couple of great raffleprizes, conference tickets, and a whole stackof wine and so on.
so hang on to thoseraffle tickets. we'll have two more talksafter the break. and then we'll have a q&apanel so we don't take questions right now. we'll just wait forthat at the end. and we'll just pass themic around the room. all right, so, one moment. male speaker: we'rea good team. peter lubbers: [laughs].
male speaker: all right,thank you. do you need to put it behindthis [inaudible]? peter lubbers: hmm? male speaker: do you needto put it behind this? peter lubbers: maybe. so it doesn't fall. does he need this? [side conversation] paul lewis: all right,i got it.
i'm good. you all good? you can hear me? paul lewis: yeah? all happy, huh? [in pirate voice] now ye may be noticin'-- paul lewis: --that today-- [laughter and applause].
paul lewis: but i think not. paul lewis: yeah, but whati thought i would do is i thought i'd take a step back forus now, and i thought i'd visualize the speakersfor you by help of a trustee venn diagram. now, on the left, wehave bald people. on the right, we have pauls. colt, firmly in the bald camp. professor irish, firmlyin the paul.
me, making up the middle, theintersection, if you will. but unfortunately,we have jake-- paul lewis: --who's thinningup top and trying to get into bald. i wish him well. paul lewis: now, what i wantedto do is set the scene. and i feel like resettingthe scene. talking about renderingperformance, 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-- andoften, what we've done, i think, is we've gone, ok. how long does this thingtakes 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 whywe've done it. but the thing is, it's onlypart of the picture. ok, it's only part of theproblem, because as colt discussed with the memorything, you know, that's something that doesn't fit intopage load time, right? and that's a partof performance. so it's a little bitof a question. and so, what i thought i'd dois just a quick, highly technical chart for myself.
of two apps. app one is fast to loadand slow to render. and app two is slow to loadand fast to render. and which is worse? which is better? well, the answer, of course, isboth of those are going to hack off your users. they are not going tobe happy with you. so it matters.
so what i thought i would thendo is take us through the pipeline a littlebit like this. the idea here is from a pageload perspective-- because that means we will hit everypart of the pipeline-- i want to get through from howthe browser does a request and gets pixels onto the screen. that's actually the jobof the browser. it's there to get contenton your users' screens. so it's good to understand it.
and then when your users arescrolling, and dragging stuff about, and just generally usingyour site or your app, then we'll hit parts ofthis pipeline again. and this is part one of two. because i would normally talkabout the devtools-y part of this, where you can figureout how your project is actually working. but paul irish is goingto actually do that part later on.
so think of this asa scene setter, a part one, if you will. now, we start off our journeywith the humble get request, like so. our server is going to respondfor us with some html, all pretty awesome. and the first thing that thebrowser is going to do-- and it does clever stuff withdoing streamed, and look aheads, and all this kindof 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 domfor that html. so we'll just make our lives alittle bit easier and just call it the dom. and then what we do is we takethe css, and we're just going to add that plus in there.
we take the css, and some ofthat css will come part of the browser as the defaultstyle sheets. with the browser, there's thestuff you put in line. there's the stuff that'sin your style sheets. and we start to actually figureout from the dom what css applies to what. and historically, people havespent quite a lot of time trying to optimizecss selectors, you know, how quickly.
and it's actually a bit of awaste 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 indevtools as recalculate style. so what happens-- and i'm aboutto do a sound effect, i can feel it coming on-- we put these together like-- [fart noise]
paul lewis: --that. paul lewis: and we getthe render tree. paul irish is happywith that noise. he's happy with that. now, the render tree looksdistinctly like the dom, except that things are missing,like the head, for example, or a script. they're not there becausewe're not going to render them.
so they don't appearin that tree. but let's say, for example, idecide that in my style sheets i'm going to put sectionp-- boop. i'm going to say,display none. that will disappear from therender tree because it's set to display none. it's not something we'regoing to draw. it's not somethingwe care about. equally, i could have a pseudoelement, and that would add
something into therender tree. so the render tree, as i said. it looks like the dom,but it's not the dom. it's the styles appliedto the dom. so that's that. now, the next job-- and it'sgoing to look like a really simple job. we've got all this css thatwe want to apply. and it's basically like widths,and heights, and
display blog, positionabsolute, all this kind of stuff. and what the browser has to dois take that and go, whoof, where does everythinglive on screen? why are there boxes here? and as you probably know, thiscan actually get extremely expensive because everythingtends to be contingent on everything else. so if i were to change theheight of body, everything
that's inside body needsto be recalculated. and this will show itself upin devtools as layout. and, yeah, that's where allthose boxes are coming from. good. so the next job that wehave is to actually fill in some pixels. we know where those boxes are. but they now need fillingin with pixels. so we need a rasterizer.
now, just a bit of terminologyin case you don't spend your time looking at this stuff. vectors are basically shapesthat we have the mathematical formulae for, or we have thepositions of the corners, for example, in the caseof a triangle. but we're interestedin actually pixels. so what we actually have to dois we have to figure out from our triangle which pixels weneed to fill in and what color they need to be.
and this is the process ofconverting vector to raster. ok? all pretty simple. now, if you and i were to have afun afternoon and we were to create a rasterizer, we'dprobably 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 theredrawpoints, drawovals,
drawrectangles, drawbitmaps,draw some text. and if you've worked with thehtml5 canvas, a lot of this stuff will actually lookquite similar. it's the rasterizer,basically. so now what we can do, iactually run that html through skia and said, whatdid you do? and it told me. so if thought i'd showyou what it does. ta-daaa!
but you probably didn'tsee what was going on. so why don't we have ourselvesan instant replay. now, you'll see that as we getthrough each of these calls, we're starting to build upthe picture of what's actually going on. draw around the rectangle, whichisn't that clear, but that's the drop shadow. draw the path. here we go.
draw the bitmap, whichis my face. do a bit of tidy up, andwe'll call it a day. devtools is going to showyou that as paint. that's how it goes about lettingyou know that it did some of that work. now, some of this bears a littlebit 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'scalled 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.
paul lewis: there not"jraphics," are they? paul lewis: all right? anyway, so now, wehave our jpeg. and we basically go through, andwe're going to decode out an image into a bitmap-- red, green, blue, andpossibly alpha. but the thing is, we're alsomaybe doing a bit of responsive web design. so we also have to dosome resizes as well
on the other side. so these are extremelyexpensive. they show up in devtools. you can spin downpaint records. and you'll see image decodesand image resizes. and they will kill your framesper second, if you have them, particularly, resizes,actually. ok, so we spent some timewe drew a bitmap. the next thing we wantto look at is--
we're quite fancy-- we're going to do a bit of animation. what we're going to actually endup doing is we're going to move that picture ofme up to there. now, when this happens, webasically took this rectangle around everything and said, thisis now damaged and dirty. this area needs fixing. this needs repainting. so we actually have to stepthrough one-by-one and re-run
all those commands with thedrop shadow, and the white box, and the bitmap. and it doesn't take muchimagination to figure out that if we have a lot of things thatneed painting, or we move something a really, reallylong way, that could be a hugely expensive thingthat we just did. so what we do to work aroundthat is we do these things called layers. instead of having one surfacethat we rendered into, that we
rasterize into, wehave several. so this is my website. and actually, the mastheadthing is a canvas. so why don't we boost thatout a little bit. now, what happens is wecan basically do this. so that when we want to changesomething in the masthead, we don't have to worry aboutrepainting the thing behind. we keep it separate. this is extremely useful.
what's also interesting aboutthis-- or at least to me, because i'm a nerd-- is the next and previous buttonsare actually dom elements on their own, right? but they're sitting on top ofsomething that was just boosted out to its own layer. so what chrome ends up doingis it ends up creating more layers, just for those. so you actually end up withfour of the suckers.
and these all get sent acrossthe gpu, which we'll talk about in a second. and then composited layersis what you're going to see in devtools. it's taking all these layersand all this stuff. and it's basically going,"schwip," putting them all together again, figuring outwhat layers it needs, where they need to live, allthat kind of stuff. so those are the layers.
they're pretty cool. and you might be askingyourself-- i hope you are-- how do i get a layer? that's exciting to me. you'll notice it's subjectto change because it's an implementation detail. but all the same, let'shave a look at them. 3d or perspective transform,anybody use the
node transform hack? anybody translate z happy? yeah? work for you? ok, that's the classic one. video elements, canvas elements,composited plugins, like flash or silverlight,an animation on opacity, transform filters, like blurand all those ones. and then the last one,which are my next
and previous buttons. those are rendered on topof another layer. so those are the ones. you could imagine that wemight add some more. we might. so the last little part--and this is the website from tonight-- is to actually take thoserastered images and send them across the gpu.
now, the thing to bear in mind,all that rasterization that we did was done actuallyon the cpu. and when we do rasterization-- this is a small detail. i just wanted to include itfor completeness' sake. we actually rasterizeinto tiles. it doesn't make any differenceto us as developers, but i just like to includeit, i don't know. so there we go.
that doesn't matterfor what we do. but we have the cpu. all this work so far hashappened on the cpu. so when people are talking abouthardware accelerated this and that, so far,everything we've done was on the cpu. the last thing that we actuallyend up doing at this point is sending those tilesacross to the gpu. happy days.
and that was a nicesimple animation. but the bandwidth between cpuand gpu might be quite constrained, especiallyon a mobile device. it's very easy to saturatethat link. and if you're doing a lot ofrepainting, you're just sending a lot of stuff acrossto the gpu, you might really struggle. so it's a finelybalanced thing. anyway, that's going to showup as composite layers.
and finally-- whoosh, there we go-- we end upwith something on screen. so now we know how you get fromthe humble get request all the way through to somepixels on screen. so with that said, i am nowinterested in the bit where we control the workload. i really want to ask[pirate voice] are ye the captainof yer ship? but i'm not going to.
but we are. and so, seeing as we're incontrol, let's talk about some millisecond stufffor a second. let's frame what we'reinterested in. when a user interacts with yoursite or your application, we have 100 milliseconds inwhich to respond for that user to feel like it was aninstant response. if we take more than 100milliseconds to respond to the user's interaction,we have failed.
they will notice. the second thing that we careabout is 16 milliseconds. if we're doing anything likescrolling, or dragging, or anything that's regularlyanimating and updating the screen, we have 16 millisecondsin which to get all the work done. so this is just to frame ourargument here-- response time, 100 milliseconds; frametime, 16 milliseconds. bear that in mind.
now, all i'm going to do atthis point, as i said, normally, i'd show yousome devtools. but i'm going to just talk aboutsome stuff you want to look at, some stuff youneed to be careful of. and then paul will actually runyou through devtools and the tools that areavailable to you. small style changes can havebig layout knock-ons. if you're, say, changing body,as i explained before, we have to re-layout everything.
huge deal if you're tryingto do that in an animation, for example. you decide you're going tochange some high-level element, like one or twolevels into the dom, everything's probably goingto get recalculated. that will kill you in termsof your frame rate. this is something of a commonmisconception, that layout is somehow always triggeredby javascript. it's not.
you can have a transition that'sin 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 throughthat pipeline with me, again, there's often a misunderstandingthe layout is, somehow, painting. but actually, if you do changethe position of something, we might need to repaint.
and we'll have a lookat something that's doing that in a second. there's a thing that looksa little bit like this. and the code, it doesn't reallymatter too much what the code is doing. but i'll tell youwhat it's doing anyway, just for a laugh. we're going throughsome paragraphs. and we've got some other elementthat we want to match
the widths of all ourparagraphs to. so the first thing we do is weask for the width of this thing called "green block." now,we asked for its offset width, which causes chrome-- and, in fact, any web kitor blink-based browser-- to go off and do alayout operation. go, what's the width of thegreen block, please? and then, we set the firstparagraph's width. and then we go through that loopover, 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 writeinvalidates the previous read. this is called layoutthrashing. you do not want this inyour applications. what you wanted to do-- there we go--
was to ask for the width once. read, write, write, write,write, write. paint-- show you this demo, right. there's this brilliant toolcalled "show paint rectangles." if you're everwondering whether something's painting in chrome,that is your tool. and what's going tohappen is, see, i select some text, right?
and you get this redbox around it. and that's, basically, chromesaying, i had to do some repainting here, paul. thanks, chrome. i expected you to doit, and you did. you're so reliable. anyway, so what i've got is i'vegot 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 realisticanimation. look at this, woo! now, the interesting thing hereis that this one big area needed repainting because we're moving everything inside. but we can also figure outthat they've all been flattened down to one surface,one layer that we're actually painting into, right?
so this is the thing that'sgetting invalidated. it needs repainting. that might be slow. so we're quite smart. what we want to do is we'regoing to use the translate z hack to isolate allthose boxes. and all we're doing is movingthem around, and the gpu is really good at just movingstuff around. it's fantastic at it.
so we're going to do that. change them to black, justso it's a bit easier. and then, you see, we'renot painting anymore. because we painted them once,all these layers. and then we just asked thegpu to move them around. this is an awesome way of usingthe translate z hack. i've come full circle. i used to hate it. now i love it, justfor this reason.
the danger that wethen have is-- i'm just hovering overit in this-- animate the radii. now, these boxes have a slightlyrounded corner. what i've got is i've got ananimation queued up that's going to change the borderradius of each of those boxes. ready? aa-aa-aa-aah! daah!
look how much it crawls! so it's not always a good thingto isolate everything and put a translatez hack on it. because you can end up creatinga lot of extra work if you end up having to painteach one of these things. these all need rerasterizing. and then they all need copyingover 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, havea look at what goes red. if you see a big red flashacross your whole screen, you've probably got a problem. so that's a good wayto find that out. so painting, avoid it.
you can't avoid it on the firsttime you page load. but you want to tryafter that. you can promote elementsto isolate them. if you have one element thatis moving around and maybe does need repainting, promotingit is, actually, often a really good way to justmake sure that nothing else has to be repaintedunnecessarily. but bear in mind that it canalso spoil other layers like i showed you with the nextand previous buttons.
you just want to becareful with it. layers themselves do actuallyhave a knock-on effect for memory, the management, and thetransfer, as i mentioned. so just be careful with that. often people say, well, howmany layers can i have? and there isn't a goodanswer to that. because it depends on the devicethat you're talking about and whatever else you'reactually trying to do. so just profile it and see ifyou can see how your frames
per second's doing and respondto that, really. paint storms, we were debatingthis term earlier, what it really means. what it really comes down tois you wouldn't want to be caught in an actual storm. you don't want to be caughtin a paint storm, either. it's generally you'redoing paint that you shouldn't be doing. you're either painting too much,or you're painting too
often, all thosekind of things. it's just a nice name for sayingit's not what you want to be doing. you're doing too much paint. so don't do that. interestingly, because the gpuis exceptionally good at these things particularly, they oftendon't cause paints. if you something, isolate anelement and then monkey around with it, so opacity andtransforms, we won't be
repainting. like those boxes, theydidn't repaint. we all smiled a happy smile. image decodes and resizes,those are done on demand. so when we're rasterizing, wehit one of those drawbitmap calls, we actually queue upthe decodes and resizes. so it can make for verysporadic frame rates, let's call it. because we do it on demand.
so when something comes intoview that we need to rasterize, we go andget the image. we decode it, whichcould kill us. and for all intentsand purposes, that's not a good thing. so bear in mind that handlingimages is expensive. you can't really avoidimages on the web. but just bear in mind thathandling them is expensive. so you want to see ifyou can mitigate it.
and one of the best ways todo that is actually avoid resizing them when you can. and i say that, uh,frustratedly. because responsive webdesign is a, popular and b, quite cool. but it does put a really heavytax 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 animationframe, if you've not come across it, when you are changingthings on-screen, please avoid these. they are not timed to thebrowser's refresh cycle. so they will just run wheneversuits, and that could be at the worst possible timefor the browser. what you want to do isuse friendly green requestanimationframe. it's so helpful.
anybody use jquery? anybody us jquery animate? it currently usesset interval. i would love that to change. in fact, i actually doublechecked that from the jquery source. it does use set interval. there are patches that you canapply that then switch it back to requestanimationframe, simpleenough thing to do.
and it might be worth it foryour project if you are using jquery animate, asit stands today. scrolling performs is a big,big deal, actually. because most the time, peoplescroll on the web. apparently, it happensquite a lot. scrolling then, it doescause paints. because as content becomesvisible, we have to rasterize. we have to paint that stuff. so we want to make surethat when we do it,
we keep things light. the easiest thing to dowith scrolling is to avoid doing anything. there's a really good one,actually, that you might want to look at. it doesn't take toomuch imagination. if you were scrolling throughand 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 thingthat you now hovered out, just because you werescrolling past it. now, if your hover effects arereally expensive, that's going to be awful. what you want to do is you wantto, basically, switch off anything changing. so you basically add a classor something that basically switches off hover effectswhile your scrolling.
you know, waste a littlebit of time. then switch themback on again. there's a "html5 rocks"article about that, that i wrote. pretty good. paul lewis: i, meanthe idea is good. it wasn't my idea. i just wrote it up. anyway, debounce scrollhandlers.
what do you possiblymean, paul? i mean this. if you aren't a scroll listenerto your window, in this case, don't do anythinginside that scroll handler. please, for the love of all thatis decent, don't do it. what you do, store thevalue if you need to. great. super. and then schedule arequestanimationframe to
handle the scroll, thething that happened. because you could get 5,10, 20 of these events. but really, you probablyonly want one. you want the last one, mostlikely, to know the current scroll position because you'redoing a parallax site. paul lewis: what? whoo! just because it's cool, doesn'tmean it's right. paul lewis: just throwthat out there,
if anybody's listening. ok, last thing i want to do-- because we're running low ontime-- is just do a little bit of myth-busting. javascript, you'llnotice i haven't talked about it at all. you, maybe, thoughti would, right? because when we're not talkingabout page load time, we're talking about javascript and howslow it is and horrible.
but it's not, actually. work is often triggeredby your javascript. you maybe changed your classwith dot class name, or class list, or something, whatever. it's often triggeredby javascript. but the work that's actuallyrunning is often carried out in c++. layout is not donein 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 mobileweb is slow. no, it's not actually thereason most of the time. because it's not javascriptthat's actually running. it's the other stuff that'sinside the browser that's actually running.
unless you're makinga game or-- there are classes ofapplications that do rely on javascript quite heavily. i do want to say that i'd likeyou to start treating javascript benchmarks with deep,unyielding cynicism. because javascript probablyisn't your bottleneck. layout probably isyour bottleneck. paint is probablyyour bottleneck. so you know, if you startseeing, oh, it's really fast--
with javascript. yay! and then, the other thingis, the dom is slow. you hear this one quite a lotfor fairly similar reasons to the last, actually. interacting with thedom is, actually, quite fast, as it happens. the problem is that changes tothe dom probably incur changes that are layout or vcalcstyle, layout, paint,
composite-- misery. so be careful. now, going forth, aim for60 frames per second. it is well and trulyachievable. you control the browser'sworkload. you are, in fact, theship's captain. --i brought it round. performance is a feature.
it's not a unit test. it's not something, youget 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, putit 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'llread things that are like, this is fast. do this.
and that's fine. sometimes you need to do that. but you end up writing thingsthat don't fix the problem you've got. you end up writing somethingthat makes paint better. but you've got alayout problem. profile, use devtools. paul will show you how. profile your stuff.
figure out where you'reactually slow. then fix that thing. sounds simple enough,because it is. profile early. profile often. smile a happy smile. do it. paul lewis: time fora break, isn't it? peter lubbers: paul, thankyou for speaking.
here's our san franciscohtml5 speaker gifts. paul lewis: oh, cool. peter lubbers: originalpainting-- paul lewis: well,thank you all. female speaker: andhere you go. peter lubbers: and alittle bit more. paul lewis: thankyou 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 keepon schedule. we have dessert out. we have more wine, beer,the sponsor tables. check it out. enjoy. peter lubbers: --announcementby glorianne. glorianne: ok. male speaker: testing, testing,one, two, three.
glorianne: so hi, everyone! it's vitamin t again. and just want to makean announcement about the gopro camera. so this drawing is separatefrom everything else. you have to give us a businesscard in order to be considered. we weren't part of thewhole ticket thing. so it's not going to rely on theticket that you received.
it's a business card. so if you haven't droppedoff a business card, yet, please do. [? ani ?] and ariel are walking aroundwith containers. so you can drop it in if youwant to be considered. the odds, right now, look likethey're 100 to one, for a gopro camera. so if you want to getin the drawing,
please, drop off a card. all right, thanks. so next up, a quick announcementabout the bountysource project. you want to take it away? great, thanks, warren. warren konkel: hello. my name is warren. i'm one of the foundersof bountysource.
bountysource is a crowdfundingplatform for open-source software. so you can basically come tothe site and you can place bounties using google wallet,paypal, et cetera, on github issues, bugzilla issues, trackissues, and so on. and so, if you're a developerlooking to earn some extra beer money or quit your joband work full-time on open source, bountysourceis 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-sourcesoftware. we've worked with somelarge companies like adobe and mozilla. and we're growing quickly. so definitely, comecheck us out. we also just launched a newfeature called "teams." so if
you're part of a company andyou want to give your developers a budget, or you're adeveloper and want to have a budget for yourself to go spendon bounties, and bug fixes, and so on, ask yourmanagers 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 gocreate 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 saybountysource. thank you all for comingout tonight. so our talk is now starting. so jake archibald, also here,all the way from the uk. we're really happyto have him here. he's a developer programsengineer in the chrome developer relations team.
and before working at google,he worked at lanyrd and basically made that wholesite work well offline, which is amazing. you may know him from hisdouche-bag article. jake archibald: ah! i'm going to shake that. i need to shake that. hey, you're the douche-bagguy. thanks, everyone.
peter lubbers: i can assure you,he's not a douche-bag. jake archibald: [laughs]. so thank you, jake. jake archibald: hey,excellent. ok, people at the back,how is that? people at the back,can you hear me? jake archibald: is that good? excellent. i'll try and keepthis volume up.
wave if i let up, ok. so i'm going to tryout something a little bit different. and it depends on thewi-fi working. it's been a bit ofa nightmare. it's probably a stupid idea. so let's find out. we're going to do aninteractive quiz. these slides are goingto be interactive.
so if you don't have aweb-enabled device in front of you now, get it infront of you. a laptop or a phone, itwill work on both. but make sure you'vegot that ready. it's a quiz. but it's really just an excuseto string together some bits of browser trivia to relateit to performance stuff. so what you'll need to do is geton the google guest wi-fi. that's the ssid there.
and then if you go to thislovely url, which is my laptop here. so that's 192.168.156.69,port 3,000. and there's a clue. yes, it's a node server. very nice. yeah, if you're watchingthe live stream, nah. that's not going to work. sorry.
just play the game usingyour mind or whatever. just play with yourself. wait. it doesn't matter. ok, move on. once you go to this url, you'llbe asked to enter a username and password. just make up any old password. it's going to be stored inplain text on my machine.
so don't use your credit cardnumber unless you wish to make a donation. all donations are gratefullyreceived. the reason i'm asking for apassword is if you want to switch devices halfway through,like you start running out of batteries orwhatever, you can just enter the username and password againon another device and pick up from whereyou left off. now, i hacked this thingtogether quite quickly.
you could probably break itby trying to break it. so please, don't do that. i've at least made sure ourlittle bobby tables can play. so if you're in the room,you're all right. is everyone gettingaccess to it? it's kind of working? wow, brilliant. i want to stress thatthis quiz is tough. and i've seen it catch outpeople who do this sort of
stuff, this minor details ofbrowsers for a living, and it catches them out. so if you're the kind of personwho flips tables over when you don't win, then maybestay away from tables for a little bit because thiscould get rough. ok, i'm going to get this huge,horrible, helvetica off the screen. oh, of course, what kind of quizwould be complete without a grand prize?
[imitating game showannouncer] the chromebook pixel is google'slatest laptop, featuring an i5 1.8 gigahertzprocessor, 4 gigabytes of ram, and the touchscreen with ahigher dpi than a macbook pro. couldn't get a holdof one of those. sorry-- jake archibald: --theywouldn't give me one. never mind. but if you do win, thenwe will swag you.
we will swag you good. jake archibald: you're allquite dazzled by that. i thought you might not, so ithought i'd go all in and, like, yeah! look at that stuff! a neon thing, a glass. have you see one ofthose before? and a cup, brilliant. the lens flares aresold separately.
sorry about that. jake archibald: let'sget started. we're going to start off reallysimple, 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 thinkare going to make
a request for that? now, on your phones and yourlaptops, at the moment, it should have given you theoptions for this question. if it hasn't, justhit refresh. and you should get them. now, when we we're talking aboutthese browsers, we're talking about the latest versionof them, the latest stable release. you get one point for eachone you get right.
and you will lose a point foreach one you get wrong. so if you say firefox doesn'tmake a request, and it does, you will lose a point there. you can assume thehtml5 doc type. and there's nothing funky in thehead, like a base tag that might throw things off. there's no trickery going on. and what you're seeing here is alive read out of the opinion of the room.
so the needle will swing oneway when you think yes. it will swing the other way whenyou think no, although the direction is randomizedfor each question. so you cannot just goalong with the room. you will be probably gettingit wrong if you do that. ok, that's probablyenough time. if you haven't answered,yet, answer quickly. because i'm going to close thequestion in three, two, one. and ok, so the needle's goingroughly in the middle, which
means collectively youdon't have a clue. well done, everyone. jake archibald: you were kindof thinking, yes in-- well, most of the browsers,kind of more strongly in internet explorer. it's almost like you'dbeen bitten by that browser in the past. jake archibald: the answeris, of course, no. not in any of the browsers.
none of them are goingto do that. well done, the people that gotit right, four people by the sounds of things. jake archibald: excellent,well done. but this is not asmad as it seems. so in xhtml2, youcould do this. you could have any elements,such as a div with a source, and the browser would replacethat element with the content of that resource.
and it was kind ofa good idea. it was the start of a good ideabecause you could take rich semantic content andreplace it with an image. it made the alt attributecompletely redundant. pretty cool. but xhtml2 had the backwardsincompatibility issues. and it carried with it xml'sdraconian error-handling. and once you invite xml intoyour home, it xmls everything. it xmls all over the carpet,up the walls.
jake archibald: and in the sameway that smurfs stick the word "smurf" in front ofeverything to make it a smurf thing, xml sticks x at thestart of everything. you don't want html. you want xhtml. you don't want frames. you want xframes. jake archibald: youdon't want forms. you can have xforms.
if you let xml take over yourlife, it will turn your boyfriend or girlfriend into anx-boyfriend or girlfriend. jake archibald: and "xmlcool"with that. because you don'tneed a partner. because you've got xml tolook after you now. things fitting that, in2009, xhtml2 became an x-specification. jake archibald: we didn'tcare about it anymore. and no browsers ever implementedsource on
something like a div. but what about this? we've got an image element. it's got a source. which browser is goingto make a request? now, notice that i have spelledimage incorrectly, in terms of html. does the browser treat thislike an unknown element? or does it do somethingspecial?
we saw xml was too draconian,too strict for the web. but is html this lenient? or are the browsers morelenient than the spec in this case? so we're seeing you're kind ofleaning towards one way. and pretty much allthe browsers-- ah, you're changing yourmind and going back into the middle. we're going to keep thisrolling quickly.
so just make a decision. i'm going to close the questionin three, two, one. and it's closed. so you're kind of thinking,pretty much, yes, in all the browsers. and you would be absolutelycorrect. in all of them-- audience: yay! jake archibald: --it will makea request for the image.
and note, in these situations,it doesn't have to show the image. we're just talking aboutmaking a request. but in this case, all of thebrowsers will actually show the image as well. you see, back in the past-- i don't know if you rememberthe past-- but one browser decided that img was toodifficult for developers to remember, and that imageshould work as well.
and we've been stuck withthat ever since. now, which browser vendordo you think we have to blame for this? oh, yes, of course, it is-- jake archibald: --mosaic-- jake archibald: --backin 1993. the people who invented theimage tag, they did this. and a study in 2005 showed that,like, 0.2% of pages were using this incorrectlyspelled image.
so all the browsers have tosupport it for pretty much forevermore. the whatwg recognized thisand added it to the spec. this is the parsing spec. and you can see there, starttag, if it's image, change the token name to img andreprocess it. don't ask, right? jake archibald: but recently,i-m-a-g-e was using the kind of a clever hack, alexeiten came up with this.
so you would use this on yourpage instead of an image, this block of sort of svg withan image inside it. and what it'll do is it willshow an svg and in browsers that support svg. and it will do a pngin other browsers. so a modern browser willparse it like this. ah, ok. that's an svg element. ok, it's going tobe 100 by 100.
that's fine. oh, and this is an svg image. because in svg, image elementsare spelled fully-- i-m-a-g-e. oh, it's gota width and a height. that's great. and i'm going to load img.svg. because this is how you definethe source for an image in svg because it's part of xml. and why have a link, whenyou can have an xlink?
jake archibald: and then,it sees this. and it goes, [raspberry sound]. that mean absolutely nothingto svg images, so i'm going to ignore it. whereas an older browser, maybethe android 2, ie8, they'll parse it like this. neh, eer-a-- jake archibald: --ffyya, er, imean, going to ignore that. oh, look, the developerspelled "image" wrong.
ok, i am going to use that. it's 100 by 100. pha-pe-ffff-ha! 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 requirejavascript, and you're
switching between thetwo image formats. and we got kind of excitedabout it, and we started tweeting about it. the mistake we made iswe didn't test it. so a few of us startedtesting it. and we found somethinginteresting. all of these browserssupport svg. which ones downloadboth images? they shouldn't.
and i'll give you a clue-- it doesn't go one way or theother for all browsers. some of the browsers aredoing it differently. so you're going to have to pickthe browser or browsers that you think get thiswrong because not all of them get it wrong. i'm going to closethe question. ho-ho. [laughs]
oh, dear. jake archibald: oh, no, ok. we've got some ie fansin the room. closing the questionin three, two, one. ok, so you're edging towardsinternet explorer being the bad guy here. and in this case,you are correct. as a kind of group, you'redoing quite well. you should all form a companyor something.
so all the browsers here, allthe latest versions, they have two parsers inside, a relativelynew thing for browsers to have. but these ones, theyall have it. one parser runs ahead as quicklyas it can and picks up things that it should download,like images, scripts, all thatsort of stuff. the other parser does the heavylifting like building the dom tree, and parsingscripts, and all that stuff.
this has a surprisinglylarge benefit. you know, ilya is postingabout this. this study that was donethrough 2,000 sites. and it had a 20% speedimprovement. that's pretty incredible. that's time to get domcontent loaded. in order to be quick, this otherpre-parser, this first one is a little bit stupid. in internet explorer, it's thatlittle bit too stupid,
and it kind of getsoverexcited. and it's like, i'm goingto 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-- jake archibald: --nevermind.
it kind of sees the image. but it misses the svg context. so it picks up thewrong source. and then the main parser comesalong and goes, pppfff, what are you doing? no, this is an svg thing, anddownloads the correct thing. the moral here is if there'ssome kind of performance advice going on, don't justblindly trust it. in chrome we say, usetools, not rules.
and it rhymes. so it must be true, right? jake archibald: but also be onthe lookout for existing tests, if someone has done theleg work for you, and you can just run that test yourself. one of my favorite stories inscience involves this guy august weismann. he wanted to disprove thatevolution was learned. like if you had some kind oflife experience, that that
would be passed toyour children. he wanted to disprove that wasa thing because it wasn't the darwin evolution. so he took some mice, and hecut 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, ifevolution is learned, we're going to start getting miceborn without tails.
and he was quite a way into thisresearch until someone went, uh, you do realize,august, that the jewish people have been carrying outthis test a lot longer than you have? jake archibald: and ay-uh-uhh! jake archibald: fairenough, yeah, ok. job done. so yeah, don't reinvent thewheel unless you want to learn a lot about wheels.
and that could becool sometime. ok, what about this? i've got an image. it's inside a div thatis displaying. not in this image. it's not going tobe displayed. but which browsers are goingto request the url and download the image regardless? so i did it quickly.
we're going to go for, oh, arewe still thinking ie is going to do something different? people are thinking firefoxis going to do something different. the countdown is goingto get old. but i'm going to do it forevery question anyway. ok, so, we're sort of saying,yes in ie, maybe no in safari, no in chrome, and maybein firefox. the answer is yesin all of them.
they're all going to downloadthe image in this case. and this behavior is part ofthis specification as well. in the beginning, thereis nothing, right? and then the browser getssprayed with html text. and then from that, it is goingto construct this tree of elements that, aspaul was explaining earlier, is the dom. when one of these things isconstructed, the constructor steps for that elementare run.
and if we look at the spec forimage, it's quite complicated for what you would think wouldbe 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 anythinglike that. and that's good in some waysbecause it means the browser can start the image downloading before the css is there.
the pre-parser candeal with it. downside is, well, we couldn'tdo polyfills for things like responsive images. because by the time javascriptgets there to do something clever, the image has alreadystarted downloading, and you're just going to triggera second request by changing the source. this won't be a problemin the future. +the resource is priorityspec, has this postpone
attribute, which means the imagewon't download if it's display none. and it allows the browser toavoid downloading it, even if it's just outward viewon the page as well. so you don't have to rely onthese 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 notgoing to be displayed because it's inside an elementthat is display none. so we saw here that the imagewould download in this case. but what about in css? is it going to do somethingdifferent? does visibility matter here? are some of the browsers goingto do something different? oh! going right to the middle.
collectively, onceagain, no clue. don't worry about it, guys. it's quite difficult. what's the answer? none of the browsers willmake a request here. and that's kind ofcool, right? we want to be able to relyon that kind of behavior. slightly different one. what about now?
same thing again. image is not going to berendered because it's on a display none element. but it's not inside a displaynone element. it is on the displaynone element. so we saw the browsers weren'tdownloading before. did the browsers do somethingdifferent? 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 closethe question and three, two, one, done. we're saying no in prettymuch every browser. most browsers will downloadit in this case. only firefox won't. so what's going on here? well, once you've got some domelements on the page, as paul
was explaining before, they aregoing to get their styles calculated, where the browsergoes to see which of your cascaded styles of yourfont tags-- if you're from the '90s-- which styles apply to eachelement individually. but not everything getsit's style calculated. so you've got these two elementsat the bottom. no style calculation. and the reason is this div atthe top here turned out to be
and the browser shortcuts,because it knows the styles of these elements have no impact onthe rendering of the page. so it doesn't bother. it takes a shortcut. so if these have backgroundimages, the browser never finds out about it. if the display none element hasa background image, the browser does findout about it. and that's why we see mostbrowsers downloading it, at
that point. firefox is a littlebit smarter here. but if you use something likevisibility hidden or opacity zero, firefox will bedownloading as well. who's getting it rightaccording to the specification? everyone is! so the specification saysabsolutely nothing about this. because this tiny note that saysthe browser may optimize.
it may avoid downloading imagesthat are out of view, even if there's anotherelement over the top. the browser may avoiddownloading at this point. no browsers are thatsmart yet. this kind of freedom in thespecifications is great. because it means the browser cando what's right, given the situation, and the kind ofdevice, and the network connectivity, et cetera,et cetera. but it's also kind of scarybecause this is where you're
going to get the browsersdoing different things, as we saw here. but i kind of like that. i think that's the diversitythat makes the web great. it's not one companydriving forward with its own interests. it's lots of companies drivingforward in different directions. and we get this sortof car crash.
but a car crash witha happy ending! jake archibald: and that's theweb that we have today. jake archibald: so if you wantto avoid downloading backgrounds and css, hidingelement isn't enough. you need to put it insidesomething that is hidden. so the browser won't find oreven look at that element. but when you do that, realizeyou are relying on just what the browsers do. it is not specs behavior.
the only sure-fire way is don'tlet the browser find out about the background image. take the class off until youneed it, or don't put the element in the dom untilyou need it. things have been quiteeasy, 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 tobe displayed yet. and it's spelled wrong. we saw the browsers correctingfor that before. but that was in html. what about in the dom? is that going to be different? all right, done.
ok, so we're edging towardsyes, in most browsers. it is yes in most browsers,except firefox. firefox does somethingdifferent here. and there are two partsto this explanation. we saw before that the dombuilds up, and these creation steps for elements are run. but even if you create theelements, and it's not part of a document, that's still goingto run those creation steps. and we saw before, step14, fetch the image.
we can use this to our advantagebecause you can make a get request to any url bymaking an image element and assigning a source. and you could use the imageelement constructor. it's a tiny bit of code. you can make a requestanywhere. this is kind of how googleanalytics communicates back to the server. oh, yeah, but firefox didn'tmake 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 elementwhen we do that. firefox will give usan 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 gettingit right. we saw before that thespecification says, if you encounter a start tag,you can correct it. but this is the parsing spec. we bypass the parsing spec bycreating the element in so yeah, actually, technically,it should have returned an html unknownelement. but it's getting closer to rightthan the other browsers. i think i preferred it when theweb with all the browsers,
like, there was one bad guy,and all the other browsers seemed perfect. it was like an orchestra, andinternet explorer 8 was just this screaming child hittingtwo cymbals together. jake archibald: but then wefinally got rid of the screaming child with the cymbal,and then we started conducting again. and we went, oh, actuallyeveryone's out of tune. we just didn't notice, becauseof the screaming cymbal child.
oh, fair enough. jake archibald: all right, let'sget css involved again. 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 ita background image. we saw, here, that images woulddownload at this point. is it different with css? do different browsersdo different stuff?
so we are edging towardsthe don't know. oh, wow! it sort of swungthe other way. all right, so we're edgingtowards yes in everything. wrong-uns, the lot of you. no browser will download here. and this is kind of the sameas the display none case. it's not in the document. so the browser is not going togo looking for the styles,
because it doesn't need to knowthe style information, because it knows it'snot going to render. all right, going to be cruel. same thing, but i'm goingto add it to the dom. and then, i'm goingto take it away. in the same block of javascript,will the browser see that element in the documentlong enough to actually trigger the download? we're edging towardsyes in everything.
wrong again. jake archibald: noneof the browsers. none of them. the browser doesn't think aboutstyles or layout until as late as possible, whichnormally means when it needs to render something. and this isn't going to changeany pixels because javascript is going to be blocking thechance to do some of that painting stuff.
i'm adding it to the document. i'm going to ask forit's text content. it's an empty element. text content is goingto be empty as well. and then, i'm going toremove it again. does that trigger differentbehavior in the browser? element is completelyempty so, you know. but is that going to trigger thebrowser to go, oh, yeah, i'm actually going to getthat background image.
what have you said? aaah, you don't know. yes, it's tricky. none of the browsersat this point. i am going somewherewith this. i promise you. getting the text content ofan element is pretty easy. it's just going to go andpick up the text nodes. it doesn't need to look atthe 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. ie is doing something differentto everyone else. interesting. all right, so, you've saidyes in ie, and no in everything else.
bloody hell. you're right. well done. ie makes the request. and the reason forthat is because-- jake archibald: some things inthe world cannot be explained, like why it takes three attemptsto plug in a usb cable, even though there'sonly two possibilities. jake archibald: these thingsjust cannot be explained.
similar again. instead of html,it's innertext. what do the browsers do here? do they do somethingdifferent? we saw ie is quite request-happywith innerhtml. does it do something differentwith innertext? does it trigger a requests inany of the other browsers? i promise you, i am goingsomewhere with this. there's quite a strong opinionof no across all the browsers.
sorry, guys. jake archibald: yes, ineverything 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 aroundthe world or whatever.
text content is "hello world,"as you might expect. the innertext has aline break in it. and this is how it is inie, chrome, and safari. because innertext is more likewhat you would get if you copy and pasted the textof the elements. and because div is a block levelelement or so it is in this example, it getsa new line. so if we run this, the browsergoes, yeah, yeah, yeah, text content, easy enough,innertext.
oh, innertext is styledependent. so i'm going to have a look atthe styles of the element. and, oh, it's got abackground image. that's interesting. i'll download that. and that's why we see mostbrowsers doing it. firefox doesn't download at thispoint because it doesn't support innertext. it's the only browserthat doesn't.
so it just returns undefinedat that point. but if you used any of these,apart from innertext, like, anything that's going to getsome style data from the page, firefox would have startedthe download as well. so paul was talking aboutthis earlier. you can start doing layoutthrashing if you start doing these reads and writes. you'll trigger extralayouts, et cetera. the browser is quite cleverabout this stuff.
it will batch changestogether. like if you do this, like,display none, block none, block, et cetera, et cetera,loads of width, this is actually a really lightpiece of code. it's not tricky for the browserto understand because it's going to ignore-- all right, i hope that's notmy cue to get off because that's very passiveaggressive. jake archibald: anyway, so, itwill just take the last change
that you make. oh, that's nice. jake archibald: this is great. but it can lead to unexpectedresults. let's have a look at apractical example. paul and i, we wantto go over there. you can tell becausewe're pointing. let's do it with code. we're going to startat left zero.
we're going to transition leftone second, go to 100%. we run that code, and it works. we solved the world'sproblems with code. now, we're very happyat this point. but let's run the code again. nothing happened. and this is because the browseris going to ignore this first right of left. it's just going to batchthem together.
it's only going to listen toour last-- right here. and it's 100%. we're at 100% already. so nothing happens. we can fix this by forcing asynchronous layout here. because that forces the browserto go and look at all the styles of all the elementsin the page. and it realizes, oh, yeah,we are supposed to be at left zero.
so when we make thenext changes, it will start from zero. and we can run this code asmany times as we want. and it works. you might have encounteredthis kind of behavior and tried to use set timeout orsomething to get around it. no, you can just forcea layout like this. right. ok, last question.
let's go through this quickly. because i'm going tobe chucked off the stage in a few seconds. imagine a page fullof lorem ipsum. it looks like this-- 595 pixels across; media query, min-width 600 min-width. so we wouldn't really beexpecting it to display. which browsers are going todownload that gif, anyway?
are the browsers going todo something different? i'm going to say, wouldwe expect it to even display that gif? who knows. last question, so makeit a good one. closing it in three, two, one. straight down the middle. i feel like i've brokenyou as an audience. jake archibald: i'mvery 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 includethe scrollbar. with the scrollbar, it bringsit over 600 pixels. now, yeah, they don't callme cunning jake-- they don't actually callme cunning jake. jake archibald: this seemsinsane to me, to include the
scrollbar width! what if the user has a 200megapixels scrollbar? why should i care about that? but including the scrollbar is mandated by the specification. it's interesting. and chrome and safari arebreaking the spec here. it's fixed in the chromenightlies. it's not fixed in thewebkit nightlies.
why is the scrollbar included? well, imagine thisbit of code. i'm forcing no scrollbar. and then when the width gets to600, i'm going to introduce a scrollbar. 500 pixels, that's fine. we get to 601, ah, we needto put a scrollbar in. oh, now we're lessthan 600 pixels. we'll take it away.
and so on-- jake archibald: --andso on, and so on. in reality, it doesn'tget stuck in a loop. but here, we can seewhat safari does. i've got a background pictureand a scrollbar coming in at a particular width. and we'll see, i'm onlymaking it bigger. i'm not moving both ways. and we can see--
jake archibald: --thatthe background image flickers on and off. and then once we get beyond thewidth of the scrollbar, it stabilizes. and that's it. let's have a lookat 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 toshow the top 10. so don't worry too much. here we've gotprettyflyforawifi. very good. who's that? [cheers] jake archibald: excellent. right, i will swag yougood and proper. jake archibald: oh,god, you've done
really, really well. ok, that's my time up. thank you very much, guys. cheers, bye. peter lubbers: jake, here'sour special gift for you. jake archibald: oh, thankyou very much. peter lubbers: a littlebit 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 withyou in a bit. and we'll do the swag thing. male speaker: thank you. jake archibald: cool, right.
peter lubbers: that'spretty good. peter lubbers: we'realso hiring. ok, well, thank you, jake. we're just switching laptops. just a quick ideaon the timeline. we have another 25-minutetalk. and then we have avery short break. maybe 10 minutes, just to resetthe video, and so on. and then, we'll have a q&adiscussion until 9:30.
at which point, we'llstart with raffling off all the goodies. all right, so next up, we havepaul irish, who is also a repeat speaker, here,at sfhtml5. happy to have you back, paul. and paul's a developer advocatein the chrome developer relations team,focusing mostly on developer tools. and i think we'll see a lotmore about that next.
ok, we're doing a littlesound-- oh, yeah. do you have the one? ah-ha. we're trying to get thesemonitors to work. they all worked inthe pre-test. and they stopped working. again, a couple of eventsthat are coming up. chrome developer summit,november 20 and 21. it'll be in mountain viewat the quad, the
google office there. we will be live streamingthat event as well. there are about 300 peoplethat can fit in the building there. registration willopen in october. we'll post some thingsabout that. html5 devcon happening the weekof october 20, training sessions followed by atwo-day conference. and then two days of trainingon top of that.
very, very reasonably priced, sodefinitely, check that out. and-- well, you're going to havethe mic on there. peter lubbers: are thosescreens working, or no? paul irish: that's cool. we'll-- all right. yeah, that seems almostworkable, yeah? male speaker: better.
paul irish: hey-- male speaker: there you go. paul irish: all right. this is nice. oh, yeah. still loading, huh. it's kind of aggravatingto 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 littlebit about the tools that are available to identify andimprove some of the things that we actually saw tonight. and so to start off, i wantto separate some of the performance ideas intotwo separate buckets. if this works for you guys. it seems kind of ok.
the user experience ofperformance is mostly separate into two things, like, give methe 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 thingi wanted," it's page load, often abbreviated as plt,page load time. in here, we're talking aboutthings like the network waterfall; getting image assetsthat are appropriately sized; non-blocking delivery ofall of our assets; getting
the css that we need to renderthe top of the page quickly, and not much else;and also fonts. can we see the text quickly? when we're talking about runtimeperformance, we're talking about, like, i wantto interact with the page. i want to click a button andsee that response very quickly, any sort oftransitions, animations. when i'm scrolling, doesit stick to my finger? like, i am scrolling with myfinger on the device, and it
should just be moving,immediately, with things, what we heard about with memory leaksand garbage collection, and also java-based innovation,like with the but to show a little bit moreabout this stuff, i want to take an example. so we're going to startoff with a demo. this is a site for a festivalin canada, and it's the canadian national exhibition. so we're actually just goingto go over to the site now,
the live site. and we're going toplay around. i'm actually going to do ithere in chrome canary. ok, cool. so how's this look? oh, it's two-eyed. ok, yeah, seems good. so canadian nationalexhibition. my friend, mike taylor,who works for
firefox, found this site. and he said, i defy you to finda site that is jankier in its scroll. and i was like, oh, i knowof a site, actually. so like, this one. what is it? exception? inception? inception explained, is it?
is this it? paul irish: it's really bad. so paul mentioned parallaxsites before. parallax sites can get intotrouble really fast. and this side is so cool. but the frame rate on thisis just so poor. it's rough. but let me go back to whati was talking about. so here we are.
and we got some thingshappening. we've got this laying inthe background, full bleed in the back. this header that kind of scrollsup as i go down. but let's actually look at thetools to see what we're talking about. so first thing, i'm just goingto turn off this debug mode i had on earlier. and always, first thing,go to timeline.
start recording. i use command e. and we justscroll up and down, ok. so we're seeing alot of activity already, a lot of stuff. we're seeing mostlypurple, right? i'm scrolling in on this area,just to get a better zoom. and it looks like recalc styleis consuming a lot of each of these frames. so ok, recalc style.
some things couldbe happening. i'm not really sure what. so we hover on the item. and we can see the javascriptcall sect that's associated with this. so the last thing that happenedwas 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 printdown at the bottom. looks good. now, i'm going to comeback and just repeat that click again. so now we just repeat the click,and it brings me to the exact place. i really like it when the cursordoes it's pretty thing. so i'm like, aah, yeah!
paul irish: so it brings meright to the class name assignment. so there's a setting in theclass name, on an element. and that is what triggeredthe recalc style. ok, it's good to know. now, let's find outwhy that happened. we look down intothe user code. and so, here, we goinside cne.js. let me try clicking that,once again, line 33--
aah, ooh, aah. remember how paul might havementioned, do as little as you can inside your scrollhandlers. 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 someclasses on the html element in every single scroll-- toggle, toggle, toggle,toggle.
not great. certainly, not great. paul irish: but we canmake this better. so the best way to do thisis-- you can see it's a conditional toggleclass, right? you're using this secondargument, inside jquery. it's a toggle class. they conditionally changeit, depending on that math working out.
so that's ok. so ideally, you set this in anif block, and you only touch the dom if you satisfythat requirement. that makes a bit more sense. we could, actually, cheatthings a little bit. so i'm just going to edit thejavascript right here. oh, one sec. this is ok. all right, i'm going to editthe javascript right here.
so i'm just goingto backspace-- oh, come on. all right, cool. and we're just going to getthe dom element itself. and then we're going to useclass list from html5. and it turns out, class listtoggle actually has the exact same method signature asjquery's toggle class. and now, i'm just going to hitcommand s. and chrome is just going to update that function,on the fly,
which is pretty cool. so now we're going to go backto timeline, and i'll start recording again, andrepeat my action. yeah! paul irish: nice. pretty sweet. we do not have massiverecalc style anymore. but we do have some greenpaint going on. hmm.
now, on this device, i'm stillhitting mostly 60 fps. so that's kind of ok. but on mobile devices, icertainly wouldn't be. i want to see if ican do anything about this paint first. so first things first, i'm goingto come over into the settings and turn on showpanit rectangles. and usually, when i do this,i like to turn on show composited layer bordersat the same time.
they kind of go hand in hand. so bring devtools downa little bit. and now, i'm just goingto scroll up and down. so my paint recs are in red. and we're seeing things. a lot going on, but i candefinitely see up top, this section, the header isjust in red non-stop. now, the reason why is becausethe header is position fixed, and the content is movingbeneath it.
but that's not going to work. so it's basically repaintingthis, even though it really shouldn't. it knows what that lookslike, right? so the trick here is what? what's the fix for thisfixed-position element? audience: translate z. paul irish: ooh! translate z, there it is!
i'm excited to type it, andthen i also dread it. paul irish: it's like acombination of things, really. 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 isnow this little gold border around the top. and if i just toggle this, youcan see that gold border coming on and off becausethat is now a layer. all right, so we're goingto put it back on. and if i scroll uphere-- oh, cool. yeah we do not paint that. but then, we get abouthere, 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 betterway of moving this top other than just changing positionabsolute if we want to move an element? audience: translate. paul irish: translate. yeah, sounds good.
let's do a transformtranslate. so webkit and blink stillhave prefixed transform. so we will do that, hop overhere, and do a translate y. and that seems to work. and since i have a csstransition down here, i should probably update that. 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 feelssmoother to you. but it feels smoother to me. paul irish: it feels good. all right, so that'spretty good. and let's take a look overin the timeline. so in general, in the middle,we got nothing going on.
we got a little bit of paintwhen i'm going between the top or when the new imageis coming in. that's pretty good. so that's a little bit of thingsthat we can do inside the devtools. i actually made a videoshowing taking this all the way. the background hasa fixed position. and we can actually move thatto the body element and get
some wins there. but i'm going to come backto my slides first. ah, yeah. all right, so, i want to walkthrough some of those operations that wewere seeing. recalc style, so, what'shappening inside recalc style is it is getting all the stylerules that affect the page. this is anything inside a stylesheet, an in-line style, the user-agent style sheet.
it's getting all thestyle rules. it's bringing them intoan object model. then it takes all thoseselectors that you got hanging around and matches those againstwhat'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, ithappens really fast. usually in recalc style, theselector matching takes up
about 10% of the generalpurple bar. not very much. don't worry about it. now, that it has that andmatched against the dom, it calculates the computed stylefor 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, forevery element, it figures
out how things should look. it makes sense. ok, moving on into layout. layout is the geometryof the page. and i want to show one wayto look at layout. so i'll open up this littledemo right here. come on. jsbin's server is inthe uk, isn't it? audience: yep.
paul irish: yeah. it's like looking ata loaded spinner. so i'm going to click thesebuttons like that. now, what i'm goingto do is i'm going to hit switch layout. and we're going to startthis animation. now, if i open up timeline andrecord, you can see that, as that animation's happening,we're getting a lot of layout costs.
and that makes sense becauselayout is reevaluating the geometry of the page. and this sort of animation herehas to figure out this new text flow. and when the text flows, then weget a new height for where person two starts andperson three starts. and it's a lot of work to figureout that new geometry. and it happens every singleframe of that animation. it's a bit expensive.
now, the next thing after layoutis determined is paint. we heard a lot aboutthis from paul. paint hurts a lot onlow-end devices. old android phones with not alot of hardware have a tough time updating anything when itrequires paint on every frame. debugging this with continuouspaint mode is probably one of the best ways to do it. so i'm going to showthat real quickly. i said real quickly.
and then, i loadedup a jsbin url. come on, england. come to me, the bits. handy trick-- devtools at the bottom, youmight like it on the right. you can just take the bar hereand drag it up to the-- paul irish: you can alsoclick the button. paul irish: great. i have a lot of devtoolextensions, and i'm just going
to make excuses. you might have noticed inside ofchrome canary that i have-- wow. let's go back. so we're here. we're looking at this page. we have lovely boxesall over the place. that's real good. but we're going to turn oncontinuous paint mode.
now, continuous paintmode, basically, says to chrome, hey. i know you know whatit looks like. but i just want you to tell mewhat it looks like, again, and again, and again, andagain, and again. so it's just going to repainteverything that needs to get painted. so if i look at timeline, itis just doing the same work over and over again.
but what this allows us to dois make some changes and see how it affects thatgraph up there. so right now we'relooking at-- what is this? 8 milliseconds or so per paintof the entire page. now, we can try somedifferent things. so maybe i'm going tocome 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 addingquite a bit to how long it takes to paint the page. i also know that there's aborder radius on these boxes. i can try turning that off. see if that makesany difference. it does make a slightdifference, yeah. but this gives you an optionto figure out things.
now, a handy trick when you'reusing continuous painting mode is the h key hidesdom elements. so you can walk through you'redom, hide things and see what the effect is. so maybe you'll hidethe header, get that out of the way. it bisects the dom, figuringout where your costs are. this h works all the time. it's pretty handy.
so that's continuous paintingmode real quick. i got a question recently whichis, there's all these operations inside thedevtools timeline. what is the order thati should see them in? and then what we're looking atright here is basically it. so a lot of times, you startoff with some javascript. it touches the dom. it changes something. then the browser does haveto 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 operationper, basically, paint. paint is the user gotto see something. when we were talking aboutlayout thrashing before, layout thrashing is, oftentimes,we're doing a bunch of recalc style and thenlayout, and then recalc style
and layout, recalcstyle and layout. and the user doesn'tsee anything. there are no paints. so ideally, you have onlyone layout per paint. so here's a little cheat sheetfor taking action from what the timeline is telling you. if the timeline is tellingyou, oh my god, lots of yellow. there's so much time beingspent inside javascript.
i should point out that thatcanadian expo site, remember when i profiled it before? was there any yellowat all in it? there was no javascript at allslowing down that site. it was all insidethe rendering. but if you're in a case whereyou are on a lot of javascript, you can usethe flame chart. i'm going to show thisreally quickly. who has seen or usedthe flame chart?
it's good. it's a powerful thing. so this is mathjaxand a really good polyfill for mathml. but i want to check outhow fast it can render these things. so i'm going to turnoff these. come down here. and so it's actually justrendering this stuff out.
and i can choose to renderit in svg or hml css. come under profiles, and i'mgoing to collect javascript cpu profiles and record. change this. ooh, aah! now, normally when you come intothe 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 youis a view like this. and so, this is a time-basedview of javascript execution. and it progresses from left toright over time just like you expect on the timeline. and in fact, if you want, youcan record on the timeline and on the javascript profilerat the same time. but you see some spikes. you want to go investigatewhat's actually happening. and so, i'll take a lookat the svg one first.
so we can see there's actuallya good amount of latency. there's good gaps betweenall these flames. and if you look on timeline,there's actually a bunch of network activity that'shappening between these things. so they're making networkrequests as they're trying to pull together things. and it's a bit inefficient. over in this version, theydon't have that problem.
but we can identify whereall the function costs are coming from. now, height is justcall stack. so height is reallynot important. what's important is widthbecause width is time. but we're able to see here whatare the functions that are taking up time. we also get to understand theexecution code paths here, and what calls what, and how do wego from start to finish in
this operation. so that's if we're spendinga lot of time on script. if we're spending a lot of timein layout, dig into the javascript that'striggering it. in devtools timeline, like ishowed before, you'll see a call stack. find out what you're doing injavascript that it's forcing the browser to do a layout. with paints, find what isactually being repainted.
turn on those paint rects, turnon the layer borders, and see what's happening. you might have to promote alayer using translate z to get out of a paint storm. this often happens withfixed-position elements. but take another look atwhat paul showed you. you can bisect what are actuallyexpensive things happening using continuouspaint mode. and if none of these thingsanswer your questions, it's
time to dig into about tracing,which is a really extensive tool. and i'm not going totouch it right now. but to tackle all of theseoperations and how they actually map to your css,we should probably take a look at that. so if we take this little blockof css, the selector up there-- and that doeshave to get matched up to a dom element.
so the selector will be caughtup in recalc style. the height affects thegeometry of the box. so that is mostly capturedinside the cost of layout. and a text shadow does notaffect any geometry of the page whatsoever. it is just a visualeffect, right? so it will have noeffect whatsoever inside layout and paint. now, this is helpful to know.
because if you turn oncontinuous painting mode, it's only going to give you numbersthat reflect things that have an effect on paint. so you change the height of abox inside continuous paint mode, not much, really. you're not going toget a good result. but another way to look at thisis that different css properties affect thesedifferent things. so like paul mentioned before,transform and opacity are
really fast because the gpucan handle it 100%. so this happens here. if you're touching transform andopacity, 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'taffect any geometry.
outline is also here. because outline is similarto border. but you can change an outlinefrom 1 pixel to 100 pixels, and everything staysthe same place. but a lot of css propertiesdo affect the layout. of course, anythingthat affects the positioning of the boxes. width, margin, border, absolutepositioning, relative positioning, these thingsaffect layout.
and actually, i took a lookat all the css properties. so chrome, actually-- yesterday, i think-- released some numbers aroundthe popularity of all css properties on the web. and this is them. so width is the most popularcss property. who would have expected that? but it's interesting to lookat these and identify what
sequence of operationsthey force. and so most actually do affectthe geometry of the page. but, of course, opacity, likei mentioned, does not. another cool way to lookat this is animatable. lea verou made this tool. and hopefully, i can showthis really quickly. so this is just using key frameanimations, just to change a single css propertyon a bunch of different things.
but it's pretty cool to bringthis up and try it out to see what it actually lookslike inside timeline. so like i said, we'll takea look at font size. so as we animate font size, fontsize 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. so we're doing a transformanimation. it's just staying on the gpu. we're not going backto layout. so this is extremely efficientwhen it comes to animations. so in transitions, there's fourthings that a browser can do really, really fastin jank-free. it can scale. it can move, it canrotate, and fade.
these translate in cssto these guys. i should point out, youmight need the null transform hack, maybe. but if you're doing anyanimations, any visual effects, you want to be doingthem with these operations. these can be fast. it could be fast onlow-end hardware. it could be fast onhigh-end hardware. every other operation is goingto 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 performanceenhancements that we're doing are good for people. if we take a look at twitter,the load event, window outload, fires about midwaythrough the network waterfall. and the end of activityis quite a bit later. so looking at window.load forknowing that the page is done
is not going to work out. so we need better waysto identify how successful are we? so this is an approach developedby a guy named pat meenen, who runs webpagetest. so up at the top, we have thefilmstrip view of loading a page that's been optimizedtwo different ways. and so, you can see that thethird way is delivering content to the user fasterthan the other ones.
down here is a plot of thepercentage of the visual progress, plotting these out. so you can see, here, we'realready showing things to the user. and so, that's why goldis jumping up. now, if we want to take this andturn it into a metric, we can take the area abovethat line and just absorb it into a figure. so this is calledthe speed index.
it's basically the area abovethe curve that accounts for the visual progress beingshown to the user. so this is a nice, quantitativemeasurement for getting a successful picturein front of the user. now, in the real world, we wantto be able to identify things like, how as we'redeveloping a project over time, are we regressingperformance? are we improving it? adobe topcoat is a css librarythat has a really nice
framework set up forbenchmarking. so they're using a projectcalled telemetry that chrome works on. and so, this is actually a viewof their button element. and the horizontal axiswe just have commits. and we can actually see-- for the mean frame rate, theload time, and the layout how things are progressing. and so you can actually seethis is a pretty big
regression in load timeof this test case. and then things actually didslow down later here as well. but we're able to trackthis over time, which is really powerful. another developer took a lookat this and applied this to bootstrap over the history ofthe project from 1.0 to 3.0. and so this is just a quickview of the dropdowns component inside bootstrap. and we're looking at thefirst paint metric.
first paint is a tricky one. and it's hard to find the goodmetrics, but i think speed index is one of the best ones. inside google analytics there'sa few tools for these. you're looking at networkactivity. you can identify page load time,domain look up, page download time. all these are the exact same aswindow.performance.timing. but since all major browserssupport this, google analytics
will report it here. you also get these numberssplit up by browser, by operating system. so this is just a view i made ofbrowsing operating system. here, you can see safari on iosis considerably slower on page load time than the rest. and i think that's mostlybecause it's on a mobile network, whereas nearlyall these others are desktop on wi-fi.
speedcurve is a reallycool site. it's still in privatebeta right now. but it's hoping to give you alot more insight when it comes to the performance ofyour site over time. and so, here is htmlrocks-- which i work on-- plotted against amazon andtripadvisor to see that. but one tool that i really wantto show is webpagetest, and i'm going to show it witha site called retailmenot.
this page i just loaded now. i'm going to do a shift refreshbecause it's so fast. the developers behind this haveworked quite a bit on the page load time, andit really shows. but what's really cool istaking a look at what webpagetest tells us. so i ran this justearlier today. so this is retailmenot, assuminga cable internet connection inside chrome.
and so here, if you've seenwebpagetest before-- it's been around for a while-- you might know it has thewaterfalls and stuff. it has a lot more than that. i really encourage youto take another look. first thing i'm going to showis the filmstrip view. so over here in the filmstripview, we have-- just like before, every 100milliseconds, we have a snapshot of what thepage 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, youcan see my waterfall. we're going through my networkwaterfall, and we're seeing that correlation. now, another really nice thingis that you can ask webpagetest to capture thedevtools timeline recording. and so we can just viewthe devtools timeline
so i'm just going todo that right now. so chrome devtools has aweb app, as you know. so we're just viewingthis as a web app. and this is the actual recordingthat we are looking at on the webpagetest. and we can see a lot more. so we can see, here's the datacoming in, the html. google analytics causesa layout. they're asking foroffset 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 seeinga thumbnail right then. the last thing i'll show isthat it even takes those numbers from the timeline andaggregates them over the load of the page. so we can actually see, for thatentire duration that it
was recording, let's summarizeall the time that it spent in layout, in javascript,in paint. and so we can see here, for thatpage load time, where was the browser spendingit's time? so here we're mostly spendinga lot of time in javascript, to be honest. but layout does contributea little bit to this. so webpagetest, reallycool, had a lot of features recently.
and the nice thing is that youcan take the difference between multiple recordingsand 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 privateinstance. so you can run againsta development server if you want. it's all open source.
so to sum up, a few things. we heard a lot ofnumbers tonight. under 16 millisecondsis smooth animation. under 100 milliseconds feelspretty much instant. under one second, mm,i'm ok with it. over a millisecond,users are unhappy. so here are some aggressivebut good goals. and things that we should reallybe striving towards. when it comes to mobileconnectivity, it is hard to
deliver things fast. but users get really impatientquite fast. shoot to show the content that'sabove the folds in under a second. one important part of this isserving the above-the-fold content in the first 14kilobytes of response. this includes the css that youneed to render everything that's above the fold. you can defer the restof the css later on.
you don't need it just yet. but fit in that first14 kilobytes. that number is nottotally magic. it's based off of how tcpslow-start works. it's the first time that you'rereally going to get a considerable amountof data back. a maximum of 200 millisecondserver response time, 60 fps on scrolling, 60 fpson transitions. and a speed index of under 1,000would be pretty good.
so aside from reaching thosegoals, which are hefty but good, what can you do? it seems, talking to the peoplethat i do, a lot of people explain that it's hardto make the case to work on performance. you know, you've gotto ship features. you've got to get thatout the door. people expect the end results. and i think we really need to beable to make the case that
performance is incrediblyimportant. and the best way to do thatis, you can show them the numbers from google, and amazon,and microsoft, and anyone who has said that itaffects the bottom line significantly. but i think most people reallywant to see it with their own site, with their own data. so find, in your own analytics,ways to correlate performance wins to actualbusiness wins
that they care about. so maybe, the speed indexcorrelated to conversion rate. people that are experiencingyour site faster are performing better. make the case to your clientthat performance often might trump their feature request. that awesome, cool feature thatthe user will find once they register for your site,they probably won't get to that if they're waiting 10seconds for the site to load.
set up infrastructureto track your perf. so you can identify, over thedevelopment of the project, how if you're addressing performance or if it's improving. and to be honest, there'ssome tools available. i showed some of them tonight. but i think it's still quiteearly in the space. and the open-source communitycould use a lot more to help everyone track thisstuff better.
so i encourage you to join aproject or start a new project to help everyone in this area. stick around. we're going to do q&ain a little bit. peter lubbers: thankyou, paul. peter lubbers: we havea great gift for you. paul irish: cool. peter lubbers: i thinkyou will enjoy. paul irish: thanks, vanessa.
thank you very much. wow! so we need a couple minutesto set up the q&a panel. you can get up fora little bit. we'll probably call back inabout seven minutes or so, and then have everyone backup here for the q&a. at about 9:30, 9:35, we'llstart with the raffle. there's still somewine in the back. i think the beeris almost gone.
and we'll just reset. and we'll be right back. let's make our wayup to the front. we're going to get startedfor the q&a session. peter lubbers: all right,so, q&a time. and if those of you inthe back that are not participating, maybe just go alittle bit in a quieter area in the very back. right, that's a problem.
hey, everybody! can we get the noise down inthe back a little bit, so everyone can-- yeah, thank you. so who's got a question? i have a mic for youcoming your way. we're going to passthis mic around. we'll repeat the question herefrom 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 questionwas for jake, the-- jake archibald: oh. audience: --last one. so first thing is, really, everytime i use chrome dev tools, they seemto [inaudible]. it's really great. but i still have one concernabout the whole thing. that's i get concerned about thefact you say in the talk that if it's slow, use translatez, and put zero
[inaudible]. and, actually, i have theimpression it's like you are expecting people to understandthe [inaudible] by doing that. and i'm pretty sure most peoplewill just not get it. and it can actually harmother 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 sayingto people, you're good. go just to assemble. and so people who are reallygood at assembling will make the cut very fast. and it's amazing! and we'd say, oh, imean, assemble. oh, i know, my god, it's10 times faster. and someone else will try andwill just make a mess. and it will be much slowerbecause he tried to optimize.
and i think a compiler mightdo a better job. so all you're trying to-- paul lewis: so the question-- jake archibald: yeah,repeat the question. paul lewis: so the questionis why are you saying use something like translate z whenfor something that could be an anti-pattern or itcould just be misused? fair question? paul lewis: cool.
all right, so firstly,what we always say is profile your stuff. learn to use profilers. ok, if you start just applyingrules that you've heard secondhand, it will worksome of the time. it may not work in others. and it may just be acomplete disaster. so firstly, learn to profile. what i've been saying recentlyis that when you write code,
you should expect it to workaccording 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 theimplementation of the it's a reality of what we do. and that's ok. yeah, we should justaccept that. we're growing upas an industry.
we're doing more, andwe're going to have to understand more. it's a slightly uncomfortablething. there are always people who willjust apply stuff and make a mess of it. and we'd much rather they'dlearn to profile and figure that stuff out. but right now, this is the wayto get past the problem. we'd rather you didn'thave the problem.
we're always working to try andfind better ways of doing chrome so that we don'thave these problems. but it's a case of saying,look, if you need to work around this problem, hereis a way to do it. we're looking at ways fromour side as well to make that happen. so is that fair? jake archibald: although ithink there is a lot of validity in what you're saying,like the advice that
we could give today mightnot work tomorrow. i mean, an example of thiswould be, we used to give advice like, if you are going toconcatenate a string, don't use plus, right? that'd be insane. no, use an array, and then jointhe array at the end. and that was faster at the time,but now it's slower than just doing a normal stringconcatenation. but, yeah, so these are tipsthat today will make your ship
really fast. but you need to beon top of that. you need to be checkingit tomorrow. look after your site if a newbrowser comes along that does something different. and mobile especially can'thandle a lot of layers. then, yeah, profile it, andif it's not helping, peter lubbers: questionover here. audience: so i'm trying touse my time offline.
to me it seems like you're in areally good memory problem, basically, where you store allof your assets locally. and then they only updateafterwards. so it compares a lot. and i wanted to hear that. except that the user neverhas to update anything. they just use the app and allin the background later. and despite the fact that theydon't always have the absolute latest version of the site,basically starting with a
fresh project, what would beyour 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 meanapplication cache-- uuh, eeeh, aaah, eeeh-- if it'sa single page app, then you could probablyget away with it. but if you have urls, which theweb should, then you're
probably going to get a lotof pain trying to do that. but we're working ona new thing, right? we've got this navigationcontroller where you-- paul lewis: service worker. jake archibald: serviceworker! well, we'll changethe name again. don't try to rememberanything. yeah, yeah. but the idea is that you'regoing to have this web worker
that is going to be ableto receive events. and one of those events is goingto be fetch, when the browser tries to goaway and fetch something from the network. and you can cancel that event inthe same way you can cancel a click on a link. and you could do somethingelse, which could mean it might pull something from acache or make up a response and serve it.
and you're right. the native apps, they servesomething from the cache straight away and then goand look for an update. and that's the model thatwe're promoting. i've been banging onabout progressive enhancement for a while. but this is a nextstep of that. we're going to treat the networkas 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 thenmake an extra request for updated data. and let that fail silently, andthat will be your offline experience. peter lubbers: ok, we've got aquestion right over there. audience: i'm a little new. so not that i didn't love theanalogy with the pirates, but can you do a briefsummary and--
jake archibald: excellent,sir. audience: well, we could thegarbage collection and-- colt mcanlis: gaarrr-bagecollection. colt mcanlis: yeah,absolutely. so it all comes down to this. is that garbage collectionevents only kick off when there's unreferenced objectssitting around in your memory heap. so you allocate an object, youde-reference it, and it's
sitting around. this is going to happenover time. you're just going to continueto do this. at some time, you won'tbe able to control it. it'll happen randomly. the garbage collector willdecide it's time to take 10 milliseconds of your frame. it'll stop. i'll do some work.
it'll clear out yourunreferenced objects. and then, it will givecontrol back to you. this will eat your frame rate. now, it won't eat theframe rate equally across every apps. i think what we were trying tosay earlier was tools not rules, right? which means take everything wesay up here with a grain of salt against whateveryou're profiling.
so the whole point of my talkwas don't let your objects die, and it'll keep your gc fromactually running, which means you actually have tomanage the memory yourself. this is something i've beenharping on javascript developers for almost a year nowis, quit being javascript developers. start looking back towards thetrends you see in c and c++, because those patterns ofwriting code actually result in very, very fast javascriptexecution.
so sorry for everyone in herewho doesn't agree with that. paul lewis: you've gotthe microphone now. audience: ok, so we have a lotof really good profiling tools in a desktop environment-- panel: oh, yeah, he's goingto ask about mobile. audience: --if we're profilingin a mobile environment, that's real, not emulated. paul irish: yeah, so everythingthat we showed today in the chrome developertools works against chrome and
android, all of it. colt mcanlis: give usa round of applause. paul lewis: yay! paul irish: so the memorymanagement stuff, i didn't show the frame rate meter. but actually the frame ratemeter also shows you your available gpu memory and howmuch is currently being consumed, which gets reallyinteresting when you are scrolling images into view andout of view, and images are
being decoded intomemory and not. and so, chrome in androidhas extremely extensive developer tools. firefox does as well. and mobile safari doesnow as well. so really the only browserthat does not have good tooling is the legacy androidbrowser 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 ofthe performance tooling. but pretty much you canextrapolate the performance of android browser based on theperformance tools that you use inside chrome. so debugging chrome in android,all the improvements that you make will have hugeimpacts in android browser. paul lewis: one thing that ithink it does touch on is you still need the device. and this remains a challengethat you can't emulate the gpu
of a mobile device froma desktop device. it's just not the same thing. it's not got the same driver. that remains a challenge. i don't think there's a goodanswer yet other than have the device that you're trying toship for on your desk tested against that profile in that. you may have a lot ofdevices ultimately. but there isn't a shortcutto that process.
i mean, you can get really farjust using chrome devtools against a decent nexusdevice, for example. you can do that. and you can get pretty far. and you can extrapolate,as paul said. but you might need to justget specific devices. colt mcanlis: it is worthpointing out there's a fantastic blog post out therethat shows with the nexus 10 device you can actually emulatedifferent frequencies
and patterns. and you're actually able toemulate a whole swath of different performance profileswith a single item, including different resolutionsand whatnot. so find that post on g+. paul lewis: i'm just going tothrow in that i have seen bugs very specifically on certainhandsets for the gpu that didn't manifest themselves onanything other than very specific hardware.
so sometimes you're just goingto have to buy it. jake archibald: i haven't saidanything for this question. and i'm feeling left out. jake archibald: so-- colt mcanlis: give it back! peter lubbers: we've got ournext question, right here. audience: yeah, so thanks forsome great performance tips. i think this goesfor paul lewis. i think you showed some examplesof that i, as a
developer, as a front-end guy, ineed to combine an animation frame, and a scroll handler,and an [? event ?] handler. and i need to combinesome positions. i need to remove some class. if i'm scrolling into a groupperformance, i think that's a lot of complexity to add oneach individual front-end developer in this room,that i need to figure out, ok, i'm scrolling. so i should probably removea class so i don't have
concessions. paul lewis: right. audience: --do you thinkthat's a problem? or we you looking into someways that we can annotate these things, includingthe different ways? paul irish: that'sa good question. paul lewis: yeah, the toolsshould tell you, i think. the question is, ok, dealingwith this performance of scrolling, getting fastscrolling 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, youshould expect the browser to do the right thing. you shouldn't expectfast performance. you have to understand theimplementation today. that gap will closeover time as the implementation gets better. but it doesn't remove adeveloper's responsibility to understand the system they'reprogramming for. colt mcanlis: [clapping].
paul lewis: [laughs]. colt mcanlis: thank you. well said. paul lewis: i try. where that line is-- i think the thing thatpersonally frustrates me is how easy it is for you to shoot yourself in the foot today. i would love for it to beimpossible for you to shoot
yourself in the foot. i would. but i don't think that's goingto happen anytime soon. we're doing everything wecan to make sure that your code runs well. and you can imagine-- the web is the most generalcomputing case that you can probably think of. every developer writes codedifferently, that has
different problems in differentplaces, because you can do pretty much whateveryou feel like doing. this is great. this is the brillianceof the web. it's unbounded. but writing something that caninterpret unbounded and do it well without you having tostep in and go, actually, here's what i meant,mr. browser. audience: that's why my secondpart of the question was, are
we looking into other ways wecan annotate this so, hey, my elements i've got animationfrom the scrolling key card has-- paul lewis: yes. audience: --renderingsome little-- paul lewis: right, so we'vejust recently added a show potential scroll bottleneckscheckbox inside devtools, which is like it's going to puta box around it and go, hey, you have a touch handlerhere, which, for various
reasons, will get in the way. a mouse wheel handleris very similar. so we're looking at ways, wherewe 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-handthing. hopefully, you'll thengo, huh, i maybe don't need that there. i'll remove it.
colt mcanlis: cani say something angsty, really quick. paul lewis: yeah. colt mcanlis: i wantto make sure we get through all the questions. but i want to say somethingsuper angsty. because i'm the angrybald 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 careabout performance. you're here because you shouldown performance, right? the browser will do what thebrowser's going to do. the spec is going to do whatthe spec is going to do. you are in charge ofyour performance. ye be the master ofye ship, right? colt mcanlis: and the browsersare going to optimize
differently. but, dear god, if anyone inthis perfmatters meet-up thinks that any other viewbesides you are responsible for your performance is theright 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 worthanything anymore. wear the badge. make it your credence. and you will shipbetter products. don't wait for the platform. don't wait for the browser. don't wait for the guysitting next to you. be the captain ofyour damn ship.
jake archibald: i'm going to addsomething boring to that, in that part of the standardsprocess is we-- because if you're finding thatyou're doing these tricks with javascript to enhanceperformance, like adding an element over the top to catchhover events so you see they're not going down to thecss, make noises about that on the standards groups as well. because when we see this commonpattern happening loads of times, we can put thatdirectly in css, and it will
be faster still. we saw this with things likequery selector role, css animations, thatkind of thing. paul lewis: actually, generally,just let us know if you find something thatreally sucks from a performance point of view. we love those because we putthose in front of engineers. we talk it through with them. we either would say, oh, yeah.
you could change a code. and that would fixthis problem. or it's just something that'slike a platform thing that we're trying to fixand fix quickly. so if you find anything that'sjust pathologically bad, then just let us know. we'd love to see a bugfiled against it. and then we've got somethingto rally around. ok, all right.
audience: --that kind of sums upwhat you just talked about. the html5 dev conferenceintroduces things like, hey, spice up your pages withcss animations. so i actually had a situationwhere i wanted one button to stand out as a command peopleshould be noticing. and i put it in. and all of a sudden, a coupleweeks later, i realize that my cpu's getting eaten up. and so, i think, to put it incolt's terms, we've been given
a plank, and we can walkoff it, if we wish, ok? and so, i totally agree. this was very enlighteningtoday. and so, i had an offlinediscussion with a couple of you. and i'm very impressedwith the tools. and i think one of the nextsteps potentially to take-- and i'd like your commentary onit-- is a little bit of ai to say, hey, how are youshooting yourself in the foot?
how are you killing yourself? because a lot of people are veryfunctionally oriented and aren't really proactivelylooking at the tools. so i'd just like yourcomments on that. paul irish: one of the thingsthat we want to do inside the chrome devtools is-- right now, the situation isthat if your interested in performance, you profile. you look at the results.
you interpret them, andyou make changes. and that works extremely well. but it doesn't reach everyone. because not everyone asks thequestion, why am i slow? why is this not great? so one of the things that wewant to explore is being a bit more proactive in ourrecommendations. so oh, i noticed that you'renot concatenating your javascript and production.
and i noticed that youhave paint storms. i noticed that you're layoutthrashing for three seconds as you're loading the page. and we have abilities todetermine this and show that to the user. we're not there yet. but it's something that wedefinitely want to do. peter lubbers: we gottwo more questions. and if we could keepthem pretty short.
audience: sure, reallyquickly. using the webpagetestthing, i think it's a performance thing. stuff that happens afterthe [inaudible] captures stuff up till there. does that matter in terms ofloading more network access and stuff, after that event? do you think that matters to-- paul lewis: i think we've allgot an opinion on this one,
apart from colt. audience: --mostly to thingslike search engines and such. i guess it could alsobe used as-- paul irish: i don't thinki understand it. paul lewis: no, i don't thinki-- now, you've added the search engine thing. paul irish: could you repeat? because we're notexactly sure. jake archibald: do you mean oursearch engine's going to
penalize you for extraloadingafter onload? audience: yeah, exactly. because webpagetest mostlydoes until that point. paul irish: ah, ok. so on webpagetest, thedefinition of fully rendered for webpagetest is 2 seconds ofidle network activity after window onload. so it basically looks at thenetwork waterfall, makes sure that the network activityis still and
that the page is done. and that is how they determinedoneness, which seems like a reasonable thing. search engines are prettyok with that, too. jake archibald: yeah, if it'sa great user experience for you to get to first renderreally quickly, but then use the network to cache stuff forthe next page or start loading something further downthe page, do that. don't do something else becauseyou think it's going
to get you a betterrank on google. because ultimately, google isgoing to change how it works, how it search indexes based onwhat gives the best user so never try and game it. paul lewis: just sort ofrelated, every time you do the progressive enhancement thing,and you load the page. and then you run some javascriptthat injects something else into the page. and then you do some ajax,and you put something
else into the page. just out of interest, rememberthat you're paying the tax every time you do that. because you're goingto 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 theprocess of loading. so there's a real balancingact here.
it's not a one-size-fits-all,right? you want to get stuffon screen quickly. but if you keep nudging thingsalong, you're going to pay that tax several times over. so just profile it, figureout what your metrics are for winning-- yay-- and then go there. male speaker:are weon last question?
audience: hey, colt-- peter lubbers: ok, iguess 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 objectpool going to have to be pretty specialized to notproffer any classes?
and also isn't gc timeproportional to number of live objects, especiallyin mark and sweep? so will your mark and sweep besuper, super long, if you happen to incur one. colt mcanlis: yes, you shouldhave object pools that are unique to class-specific data. i generally disagree that youshould write javascript with heterogeneous types in it. you should have an object andduplicates of that that are
heterogeneous. again, that's myc++ background. and yes, mark and sweepis fantastic. and the iterational garbagecollector in v8 is probably one of the most cuttingedge you'll find anywhere in the industry. however, you still lose time. and we can sit here and debateall day about the micro-optimizations.
go to the tools. peter lubbers: and our finalquestion of the night. audience: right, these questionsare for the angry pirate captain. so you talk about reallocatingyour memory, and that's the memory that you cancontrol, like all your javascript objects. what about the stuff you can'tcontrol, like images floating in and out of view?
i know in something i'm workingon in the moment, i have very little javascriptgetting allocated. but it just rampsup and gc pops. and it's because a lot ofimages are floating in and out of view. can you control the garbagecollection on that stuff as well? colt mcanlis: that's afantastic question. for people who didn't hear thaton the live stream, can
you control the garbagecollection of things that aren't javascript-createdobjects, images, dom, and stuff like that? so we could sit down and profileyour whole site and give you a million differentways to handle this. the short answer is,yes, if you're willing to be super tricky. for instance, objects will comedown off the network and images will be created.
you can't fix that. that's under the hood. but how it's resident in yourmemory on the page, for example, having a static poolof 10 canvases, right? and then, swapping and managingin how those canvases are filled as sprite sheets andhow the uv coordinates on that is handled could definitelybe a potential solution for that that wouldcut down a lot of your texture-memory residencythere.
so thousands of differentthings, depending on all of your use cases. again, this comes back to it. jake archibald: you cantalk about that. paul lewis: i think, in general,something like the image one, very specifically,we're working really hard. there are loads of optimizationswe feel that we can make in terms of imagedecoding and image resizing in the pipeline.
when you see them crop up indevtools and you see these huge green spikes of paint, andyou see a little arrow. and you're like, i knowwhat's inside this. you spin it and it goes,image decode. image resize! and you're like, yeah, iknew that was coming. and we want that to be acomplete nonissue, right? we just want it to go away. we have ideas.
the engineers arelooking at it. it's a thing. so we want it to go away. in the short term, it'sabout avoiding resize, like we said before. it's about doing all youcan to mitigate it. but it's just one of thesethings 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 dothe canvas thing. i did that. it's weird. colt mcanlis: but it works. paul lewis: it works. but you just go sofar off road. you understand that thebrowser does it for you for a reason.
jake archibald: cani say something? paul lewis: no, peter'sgoing to take it away. jake archibald: no-- colt mcanlis: don'tgive it to him! don't give it to him! jake archibald: aaah! the guy who did really wellon 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'llstay here. colt mcanlis: that'dbe super awkward. jake archibald: yeah. colt mcanlis: if you just cameup here, and we're like, yay! jake archibald: i'llpresent to you.
peter lubbers: all right,well, one more time. a big round of applause forthese great speakers. everybody on the live stream, wehad over 200 people on the live streaming, whichwas great. everybody, thanks for joining. and that was one of the longestaverage view time, like 25 minutes per person. so that was awesome. so thanks for joining us.
all of these talkswere recorded. but they will be posted on oursite shortly on the google developers live site as well. male speaker: tellyour friends. peter lubbers: yeah. and we'd like your feedback. so if there is on themeet-up site-- when you're done, you'reprobably going to get an email seeing if you cangive a rating.
let us know your feedback. we're always open to makingchanges for the better. so i hope you enjoyed it. and we're going to say goodbyeto the live stream and move on to the raffle here.
0 comments
Post a Comment