Combine CSS with JS and make it into a single down

为了进一步减少HTTP请求数量，提高web应用性能，可以把分别压缩合并后的JS和CSS再次合并到一个文件中：http://blogs.msdn.com/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx。想法不错。我猜想利用IE css中的expression把js直接嵌入到css中，也可以实现这个效果。

引用

Now, if you have by any chance worked on page load optimizations, you would know how costly each resource download is.  The more the number of external resources that you refer to, the more the time it takes for the page load to complete.

Typically, web pages refer to many external CSS and JS files and hence incur many resource downloads.  The advice from the PLT (page load time) gurus is to combine all the CSS files into one and all the JS files into one so as to reduce the number of resource downloads to just two.  This, without any doubt, would help boost your PLT.

If you feel that two downloads still isn't the best, I concur.  In this post, we'll look at a technique to combine CSS with JS and get the resource download count to one!  I discovered this technique while desperately trying to improve the page load time for the pages in Microsoft Office Live.  Read on...

The technique relies on how CSS and JS parser behaves in IE and Firefox.

When the CSS parser encounters a HTML comment token (<!--) in CSS content, the token gets ignored.
When the JS parser encounters a HTML comment token (<!--) in JS content, the token is treated similar to the line comment (//) and hence the rest of the line following the HTML comment token gets ignored
Look at the below JS+CSS code snippet...

<!-- /*
function t(){}
<!-- */
<!-- body { background-color: Aqua; }

When the CSS parser parses the above content, the HTML comment tokens would be dropped and the snippet would become equivalent to the one below...

/*
function t(){}
*/
body { background-color: Aqua; }

As you can see above, the CSS parser will get to see only the CSS code and the script code would appear to be within the comments (/* ... */).



In similar lines, when the JS parser parses the content, the HTML comment tokens would be treated as line comments (//) and hence the code snippet would become equivalent to the one below...

// /*
function t(){}
// */
// body { background-color: Aqua; }

As you can see above, the JS parser will get to see only the script code and the rest of the contents would look like comments.

You can refer to the above content in both the SCRIPT and LINK tags in your HTML page.  For e.g.,

<link type="text/css" rel="stylesheet" href="test.jscss" />
<script type="text/javascript" language="javascript" src="test.jscss"></script>

Note above that both the tags refer to the same source and hence it would be downloaded once and used as appropriate (as CSS and SCRIPT).

To round it off, there is just one more thing that you need to take care of - the response content type - it needs to be set to */* in order to affirm to Firefox that the contents can be treated as anything as appropriate.

I've attached a sample project (created with VS 2005 SP1) that demonstrates this technique.  Enjoy!

Update: (put in place due to popular misconception) In the actual implementation you will have the JS and CSS files separately on disk.  At runtime, you'll have to combine them by adding the HTML comments appropriately and serve with the correct content type and cache headers.  You should also remember the dynamically built content so that you don't need to rebuild them for each request.  Please check out the attached sample app.  This will ensure that you don't compromise on the readability, maintainability etc. while at the same time taking advantage of the reduced number of network calls.


Note(s):

If the JS contains any multi line comments it should be removed before combining with the CSS using this technique.
This technique has been tested positive on IE6, IE7 and Firefox 2.0.  It may work on other browsers off the shelf or may need minor tweaks.