Slack: Extended Xmas Special - Supercharged

[Music] [Music] hello welcome to this very special extended holiday edition of supercharged I'm Paul Santa Louis here ready for Christmas Sant recognize that name and this is the show where I take the sites that you've submitted and I go through them and I try and find and fix performance issues and uh today's no different yay Merry Christmas it's slack that's what we're going to look at today I like slack an awful lot and we have a chromium Dev slack which will be uh the target for uh performance profiling today so when I said to them is there anything in particular that you're seeing and uh you know that you think we should look at and they went oh yeah actually there's this quick switch it if you hit command okay it takes a long time for it to come up on screen and we don't really know why fair enough okay well we'll start there but uh as it happens I uh I think there might be a few other things that we see along the way it's a it's bumper it's it's the right time of year to give you extra you know I mean look in the stocking what's there oh scrolling issues oh what's in there layout thrashing oh worst Santa ever bring me the Min pies so what we'll do we will hit record and we're going to hit command K and then we'll stop recording yes and we see the key down event over here and they are absolutely right it is just shy of half a second in JavaScript terms here for the key down event so the key down is just me pressing command K and it coming up on screen so let's have a look at why well I see these red triangles in the corner and I see a recar style followed by a layout so calculating styles on the page followed by laying out elements on the page followed by calculating styles on the page and then laying out the elements on the page which seems Superfluous at best and actually each one of these is really quite expensive like this first one is 93 milliseconds in calculating Styles so if we click on it yeah you see just shy of uh 9,000 elements have been affected by this style change that's an awful lot of elements that could be affected by a style change you know if you're going to make some sty changes often quite good to be very specific about the styles that you want to apply but it may just be that there's a lot of elements being added in this case say to the page for example the quick switcher elements and that might be what the issue is because it's preceded by a PA HTML so that makes me think there's new HTML coming in it has its St calculations and then we force a layout as well same kind of deal except this has got 13,000 elements in play and again 93 milliseconds and this is is a fast desktop machine this would be brutal on other devices so big problem here then I guess now the good news is underneath we actually start to get the call Stacks so we can actually start to figure out why what was it that was called into that was triggering this problem and this is it here there's clicking on apparently this anchor with B snag I'm not sure what the deal is there but it goes to jQuery something to do with that I'm not sure what that is then bootstrap with its model and then modal show modal backdrop okay and then eventually it seems to trigger and show so something in this interplay between the rollup client uh the rollup core and the bootstrap now it's going to be very specific to them let's have a quick look at modal show just out of interest and it's minified so again you know for them I today would obviously go to your own minified and have a look around do the same thing again but if we start to see things like yeah add class uh we're making a style change we're basically making style changes yeah we're reading a class here has class fade um add class so you start to sort of build up this picture fairly quickly that there's a check on Styles followed by a mutation of styles and then if somewhere later in that call stack somebody else is reading a style and then writing a style that's exactly what's going to land Us in this problem as I say it's their code so i' would say look go and have a look at this you know the call Stacks are here um they will recognize their own code I'm sure and then it's a case of trying to pick it out and say well we should do all our reads up front then all our rights libraries like faston will do that for you um but you can still do it yourself just make sure that you're orchestrating your code very carefully it can be tricky and that's why fom exists because it will help you do that and a lot of people use it very successfully so that would be how I'd start for them but while I was here I noticed this update layer tree that comes straight after updating the layer tree is how Chrome organizes basically all the layers in the page so you know where everything needs to sit in relation to everything else and that's 73 milliseconds that's monstrously long really long uh and again especially so for such a powerful device so what's going on well layers is the answer but how do we find out more about this well we have a tool we have a chrome Dev tool that's why it's called Chrome Dev tools tools inside the tools switch on the paint profiler hit Rec cord again and what we'll do is we'll do a bit of a scroll and I can tell you that that is pretty bad we have to wait when we got the paint profiler on um there's an awful lot of extra information that's coming in so it does take a long time to pull that data in and actually pause it and get it ready for us to have a lookout so we have to do the happy dance it's beginning to look a lot like Christmas it's here so what we can do is we can see yeah sort of six frames a second 5 frames a second and that's where the paint profile are on so it probably be nearer sort of 9 10 frames a second certainly not the 60 frames a second that we'd want so if we click on the layers um the frame sorry at the top we get this layers tab that we can click into says layer information is not yet available but it does come up eventually there we go and we can make this a bit bigger there we go and we start to sort of see what all the layers are that's all these boxes on the screen and I tell you what we'll do is we'll just move ourselves back can and we can spin this out into 3D space woohoo who doesn't love that nobody there we are rotate okay there we are look at that that's great is't it it look like basically every single item in the quick switcher is getting its own layer and that's going to be expensive to manage I would imagine we can confirm that though because what we can do is we can hit escape and we would go to the rendering options if they're not there for you then you can go to more tools rendering settings like that and you can switch on show layer borders and yep sure we would expect each one of these items in the list has got its own layer and in fact the even the status icon inside has also got its own layer and we can spin this down as well and inside the Omni box which is what that is yeah there we are Omni box item and then the present so basically the status now if we click on one of these items we can see the reason that it got its own layer scroll parent is not an ancestor no idea might overlap other composited content now that one I can guess that's basically Something's Got a layer and one of these list items might overlap it okay and then it says cannot be squashed because this layer has a different clipping container than the squashing layer yeah this one this one took me a long long time to figure out when I was looking at this I was like yeah I even had to speak to a a chrome engineer and I was like just what huh and they uh they gave me a few hints and um got to the bottom of it which is good it's kind of kind of is it going to work out who knows it's exciting time for me it was it always like that with performance work you get thrown something and you're like you do some forensics will you solve the the puzzle who knows it's very exciting that's why I do this to be or not to be that is the question whether it is Noble or in the mind to over the slings and arrows of Outrageous Fortune or to take arms against the Sea of troubles and by doing so back to the task at hand well it turns out if you look at the container element have to scroll up for that apparently there's a lot of them there a lot of them I'm going to get there eventually got there okay Omni box results is the container element that's doing the scrolling it has a width it has a height but it has overflow y scroll and overflow x hidden so it's clipping that list which is great that's what we'd want it to do and that makes perfect sense however every single item inside The List It Too has overflow hidden so each item is clipping its contents and what blink does it goes well that's got its own clipping because it's overflow hidden and that clip doesn't match the parents clip therefore I'm just going to assume that it has to have its own layer because of that so if we switch off overflow hidden on the children all those layers disappear and we're going to get one big layer which is probably going to be better we'll switch on the timeline again switch off the paint profiler so that it doesn't take all the extra information we don't need and we'll record and we'll scroll ah now we're getting something like 30 frames a second so we're up from about well it was 5 six could be nine or 10 without the paint profiler up to about 30 so definite Improvement by having in this case one larger layer rather than you know hundreds or thousands of smaller layers but that's still not 60 frames a second which is what we'd want so I see a lot of purple in this chart at the top and certainly that matches up with yeah about 12 milliseconds here update layer Tre which is down from 20 odd 24 25 I think um to 12 so it's definitely better but it's still not good it should be a fraction of a millisecond ideally speaking so let's see if we can figure out what's going on well again we can switch on the paint profiler do a quick run and see what's what all we need is one of these frames we'll go and wait for the layers there we go and we can see we can actually see the list there we'll reset the transform you see the list of items in the quick switcher and yeah you see here it's 66,6 pixels High that's enormous that's a huge layer that needs to be handled and it's just probably putting blink Under Pressure we can prove that I think by going through to the elements and what we'll do is we'll select the Omni box item and we will say display none and that's going to give us nothing in the the list which is not so great but what we can do is we can go and we can override that for a few of them and so that we've got something to scroll this is going to take us a minute or two so we've got a few in the list now so we've we've enabled like 10 of them or something like that and so it's this list is basically nothing like the size it was and we'll do another timeline recording and we'll off the paint profiler here we'll just have a go without and stop that and yeah we're basically at 60 frames a second now and the update layer tree has gone from that 12 13 milliseconds down to 3 milliseconds so it's clearly the size of that layer is a big big factor but that still bothers me because it's still 3 milliseconds and it should be a fraction of a millisecond so something outside of this uh quick switcher is probably causing an issue too and my hunch is having looked at this before is it's going to be the actual content of the page in fact we can confirm that because what we could do is we could do a paint profile and we'll do a quick Scroll of the page content it is 60 frames a second so we could stop here and that would be okay um but I would imagine that since this update latry is still quite big we should should see if we can figure it out and yeah so looking at this the actual the page dividers we got message scroller div is 12,5 uh 12,544 pixels and the actual day divider which seems to be the previous day's content that is 12,000 and so again and by 10,000 so those are huge layers and you can see that actually here if we let me get rid of that and we will Zoom we will zoom out there we go yeah it's it's there's the actual page in the bottom corner and this is what it is I mean even there we are that's what it actually looks like there's the page content we have another one here and the footer as well for reasons I'm not quite sure why but it seems to be that it is massive as well so I guess if I were them for this and the quick switcher I would say go to something that's like a recycler view where you know you've got a few much smaller Dom and your recycling elements that means that the layout should be cheaper the style calculations should be cheaper everything should be cheaper and you can use something like request idle callback to only do those mutations to the Dom when the users in idle and if you need to put up a spinner or something like that okay but you know maybe you sort of take a slightly more nuanced approach where you use request idle callback or if it's getting quite pressing you just do it immediately and you take the hit and maybe your frames per second will just waiver a little bit but it's certainly going to be a lot lot better than having this huge set of layers that you know is just putting uh blink Under Pressure here so there you go a bunch of stuff the layers panel the paint profiler um just Dev Tools in general and scrolling performance issues definitely want to take a look at this holiday season woo yeah if you find yourself with scrolling performance issues and it's not something like paint it might be something like your layers um check that out um have a great holiday and I'll see you in 2016 it's exciting brand new year it's a leap year [Music]