locked
JavaScript compression. RRS feed

  • Question

  •  

    Hi,

     

     I have compressed my external JavaSript files (Removed all unwanted empty lines, inline comments and other comments provided inside the script file). This has reduced the size of my script file. is there any other way to compress my javasript file further ?

     

    I have read some article on gzip. but i am not very clear on that. Is there a way to compress my .js files and to reduce the size of script file further?

     

    Also what are the advantage and disadvantage in using Compressed Javascript?

     

    Regards,

    Balaji Prabu.

    Wednesday, October 24, 2007 6:57 AM

Answers

  • Hi Balaji,

     

    As far as I know, if you would like to compress javascript files, there are at least three levels of compression as follows:

    1) No Line Feed Removal:

    Line feeds are not removed from the script (except those deemed extraneous, such as on blank lines). Only comments and extraneous whitespace are removed. This mode provides good compression, and insures that no code is broken.

     

    2) Line Feeds Removed Wherever Possible:

    In this mode, line feeds are removed from the ends of statements in which it is determined safe to do so, usually resulting in an extra 2% to 5% compression. For example, lines ending in an operator such as *, /, +, -, etc., and those ending in a semi-colon will have any trailing line feeds removed. There are several other conditions that can be met, resulting in removal, and those are described below in the code description sections. Steps are also taken to prevent removal in instances such as missing semi-colons so as not to break code.

     

    3) Function Parameter and Variable Name Compression:

    This can be combined with one of the first two compression options to further reduce the script size. When enabled, as many function parameters and variable names as possible will be renamed and shortened. The naming scheme starts with the names a through z, then _a through _z, _aa through _az, _ba through _bz, etc. With this option enabled, script size can usually be reduced by an additional 10% to 15%. There may be a higher potential for broken code with this option, so it is not enabled by default. If enabled, it is recommended that you thoroughly test all compressed scripts before deploying them.

     

    For your concern, I think you can try the third level of compression to reduce the size of your javascript further. Try to check out this article about "javascript compression" for details - http://www.codeproject.com/csharp/JSCompress.asp 

     

    You can compress javascript and use that file directly, just like the uncompressed version. So after gzip prototype.js you can use it in a web page with:

    <script type="text/javascript" src="prototype.js.gz"></script>

    Based on my understanding, the advantages of using a compressed javascript as follows:

    You can enjoy the reduced bandwidth and load on your web server after Compressing the file.

     

    the disadvantages of using a compressed javascript as follows:

    The browser will be in charge of unziping the compressed javascript before rendering.

     

    Hope this helps,

    Regards,

     

    This response contains links reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you.
    Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there.
    There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet
    .

    Thursday, October 25, 2007 5:10 AM
    Moderator
  • Hi Balaji,

     

    Thanks for your quick reply.

     

    As far as I know, most of the modern browsers such as IE 6 and FireFox can support client side GZip, that is to say to compress the web pages using GZip on the server side before transmitting them to the client side. Then the clent browser receive and unzip them to display. So I don't think you need to make any settings on IE to accept the GZip compression js files. IIS 6.0 has a in-build support to Gzip, unfortunately it is disabled by default. You can try to check out this article to configure GZip on IIS - http://www.urlscan.net/configuring-gzip-iis.html  

    Besides, try to check out this blog about "IIS Compression in IIS6.0" for reference - http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx

     

    There is an example about "Building a GZip JavaScript Resource Compression Module for ASP.NET" for your reference - http://www.west-wind.com/WebLog/posts/10294.aspx

     

    Hope this helps,

    regards,

     

    This response contains links reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you.
    Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there.
    There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

    Thursday, October 25, 2007 8:30 AM
    Moderator

All replies

  • Hi Balaji,

     

    As far as I know, if you would like to compress javascript files, there are at least three levels of compression as follows:

    1) No Line Feed Removal:

    Line feeds are not removed from the script (except those deemed extraneous, such as on blank lines). Only comments and extraneous whitespace are removed. This mode provides good compression, and insures that no code is broken.

     

    2) Line Feeds Removed Wherever Possible:

    In this mode, line feeds are removed from the ends of statements in which it is determined safe to do so, usually resulting in an extra 2% to 5% compression. For example, lines ending in an operator such as *, /, +, -, etc., and those ending in a semi-colon will have any trailing line feeds removed. There are several other conditions that can be met, resulting in removal, and those are described below in the code description sections. Steps are also taken to prevent removal in instances such as missing semi-colons so as not to break code.

     

    3) Function Parameter and Variable Name Compression:

    This can be combined with one of the first two compression options to further reduce the script size. When enabled, as many function parameters and variable names as possible will be renamed and shortened. The naming scheme starts with the names a through z, then _a through _z, _aa through _az, _ba through _bz, etc. With this option enabled, script size can usually be reduced by an additional 10% to 15%. There may be a higher potential for broken code with this option, so it is not enabled by default. If enabled, it is recommended that you thoroughly test all compressed scripts before deploying them.

     

    For your concern, I think you can try the third level of compression to reduce the size of your javascript further. Try to check out this article about "javascript compression" for details - http://www.codeproject.com/csharp/JSCompress.asp 

     

    You can compress javascript and use that file directly, just like the uncompressed version. So after gzip prototype.js you can use it in a web page with:

    <script type="text/javascript" src="prototype.js.gz"></script>

    Based on my understanding, the advantages of using a compressed javascript as follows:

    You can enjoy the reduced bandwidth and load on your web server after Compressing the file.

     

    the disadvantages of using a compressed javascript as follows:

    The browser will be in charge of unziping the compressed javascript before rendering.

     

    Hope this helps,

    Regards,

     

    This response contains links reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you.
    Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there.
    There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet
    .

    Thursday, October 25, 2007 5:10 AM
    Moderator
  •  

    Hi,

     

     Thanks for your replay, I have already done the first level of compression.

     

     I want to know more on gzip compression. Do i need to do any setting in IE to accept gz compressed js file? Can u please provide me more help on this?

     

    Thanks,

    Balaji Prabu

    Thursday, October 25, 2007 7:07 AM
  • Hi Balaji,

     

    Thanks for your quick reply.

     

    As far as I know, most of the modern browsers such as IE 6 and FireFox can support client side GZip, that is to say to compress the web pages using GZip on the server side before transmitting them to the client side. Then the clent browser receive and unzip them to display. So I don't think you need to make any settings on IE to accept the GZip compression js files. IIS 6.0 has a in-build support to Gzip, unfortunately it is disabled by default. You can try to check out this article to configure GZip on IIS - http://www.urlscan.net/configuring-gzip-iis.html  

    Besides, try to check out this blog about "IIS Compression in IIS6.0" for reference - http://weblogs.asp.net/owscott/archive/2004/01/12/57916.aspx

     

    There is an example about "Building a GZip JavaScript Resource Compression Module for ASP.NET" for your reference - http://www.west-wind.com/WebLog/posts/10294.aspx

     

    Hope this helps,

    regards,

     

    This response contains links reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you.
    Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there.
    There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

    Thursday, October 25, 2007 8:30 AM
    Moderator
  • Hi,

    I am trying to reduce the js files size in our web site but can't get the gzip js file working... I have minified the scripts, and gzip them. Then change the js reference in the aspx page to the gz file instead, for example:
    <script language="javascript" type="text/javascript" src="JavaScript/MyCoreScript.js"></script>
     is changed to:
    <script language="javascript" type="text/javascript" src="JavaScript/
    MyCoreScript.js.gz"></script>

    However, the script just stop working. We get a "Invalid character" error, when use visual studio go into debug mode, the file opened is in a strange character code which is unrecognizable.

    Many articles said most of the late version browsers can auto detect and de-compress the gz file in client site, we are using IE 6 and IE 7. I wonder what I have done wrong here... Any suggestions are welcome.

    Thanks

    Monday, February 11, 2008 4:13 PM