Supercharged Q&A: May 2016

Key Takeaways

[Music] welcome to this supercharged now normally when we do our videos we get lots of comments we get lots of questions on Twitter you know loads of things that kind of come into us and so we thought why not let's actually take a step back and answer some of those questions how are svgs rendered they seem quite slow are they GPU accelerated if so in what ways I have actually no idea cool I do so they're actually D elements um they uh not only the SVG but every child is a actual Dom element right all the like rectangle right so you got to be careful because uh if you move them around they're going to trigger layout but the layout operation will stop at the SVG route it's one of the times we actually have what we call a layout boundary where the layout actually is not document scoped it's going to be scoped to the SVG element what you look at that yeah the other thing is that transform normally we like you know promotee this into its own layer and then transform it around that doesn't work in SVG context in Chrome I'm not sure about other browsers but in Chrome we don't promote anything to its own layer when you actually add like wheel change or translate Z it's always a repaint it's always a repaint so you got to be be cautious with that to be fair I actually expected that for an SVG because I think for some reason I think of more than canvas likee than anything else right right but hopefully hopefully some point that you know optimization might land don't know though uh and then are the GPU accelerated they can be if you got GPU rasterization switched on in fact one of the the best ways to improve SVG performance today on mobile is to make sure that you've got GPU rization for at least for Chrome and the way to get that if you just Google for I think it is actually um magic viewport chromium possibly uh or I think is Ganesh or GPU rasterization Chrome one of those will get you into the world that you need to be in next question is it possible to disable I don't know why they put quotes anyway is it possible to disable web animations on very very very very very slow devices it has to be at least five and they put three tortoise emojis afterwards I think I know what that person is they're going for slow going fully slow devices I I can't think of a way to adapt your animations really I I think what you could do POS potentially the uh performance obs server that is in the works at the very least right now could eventually help you do this my first intuition when I read this question was that maybe you can kind of abuse uh request idle call back because that will only be called if your web page is not too busy and if that is being called you could use that to enable your web animations go the other way around having disabled by default and basically enhance your web page with the animations provided is is not under too much of a load yeah the problem I had with that is that your now main thread can so if you're animating with JavaScript right all your animations are coming from the main thread which is fine so you can then test for main thread availability with request AO call back or request animation frame or both but if you've got something that's like uh a CSS animation that is done with say a transition and you're just using the compositor thread and it's just going to keep going even if the main thread is janked up then you can't use that technique cuz it's going to be like well I can't do any animations right now and the problem I have is that um even with the frame timing API it's still only main thread availability so it's kind of going to benefit anybody who's animating JavaScript but it's not going to benefit anybody who's animating just purely with say CSS or something like that overall though I the thing I wanted to kind of ask myself was is it the right decision to disable the animations in the first place right because I was like if your ux can stand not having the animation it feels like you don't need the animation right animations just shouldn't be for the sake of IDE usually they serve a point and if they don't serve a point then you might as well skip them because it's about being you know a little bit mindful about the user resource right right so I was like but I get it's a sliding scale and somebody might be like hey it's an added bonus if your device can take it or whatever as I say I don't I don't think you can do it reliably today and I don't know of anything that's like in the works that's just like this is a cast iron way of saying this device should be good to go but I think you're right request out of callback is probably the closest we're going to get well there you go so those are the questions that you asked and uh we would invite you to ask more questions in the comments below Twitter I'm at aerot twist at dma that's like that's like the Sera but in German which I learned I I'd forgotten all my German until I taught him he he did he did uh so ask your questions ping us on Twitter and we will catch you next time [Music] a