{"id":80,"date":"2011-06-27T09:50:47","date_gmt":"2011-06-27T14:50:47","guid":{"rendered":"http:\/\/blog.mozilla.org\/ted\/?p=80"},"modified":"2011-06-27T09:50:47","modified_gmt":"2011-06-27T14:50:47","slug":"measuring-ui-responsiveness","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ted\/2011\/06\/27\/measuring-ui-responsiveness\/","title":{"rendered":"Measuring UI Responsiveness"},"content":{"rendered":"

One of the goals for the Firefox team is to ensure that the user interface remains responsive<\/a> to input at all times. Clearly a responsive interface is incredibly important to making the browser a useful application, but how do we measure “responsiveness”?<\/p>\n

Dietrich<\/a> has done some work on this, writing an add-on<\/a> that measures the time that various UI actions take. This covers the direct case, where a user initiates an action and expects a response in a reasonable amount of time. Clearly we want to make sure that individual actions don’t take an extraordinary amount of time.<\/p>\n

I took the opposite tack, with an eye on being able to detect when the application was not responsive to user input regardless of what actions the user was taking. Building on some work by Chris Jones<\/a> and Alon Zakai<\/a>, I wrote some code<\/a> that instruments the main thread event loop to find out how long it takes to respond to events, which ought to be a reasonable proxy for measuring responsiveness. When the instrumentation detects that the event loop takes too long to respond (more than 50 milliseconds, currently) it writes a data point to a log giving the current timestamp and the amount of time the event loop was not responsive.<\/p>\n

When I implemented this I had my eye on Talos integration<\/a>, where we could run the browser through some automated UI tests with this instrumentation enabled, and then correlate “UI actions” with “unresponsive periods” and ensure that the browser did not become unresponsive during those actions. Talos integration has been shifted off as a longer-term goal, with the more immediate goal being “find UI actions that are the worst offenders of unresponsiveness”. To that end we’ve filed some other bugs about correlating this unresponsiveness data with JavaScript execution<\/a>, and correlating the data with C++ execution<\/a>. If you’ve got any ideas please feel free to contribute to those bugs!<\/p>\n

If you’d like to try out the responsiveness instrumentation I implemented, it landed on mozilla-central a while ago, and there’s some reasonably complete documentation in the source code<\/a>. There are implementations for Windows, Linux\/GTK2 and OS X currently. (And a patch for an Android implementation in a bug<\/a>.)<\/p>\n","protected":false},"excerpt":{"rendered":"

One of the goals for the Firefox team is to ensure that the user interface remains responsive to input at all times. Clearly a responsive interface is incredibly important to making the browser a useful application, but how do we measure “responsiveness”? Dietrich has done some work on this, writing an add-on that measures the […]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[228,4562,2022,2021],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/posts\/80"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ted\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}