PIE 2′s new loading mechanism

One of the guiding principles in the development of CSS3 PIE has always been to make it as simple to use as possible. That’s why it was designed as only a single standalone .htc file, without any external dependencies. Copy a single file and reference it — can’t get much simpler than that!

However, having a single monolithic file has posed some other problems. Especially with the introduction of IE9 compatibility which required entirely new renderers that use SVG instead of VML, PIE.htc grew to contain a lot of code that isn’t used by whichever browser is currently downloading it. IE9 has to download all the code for parsing and rendering border-radius and box-shadow using VML, for example, even though it has a native implementation. Similarly, IE6-8 have to download the IE9 SVG rendering code which they cannot use.

To make this even worse, IE has a strange bug that sometimes causes the .htc file to be fully or partially downloaded more than once, so the hit can be as much as doubled in some cases.

It was clear that the simplicity of a single file wasn’t worth this performance hit, so while I was designing the next generation of PIE one of my main goals was to implement a conditional loading system which didn’t sacrifice simplicity of use. I’m going to describe what’s been implemented so you know what to expect in the upcoming PIE 2.0 (first beta will be released soon!), and to solicit your feedback on it.

What’s different?

Firstly, PIE.htc is now very small. Like 2KB small. All it contains is enough logic to figure out what secondary JS file to load and where to load it from. So even if the double-htc-download bug happens, it’s only a tiny thing being downloaded twice.

The secondary JS files contain all the rest of the logic for parsing and rendering the CSS3 styles. There are currently two logic files: PIE_IE678.js and PIE_IE9.js, containing only the code needed by IE6-8 and IE9 respectively. The .htc file loads only the one appropriate for the current browser. (It’s possible that in the future these can become even more granular, for instance minimal builds that don’t include code for unused CSS3 properties.)

These secondary logic JS files will also double as the files for PIE JS Edition — just include them directly using conditional comments so only the appropriate one is loaded.

Can we get some numbers?

Let’s compare the difference in total download size. These are actual numbers from loading the css3pie.com homepage in IE:

Version Request Size
PIE 1.0: All IEs PIE.htc first request 8.27 KB
PIE.htc second request 40.35 KB
Total 48.62 KB
PIE 2.0: IE6-8 PIE.htc first request 2.00 KB
PIE.htc second request 0.17 KB
PIE_IE678.js 37.29 KB
Total 39.46 KB
PIE 2.0: IE9 PIE.htc first request 2.00 KB
PIE.htc second request 0.17 KB
PIE_IE9.js 25.80 KB
Total 27.97 KB

So we’re seeing about a 9 KB smaller total download in IE6-8, and 20 KB smaller in IE9. Of course that’s not the entire story — there’s the extra HTTP request for the JS file to take into account. So let’s take a look at the actual network timeline, on a simulated slow connection. Here’s PIE 1.0 in IE9, loading css3pie.com/blog:

PIE 1.0 Network Timeline

And here’s PIE 2.0 with the new loading system:

PIE 2.0 Network Timeline

As you can see, even with the extra HTTP request the total download time has still improved by more than a second. But what’s even more interesting is that while IE waits for the .htc file before firing document ready, it does not wait for the secondary .js file, so it fires a whole 6 seconds earlier! This means your other scripts that wait for document ready can start running much earlier, making your page feel snappier.

Customizing the loading path

When PIE.htc loads the secondary files, by default it loads them from the same server path as PIE.htc itself. This keeps things as simple as possible for users; as long as you keep the distribution files together in the same directory, you’re set.

However, for extra flexibility I’ve also added the ability for you to override that location if you wish, by specifying a new -pie-load-path property on the html element:

html {
    -pie-load-path: "http://any.server/path/to/pie-js-files/";
}

The path you specify can be anywhere on any server, as the JS files are not subject to same-domain limitations. You can even choose to load them from a CDN to take advantage of caching and geolocated delivery.

Help us test!

If you have any feedback on this new loading system, good or bad, I’d love to hear it. It’s very likely that unforeseen issues could pop up once it starts being used in the wild, so getting your help testing the new system is crucial! There will be an official 2.0 beta build released in the very near future; or if you can’t wait you can build PIE yourself from the master branch on GitHub and try it out right now. If you find any issues please post them in the forums.

10 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Kravimir

    Impressive! Thank you for continuing to improve this very useful script.

    Do you think Google or Microsoft would be willing to host the .js files, as they do for other popular libraries like jQuery?

    January 27, 2013 1:36 am

  2. Jason Johnston

    I doubt the Google or Microsoft CDNs would host it, but I do plan on submitting to at least cdnjs.com and jsdelivr.com and folks are free to submit to other CDNs as well.

    January 27, 2013 7:01 am

  3. luk

    Great, will try it out in a second =)!

    It would be nice to have the possibility to rename the pie .js files to something else than PIE678.js, just for the sake of flexibility =)…could be done with a -pie-files-base: ‘pie.ie’; which would result in the files named pie.ie678.js’ and ‘pie.ie9.js’

    does that make sense? =)

    February 20, 2013 3:33 pm

  4. Jason Johnston

    @luk: Is there some issue with the default naming convention? I’m not tied to any one specific convention, so if there’s an issue then it could be changed, but I don’t think making it configurable has any real benefit that would justify the increase in code size.

    February 20, 2013 3:41 pm

  5. JianQiang

    Great,That’s very useful,thank you!
    I want to know,can I use PIE like this?

    *{behavior: url(/pie/PIE.htc);}

    Then, I don’t need to write this in all elements.
    Is it work?

    April 24, 2013 3:29 am

  6. susamcsx

    hi,i have a question which i just need the border-radius property in IE.How can i make the pie.htc more smaller.Look forward to your reply.

    April 26, 2013 9:24 am

  7. Michael

    Hi there,
    cool app.
    remove the quotes in
    html {
    -pie-load-path: “http://any.server/path/to/pie-js-files/”;
    }

    Than it works!

    Michael

    July 26, 2013 10:41 am

  8. Anthony Brown

    Had no luck with the 2.0 install. tried both the .htc and loading through the direct JS method.

    Any suggestions? I’m really looking for opacity on gradients. 1.0 works fantistic for everything except that =(

    August 14, 2013 8:02 pm

  9. Gary Dempster

    I cannot get the PIE 2.0 version to work/load at all in IE8, only the old version 1 works for me.

    September 10, 2013 11:02 pm

Continuing the Discussion

  1. PIE 2.0 beta 1 released – CSS3 PIE: CSS3 decorations for IE

    [...] file optimized for the current IE version, resulting in a smaller total download size. See the blog post on the new loading system for details on how this works and its benefits. As a user this shouldn’t change how you use [...]

    January 28, 20134:12 pm

Some HTML is OK

or, reply to this post via trackback.