Bio Stoyan Stefanov is a Facebook engineer (a former Yahoo!) and an author, contributor, and tech reviewer of various O'Reilly books. He speaks regularly about web development topics at conferences and on his blog at www.phpied.com. Stoyan is the creator of the smush.it image optimization tool, YUI contributor and architect of Yahoo's performance optimization tool YSlow 2.0.
Software is changing the world; QCon aims to empower software development by facilitating the spread of knowledge and innovation in the enterprise software development community; to achieve this, QCon is organized as a practitioner-driven conference designed for people influencing innovation in their teams: team leads, architects, project managers, engineering directors.
I’m Stoyan Stefanov, I’m a Facebook engineer, currently work mostly on the social plugins such is the Like Button, trying to make everything as fast as possible, because there are everywhere on the web it’s a way of trying to make the whole web faster by making all those plugins faster. Before that I was at the Yahoo working on performance, worked on tools such as YSlow or SmashIit image optimizer and generally helping teams improve their performance. I’ve written a couple of books, I like to speak to people at conferences and this is all about it.
The most important thing as I said is the networking stuff and if you can use to such as a
webpagetest.ogr that work YSlow, PageSpeed and get all the basic network layer stuff out of the way and done properly, and then after the loading of all these codes is done in the most efficient way. Then you get diminishing returns the more time you spend, so next thing after the network is right, then usually applications spend a lot of time in the DOM manipulations and causing the browser to reflow and repaint and so on, so anything to do with layouting would be the next thing to focus on and in terms of tools then you have all the browsers built in which are getting so much better now than what you used to have just few short years ago.
Firebug for Firefox and web inspector and definitely helpful it even show you how much time you spend layouting, painting and give you CPU profiling. The built-in tools in the browser are great, also for performance I really like online tools, nothing that you need to install, is just something that you go to a page, you give the URL and you see immediate benefits. So one kind of online tool that we love is www.jsPerf.com, where you can really test any assumptions and any advice you are given, whether it make sense in your use case and whether should be even something you’ll be focusing on, and our advice even every time you decide to do an optimization, is first to test if there is, first thing would be to profiling, using all those profiles since this is really a bottleneck of the application, so no reason optimizing something that will give you virtually no return. So after profiling what do you decide or what you do is just test the assumptions in jsPerf and see is there really worth spending time on this thing or no. When somebody gives you an advice and say: “Do this instead of that” and the right response to me will be show me the jsPerf or test, or it didn’t happen.
4. [...] How the developer goes about worring about these things, for example you can get really familiar with a specific open-source browser and understand how it does reflows but does this scale for doing it, for all browsers?
Dio's full question: You mentioned also about performance issues when dealing with DOM causing reflows and stuff like that. Now practically dealing with at least 3 different engines in WebKit Gecko, whatever Internet Explorer using at that time and also legacy browser and also particularities of mobile clients, how the developer goes about worring about these things, for example you can get really familiar with a specific open-source browser and understand how it does reflows but does this scale for doing it, for all browsers?
There is some specific about the browsers, that is obvious, but I think in general just focusing on one browser and making all the DOM manipulation fast in one browser is very, very likely that it will give you a return on your time investment in all other browsers, and unless you see something specific to support IE 6 or 7, if you see some specific slow that is not slowing Chrome of Firefox but shows in iE and you might want to invest some time there. There is actually in terms of tools, I forgot to mention, the dynaTrace Ajax edition for IE or also give you how much time you spend during the layout, executing a function, also the network traffic, so it’s like a WebPageTest waterfall plus additional layout things so it will help debugging in IE, but just in general reducing the DOM manipulations, doing all these, constructing your DOM tree offline and not on the live page, reducing the reflows that is very likely to yield good benefit in all the browsers.
5. I know there is some debug version for Firefox where you can actually see colored boxes as the page loads and you can see the reflows, is there something similar for the Internet Explorer platform?
I’m not aware of.
You mentioned classes in ECMAScript 6, it seems like you are positive about this, what do you think about the rest of the changes coming in ECMAScript 6? So I’m not positive about the classes, I’m not crazy about the idea but seems like this is something people want. But the thing is if you play around with TypeScript before and after you can write TypeScript and see what it compiles, and you can see actually the backwards compatible version is actually shorter and looks very nice and clean, so if you cannot accomplish in the language all this stuff without introducing anymore syntax, is it really all that important to be there.
9. You mentioned shims and what is your experience with shims and polyfills with the respect to performance, I’ve people are complaining about how poor some of these Sims are performing in older browsers or how unpredictable performance can be, for example some of the features that libraries like Underscore or similar libraries give you from ECMAScript 5 you can start using and if you are using too much you are getting performance issues where there were not any?
I’m not suggesting not use the native but just an example that it’s hard to tell, you cannot always say native, that will be better, that is your first told but doesn’t always need to be the case, so that is why I always recommend to test any of those assumptions and not just say: “Somebody said that this is faster or slower”, just see the jsPerf test or see if this advice applies to your case, how many elements in the array are you iterating and what exactly you are doing there. If you have a HTML collection that gets elements by tag name and you loop over that and do something, the actual DOM manipulation will be so much slower than any sort of over head of the loop.
10. You mention Game development, what is your view on people having issue with Garbage Collection and stuff that have to do with VM’s themselves, one they are pushed to do heavy lifting for games and 3D stuff?
That will be out of my real expertise, really I haven’t done any games, recently I have experimenting with web audio which is really nice, but other then that I’ve been focusing most on the regular web page type of applications, so people who do the games would have different set of challenges and then these things will start to matter how fast you can iterate over it, 10.000 pixels.
The main thing with large scale applications to worry about is don’t make them so large scale and just starts small and do what ever works and instead of spending a lot of time designing this beautiful architecture for any sort of use cases that you might or you might not have, so you just make the things work and then you can iterate over time and make things better and abstracts some parts of the code, but I think will be mistake to start planning to build something huge, just let naturally evolve and also plan to throw it away when you need to iterate over and over what you have and replace some of the stuff with better or some more abstract ways.
I don’t like IDEs at all, since I switch to Mac a few years ago, I’ve been using just as regular text made editor, I know there is now people’s talk about Sublime which is probably better and I’m just setting my way. Before that on Windows I was using a simple text editor called Text Pad, so all you really need is code Highlightning, good search, replays functions, auto-complete is kind of nice but not really required.
There was one talk by Douglas Crockford where he was giving this example where: “If you take all the code that you’ve written last year and start to retyping it, it will probably take you about a day, a day and a half”, not very interesting day but you just sit down and retype everything that you’ve typed in the last year in a very short period of time. So then the question is: ”What are you doing in the rest of the time?”, and it’s not typing, so that is why focusing on the IDE is kind of probably not the right problem to solve. Most of the time they try to eclipse for PHP before that was a Zend Studio, so it’s just too much of IDE to go on, so all you really need is a good text editor, and wherever the tools don’t give you, you can, you know how people say that any problem is really a people-problem. I like to think that any problem would have people-solution, so things like code reviews and training everybody on the team, looking at the same code, you can see the history and why this was done this way and what do you consider the history in the source control.
Working together on the same codebase as opposed to, this is my library and this is my class and nobody touch it and so on, so that is why having code reviews before you commit any code so first of all you get validation, second it gets better with the code reviews and then even people just stay up to speed with whatever it’s going on, people learned from others in this way. In terms of tools I think it’s a better option to invest in some sort of a process and code review tool because the code is that thing that you focus on the most and more kind of a social the development could be that nice, it suppose you just doing something, just protecting it because this is my turf.
13. What do you think about the rest of the HTML5 platform or actually the rest of the web platform, how do you think the HTML5 API’s and the CSS 3 features rate as a developer experience and are there things that you think need fixing, is there something that while working you think it will be great if I could do this, think now and not have to work around it?
Yes, I think, I like what I see so far.
Yes, going back I think one of the first things, I had one course in Pascal back in the time, in school, and after you learn how to declare variables and even before you get to arrays so when I wanted to see how you can make sounds with this thing, it was nice and exciting so I kind to fill the same way now, because all those, the music software that I’ve seen it’s like Photoshop or like your IDEs, it’s complicated and it’s too much going on, and having this low level access and doing anything you want to do with the sounds, that is really exciting.
Dio: Thank you very much, Stoyan!
Thank you Dio, it was a pleasure!