6 ms·
Using event capturing to improve Basecamp page load times
- krmmalik 15y agoThat was a very well written and engaging article. most programming articles concentrate on the programming logic only, but i liked this article because it included the business case and explained the reasoning. Although i didnt quite understand what's going on with the code itself, i still found it an interesting read.
- sstephenson 15y agoThanks, I really appreciate it!
- JBiserkov 15y agoThe last paragraph that should be on top: "If you’re looking to speed up page load times in your own projects, start by profiling. Then identify the hotspots and defer them until the furthest point of intent — where you know the user is about to perform the action you need to set up."
- newman314 15y agoIt's too bad that the article did not measure how long it takes for the action to fire when the user does perform the action after refactoring. I would think that it's a bad user experience to experience a big pause right when they want to do something. Sure the page loads faster but a noticeable pause after a click would be tremendously annoying and contribute to the "laggy" feel.
- sstephenson 15y agoAt that point it's much more about feel than a hard time measurement. After implementing deferred initialization I asked myself "does reordering feel laggy?" and the answer was no. If it had felt laggy then I'd have started profiling again.
- joshuacc 15y agoExcellent article. Do you mind going into what tools/techniques you used to do the profiling?
- sstephenson 15y agoSure thing. For high-level measurements I use good old "new Date().getTime()". One call before, one call after, subtract the former from the latter and log it to the console. When I want to dig deeper, I go to the WebKit Inspector's Profile tab. You can turn it on or off through the UI, or use console.profile()/console.profileEnd() in your code to control it programmatically.
- masklinn 15y ago>For high-level measurements I use good old "new Date().getTime()". One call before, one call after, subtract the former from the latter and log it to the console. Why not use `console.time` and `console.timeEnd` for that? They probably have the same resolution as the underlying date object and they're significantly less of a hassle.
- sstephenson 15y agoBecause I didn't know about it :) Great tip!
- smickie 15y agoWhat tools do you use to profile js on a webpage?
- timothya 15y agoProfiling is built into the developer tools in Google Chrome.
- illumen 15y ago"New basecamp requires IE9 or higher." They just lost a sale with that. Finally made the decision to use redmine(http://www.redmine.org/ http://www.redmine.org/) instead.
- cmer 15y agoSo you're publicly admitting to be using IE8 or less?
- derefr 15y agoTo be charitable, I'm guessing illumen is under the (vastly mistaken) belief that the quoted text means that only IE is supported (and then, of IE, only IE9+.)
- illumen 15y agoI'm saying clients who would use the tool use IE8 and IE7. Basecamp is a project management, and collaboration tool - so unfortunately those clients have to be supported (unless you can fire the clients or upgrade them to a newer browser :)
- dspillett 15y agoIf they are saying IE9+ only then that is a rather daft decision both technically and commercially. If they are meaning "something not from the stone age" (i.e. you need FF3.5+, Chrome or Opera of similar lineage, or IE9+) then I can understand not supporting IE8 or less. Increasingly people are deciding that it simply isn't cost effective to continue to support IE8 and its elder kin, the few lost sales that result being worth less than the cost in time and other resources committed to testing those environments (i.e. people are taking the opinion that someone using IE8 is a cost not a customer). It is a decision that should not be taken lightly of course. I wish I could refuse to support IE6 and IE8 but our clients are large banks who really are stuck in the stone age in that regard. I assume that they fully considered the pros and cons of telling IE6/7/8 users to get stuffed before taking that path. If you are stuck on IE8 or less then you have no choice but to vote with your wallet. If enough people do the same then they were wrong in their assessment and will have to reconsider. Given the target market, as I understand it, though: I don't think they are likely to be wrong.
- MatthewPhillips 15y ago> document.addEventListener Have a feeling you're going to regret that.
- pilif 15y agoInstead of using capturing you could also just trigger another mousedown event which will be seen by the sortable plugin. This has the advantage of working even in old IEs. Be mindful though that by deferring the setup of the sortable list until the mouse action, you will introduce UI lag to the user. Sure: The page might load a bit faster, but now users clicking on the sortable elements will have to wait longer for their click to register. As an aside, it's ironic that as usual, the browsers which would profit the most from these kinds of speed optimizations don't support them to begin with. It's also always the slowest browsers that require the polyfills with the worst performance characteristics.
- lovskogen 15y agoWhy don't you just load it after the page has loaded and is displayed to the user. Then they can scan the page and read while you're loading the sortable and other functions.
- firefoxman1 15y agoThat was a really great explanation on how capturing works. I've just always used bubbling. But wouldn't it be easier to just setTimeout for maybe 1.5 seconds? Or perhaps split your page load into two parts: Essential core stuff, then once that's done it signals to start the second, less critical part, which would include things like .sortable()?