Monthly Archives: October 2013

Tracking GIF Repaints with UI Responsiveness

I recently came across Paul Lewis’ article Avoiding Unnecessary Paints: Animated GIF Edition on HTML5 Rocks and wanted to contribute a bit to the message. If you aren’t a regular reader or HTML5 Rocks I would definitely encourage you to visit often.

The summary of Lewis’ post is that animated GIFs can cause repaints even when obscured by other elements. So even though you may not see the GIF, the browser may continue to repaint every frame of it.

As far as browsers go, Lewis shared with us the “Show paint rectangles” feature in Chrome. When enabled, this feature will visually outline regions that are being repainted. This obviously makes it very easy to determine whether paints are happening on obscured elements. Chrome, Safari, and Opera all repaint. Firefox does not.

In his discussion of various browsers, Lewis calls Internet Explorer 11 a “black box,” suggesting it gives “no indication whether repaints are happening or not.” As a result, no statement was made speculating whether Internet Explorer was in the camp of Chrome, Safari, and Opera, or Firefox.

I quickly did a scan of the comments to see if anybody addressed these words regarding Internet Explorer, but at the time nobody had. I saw this as a great opportunity to introduce my friends to the new UI Responsiveness tool in Internet Explorer 11.

The UI Responsiveness tool in Internet Explorer’s Developer Tools will actually give us pretty granular information about frame-rates, script timing, styling changes, rendering, and even repaints. Given the novelty of this feature in Internet Explorer, I felt it would be good to provide a quick example of how Internet Explorer 11 can indeed tell you whether obscured GIFs cause repaints or not.

A Single Visible GIF

My first experiment consisted of nothing more than a single GIF in the body of my document. By profiling the page for a few seconds I could see that there was constant repainting. This was expected of course, after all there’s a GIF on my screen spinning.

Below is one second of activity. As you can see, constant repainting.

gif.1

Toggling Visibility of a Single GIF

Next up, toggle the visibility of the GIF by way of its display property. I setup a interval to flip the visibility every second. The results were also as expected. For roughly one second, we had constant repainting. Following this we saw a set style event, followed by a single repaint (to hide the element). At this point, it was silence for a second before the element became visible again, and thus began causing additional repaints.

gif.2

Routinely Obscuring a Single GIF

The last experiment was to add another element, a div with a solid background-color in this case, and obscure the animated GIF on an interval. This was done by positioning both the div and the image absolutely within the body, and giving the div a higher z-index.

As can be seen in the image below, repainting did not cease even when the layout was adjusted every second. This demonstrates that when obscured, animated GIFs will continue to cause repaints in Internet Explorer 11. Whether this will be the case for future versions of Internet Explorer remains to be seen.

gif.3

Conclusion

So as we can see in these examples above, Internet Explorer 11 is capable of sharing vital information about costly repaints. Additionally, IE falls into the Chrome, Safari, and Opera camp. It sure would be nice if all browsers followed Firefox’s lead here and stopped repaints on obscured GIFs, but perhaps there is a good reason they haven’t, who knows.

I hope you can see the enormous value the UI Responsiveness panel in Internet Explorer 11’s Developer Tools brings to the debugging experience and use it to make your projects more responsive and performant in the future. The team behind Internet Explorer really have been doing amazing work lately, and the UI Responsiveness functionality is but one example of this.

UPDATE: More on GIFs and Painting in Internet Explorer

Hacking Windows 8 Snapped Mode

I recently updated four machines of mine to Windows 8.1. Love it, not a thing I would change (talking high-level here). But one of my favorite features continues to give me a slight headache.

In Windows 8 you have the ability to “snap” a web-browser to either side of your screen. This is great if you’re trying to keep documentation up, an in-browser chat visible, or even some productivity tools that are browser-based.

Sadly, many of the sites I snap wind up getting reduced so badly that I can no longer make out what is on them – kinda like how browsing the web is when you’re on a small mobile device, and the site you’re viewing isn’t “responsive” in a cross-browser compat way.

As an example, here I am trying to use wunderlist (awesome service) on my Acer Aspire R7.

Wunderlist in Snapped Mode.

Wunderlist in Snapped Mode.

Ideally I would just contact Wunderlist and have them fix their site for IE in Snapped Mode, but that isn’t always easy. Fortunately, there happens to exist a feature in IE that we can leverage – custom accessibility stylesheets.

In order to find this setting, click the Gear icon (or press alt to reveal your toolbar, and then click “Tools”) > Internet Options > General [tab] > Accessibility [button]. Alternatively, you can press the Gear icon

Internet Explorer on Windows 8 uses the same settings whether you’re in the Desktop mode or the Immersive (“Metro”) mode. As such, all we need to do is create our own custom stylesheet that will be applied to every website we visit. With this, we can set the new viewport size on our own.

Setting custom stylesheet in Internet Explorer.

Setting custom stylesheet in Internet Explorer.

I should note here that after setting (or updating) your stylesheet, you will need to close and re-open Internet Explorer (That’s a feature I’d like to see changed). This was really bugging me since I would make changes, and refresh, only to see no changes at all.

In the screenshot above you can see that I tossed in a basic media query to set the viewport to 320px wide anytime the browser itself was 400px or less in size. The result is immediately seen when you re-open Internet Explorer and pull up Wunderlist.

Wunderlist, with our custom stylesheet in place.

Wunderlist, with our custom stylesheet in place.

The end result is a far better user experience, and something I can now use in parallel to my daily work. I hope this works for you, and you find the Snapped Mode as enjoyable as I do.

You may have to add a bit more to your stylesheet to target certain websites, etc. This basic example was meant to address one site only. A real-world application would be ever-changing to accommodate sites and services you come across in your daily routine.

Hack on, hackers.