Talk: Performance Improvements in Browsers

I gave a talk last week at Google (at the request of the excellent Steve Souders) all about the performance improvements, and new APIs, that are coming in browsers. I cover the new browsers, their JavaScript engines, their JavaScript performance, and then do a whirlwind tour of their new DOM methods and some of their new CSS APIs.

John Resig: Performance Improvements in Browsers @ Google

Presentation: Performance Improvements in Browsers

Posted: February 5th, 2009

36 Comments (Show Comments)

1. Joseph McCann (February 5, 2009 at 7:49 pm)

   I’m really starting to think their are clones of you. There is just no way you can be doing THIS much stuff and be one person!

2. Abhisek (February 5, 2009 at 7:55 pm)

   @Joseph, I second that. And what an excellent talk that is!

3. Gleb Arestov (February 5, 2009 at 8:01 pm)

   already saw?
   http://my.opera.com/core/blog/2009/02/04/carakan

4. John Resig (February 5, 2009 at 8:06 pm)

   @Gleb Arestov: Yep! Of course, that came out about 5 days after I gave this talk — figures ;). I’ll hold my breath until they release their code to pass judgment on it, though. I’m skeptical of performance numbers that don’t come with something that you can run.

5. Vladimir Carrer (February 5, 2009 at 10:40 pm)

   Very informative talk! Just few things about rounded corners and drop shadows.Today there are NO simple solution for r.c and d.s who will work on all browsers. How many time we need to wait before CSS3|HTML5 and all the users to migrate to the new browsers? Ok, we can use Jquery + some plugin, they work great but 18kb library + xkb plugin for just rounded corners or drop shadow is just to much.Sometimes we only need just one thing. What about if someone can write pure Java Script library for rounded corners and drop shadows up to 2-4kb each. Is that an easy task to do?

6. John Resig (February 5, 2009 at 10:47 pm)

   @Vladimir: Here’s one for rounded corners, at least! (It’s 9kb minifed, I’m sure it’s much smaller gzipped.) Hope it helps.

7. Amit (February 6, 2009 at 12:56 am)

   About Cross domain XHR support in F3.1 and IE8. Now, isnt this potentially dangerous? Is there any kind of sandbox provided to content and scripts loaded from Cross domain XHR request? Are they being introduced to replace iframes?

8. Dmitrii 'Mamut' Dimandt (February 6, 2009 at 3:17 am)

   SQL in HTML is the single worst idea of extending/improving HTML. A simple key-value store would be more than sufficient.

   I’m just *dying* to see incompatible implementations of SQL.

   I wish people working on extending HTML stopped and thought that it takes enormous pains to realize something along the lines of Ext.js and intorduced proper UI elements into the browser.

   Yet there we have it — SQL. Oh, gods…

9. Stijn Vogels (February 6, 2009 at 7:26 am)

   The improved CSS is amazing. I’m going to have so much fun with those webkit transformations and transitions. Thank you!

10. John Resig (February 6, 2009 at 8:44 am)

    @Amit: The important thing about the Cross domain XHR stuff is that it’s completely opt-in. If a site doesn’t specify that specific access control header it’ll never be able to be requested remotely. Additionally, the header can limit requests from specific domains – that way you can make something cross-domain without exposing it to the world. I think this is a pretty good solution, for now.

    @Dmitrii: There is also a key-value store in HTML 5 called DOM Storage, which is what you’re looking forward.

    As far as SQL goes, though, it’s pretty much assumed that an implementer of the specification will use SQLite (which is why most of the actual specification for the implementation is deferred).

11. Timothy (February 6, 2009 at 9:06 am)

    I can’t listen to the talk (at work, no speakers), but I read through the comments to get the gist of this. I have to agree w/ Dmitrii. SQL in HTML is a terrible idea. Keep it server side, where it belongs.

    And I really really hope people do transition somewhat quick to better browsers that support newer releases of JavaScript and other components. I’ve played around with the different functions in current releases of JavaScript on Firefox, but it is useless unless if you can use it on your web sites / systems without hindering the experience of end users. It won’t be useful until the amount of users using browsers like IE6 is marginal.

    But, I do like what I see on the horizon. JavaScript and CSS really improving.

12. Lea Verou (February 6, 2009 at 9:09 am)

    Your presentations are really enlightening John.

    One question though: You say that Opera supports rounded corners. However, even for Opera nightlies, last time I checked they didn’t support border-radius, but instead suggested using SVG for rounded corners. Did they change their decision and implemented border-radius, or are you referring to the SVG method?

    Also, about the web fonts, Opera also advertises support for them (in Opera 10), even though its not in the Alpha. They say it will be in the Beta though.

13. John Resig (February 6, 2009 at 9:19 am)

    @Lea Verou: I may be just mistaken then – I thought they did support it.

14. Lea Verou (February 6, 2009 at 9:56 am)

    I hope you’re not, I am really looking forward to rounded corners in Opera without external files.

15. Ben (February 6, 2009 at 11:11 am)

    Opera supports rounded corners, but only with an SVG file as a background image. That’s only half a step forward, as there’s still a background image.

16. Mike T. (February 6, 2009 at 11:14 am)

    @John Resig, @Leo Verou

    Re: Opera and rounded corners, as of right now with Opera 10a, no support yet. I find it interesting that Opera used to support border-radius with the -o- prefix, but they ditched it in their last few versions (I have no idea when–before v9 at the latest).

17. Alexis Deveria (February 6, 2009 at 11:18 am)

    Funny I should just stumble upon these comments, since I recently made a round corner generator for Opera. It basically creates an SVG file which can be used in Opera as a background image that fits an element regardless of size. Also generates the Data URI so you don’t actually have to have it as an external file.

18. Mark Bekkers (February 6, 2009 at 11:21 am)

    @Dmitrii ‘Mamut’ Dimandt

    Don’t you think the SQLite is usefull for offline situations…

19. Mike T. (February 6, 2009 at 11:24 am)

    @Lea Verou (sorry ’bout the last typo)

    Also re: web fonts in Opera 10a, they *are* supported. At least on my machine. Browse on over to http://devfiles.myopera.com/articles/593/webfonts.html and you can see two examples using @font-face.

    Safari 3.1 displays the same as Opera 10a–and strangely Minefield 3.2apre-1 only gets the first font correct. The second font falls back to the default serif font.

20. Alexis Deveria (February 6, 2009 at 11:28 am)

    Also, Opera’s David Storey has confirmed border-radius in Presto 2.3 (Opera 10.5 or something).

21. Gleb Arestov (February 6, 2009 at 11:35 am)

    @Lea Verou
    what are you talking about? opera 10a supports both web fonts (*.ttf and svg fonts)
    http://img.picbite.com/2009/02/06/50522lmlfr.png
    http://dev.opera.com/articles/view/presto-2-2-and-opera-10-a-first-look/#webfontssvg
    http://devfiles.myopera.com/articles/593/webfonts_in_svg.svg

    also if you do not want external files you can embed svg in css with base64
    background-image:url(base64,...[svg or svgz (gziped) file encoded with base64])

22. fearphage (February 6, 2009 at 12:46 pm)

    Opera supports text-shadow but not box-shadow. It also supports @font-face. (Opera 10 alpha)

    Also, you left out a major “new” technology: SVG
    SVG can have embedded video and you can apply fliters to the video in real-time. (requires labs build)

23. Eric Ferraiuolo (February 6, 2009 at 12:47 pm)

    Thanks John for the overview of what’s to come!

24. Greg gurevich (February 6, 2009 at 1:27 pm)

    Great Post.

    Greg Gurevich

25. Foo (February 6, 2009 at 4:12 pm)

    @fearphage
    You mean like this?
    http://www.bluishcoder.co.nz/2008/07/video-bling.html

    I’m personally more exited about this
    http://weblogs.mozillazine.org/roc/archives/2008/07/svg_paint_serve.html
    and this
    http://weblogs.mozillazine.org/roc/archives/2008/07/the_latest_feat.html

26. Tao Starbow (February 6, 2009 at 6:19 pm)

    On the “Native JSON” slide you list JSON.encode and .decode as drop-in usable today. Does that just mean usable in FF3.1 and IE8 today, or do you mean the library at json.org will use the native methods if they exist, or something else?

27. Lea Verou (February 6, 2009 at 6:53 pm)

    @Mike T and Gleb Arestov: That was really stupid of me, oops! I guess I shouldn’t trust css3.info’s previews too much :P
    Glad to hear it already supports them. :)

28. Richard Metzler (February 6, 2009 at 8:46 pm)

    you should embed the video or post a textlink. I didn’t recognize it is actually a pic with a link to the youtube video.

    just saw the slides and was wondering where the video is.

29. Nail (February 7, 2009 at 5:03 am)

    Any chance we see larger browser cache by default in future?

    Current Firefox has 50MB disk cache by default. Assuming user consumes 20MB traffic per day, site’s stored content will be forced out if the user will return on 3rd day (typical case imho).

    This is pretty important since we all know the difference between empty cache / primed cache page views.

    Today we have really large HDDs though there are almost no changes in default browser caches. I think it should be not 50MB but more like 150MB or even 500MB.
    There also could be auto-configuration based on current free disk space or “performance profiles” where user can switch to “desktop profile”, “netbook profile” etc.

30. Ido Green (February 8, 2009 at 7:55 pm)

    This and the talk you have in yahoo!
    Are by far the best talks I’ve seen in the past month.
    Was wondering what you think on the
    Single most important aspect people
    Should focus on when they build the next
    Wave of web app.
    Thanks.

31. teylor (February 9, 2009 at 10:26 am)

    I like the idea of animation with CSS, that’s mean more CSS and less javascript for a simple animation. Native Drag and Drop is going to be a amazing feature for developers!!!

    But i think what we are going to lack in security using SQL in HTML. In my opinion that is a bad idea.

32. Arnaud Bailly (February 11, 2009 at 1:00 am)

    Great talk, as usual I should say ;-)

    Looks somewhat like sci-fi when you are still struggling to make your app well behave on IE6/XP. Java5 was released in 2004 and there are still lot of companies developping with JDK1.4. I do not see any reason why corporate shall move swiftly and quickly to ‘modern’ browsers in the foreseeable future.

    In the real world, it takes looooooooong time for infrastructure to get up to the standards of what is cool on the web. But anyway, that’s enlightening and gives us hope.

33. Dmitrii 'Mamut' Dimandt (February 12, 2009 at 2:09 pm)

    @Mark Bekkers

    For full-blown offline applications – perhaps. Not for a fully/occasionaly connected application (and a web-application is an example of that). John Reisig has already spoken about DOM storage, “a way to store meaningful amounts of client-side data in a persistent and secure manner”.

    I see no point in SQL on the client-side.

    Besides, if we are going to get SQL, why not get native widgets like trees, tabs, grids, lists, splitters that are nowhere to be found in any of the “coming-in-the-forseeable future” specs?

34. F1LT3R (February 13, 2009 at 4:02 am)

    By the time rounded corners arrive we wont be using them any more.

35. Ehsun "ese" Amanolahi (February 13, 2009 at 8:47 am)

    You make life easier! Keep it up.

36. Kent (May 11, 2009 at 2:25 pm)

    I think some of the best stuff are the “simple” items – rc’s, shadows, fonts, etc. It’s such a pain to code such simple stuff, then add in extra load-time because there’s no native way to do any of it.

    But I have to agree with some other commenters – we’ll be stuck with the sub-par browsers for awhile.

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.