{"id":503,"date":"2011-02-17T12:06:44","date_gmt":"2011-02-16T23:06:44","guid":{"rendered":"http:\/\/www.thunderguy.com\/semicolon\/?p=503"},"modified":"2011-02-17T12:07:29","modified_gmt":"2011-02-16T23:07:29","slug":"jquery-1-5-better-faster-bigger","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2011\/02\/17\/jquery-1-5-better-faster-bigger\/","title":{"rendered":"jQuery 1.5: Better, Faster&#8230; Bigger"},"content":{"rendered":"<p>Back when <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> was heading towards its 1.0 release, one of the things that really impressed me was its small size. Only about 15KB of uncompressed code was enough to turn JavaScript (and particularly DOM manipulation) from a chore into a pleasure. But with each new release, new features and speed optimisations have inevitably bloated the library. Every time a new release came out, it seemed to me that the svelte jQuery I knew and loved was receding further into the past. Now that jQuery 1.5 is out, I thought I would see how jQuery has grown in size as well as stature with each release.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-502\" title=\"Graph of jQuery download size over time\" src=\"http:\/\/www.thunderguy.com\/semicolon\/wp\/wp-content\/uploads\/2011\/02\/jquery-size.png\" alt=\"Graph of jQuery download size over time\" width=\"594\" height=\"390\" srcset=\"https:\/\/thunderguy.com\/semicolon\/wp\/wp-content\/uploads\/2011\/02\/jquery-size.png 594w, https:\/\/thunderguy.com\/semicolon\/wp\/wp-content\/uploads\/2011\/02\/jquery-size-300x196.png 300w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><br \/>\n<!--more--><\/p>\n<p>The graph just about says it all. It shows the size of a zipped jQuery download for each release (I omitted a few of the minor releases due to laziness). I have overlaid a linear trendline, which fits pretty well and shows that jQuery&#8217;s size has grown about 4.6KB every year. jQuery 1.5 is three times the download size of jQuery 1.0. The uncompressed JavaScript is closer to <em>five<\/em> times as big, as the table shows.<\/p>\n<p><!-- Styles in the body are invalid, but I'm not sure how better to do this. --><\/p>\n<style type=\"text\/css\">\n\/* width *\/\ntd, th {\n\ttext-align: right;\n\tmargin: 0;\n\tpadding: 0.1em;\n}\nth:first-child,\ntd:first-child {\n\tpadding-left: 0.5em;\n}\nth:last-child,\ntd:last-child {\n\tpadding-right: 0.5em;\n}\ntr:nth-child(odd) {\n\tbackground-color: #eee;\n}\ncolgroup.number {\n\twidth: 4em;\n}\nth.version {\n\tpadding-left: 1em;\n}\nth:nth-child(n+5),\ntd:nth-child(n+5) {\n\tcolor: gray;\n\tfont-size: 80%;\n}\ntr.major {\n\tfont-weight: bold;\n}\n<\/style>\n<table cellpadding=\"0\" cellspacing=\"0\">\n<colgroup span=\"2\" \/>\n<colgroup span=\"5\" class=\"number\" \/>\n<tr>\n<th>Date<\/th>\n<th class=\"version\">Version<\/th>\n<th>Zip<\/th>\n<th>Size<\/th>\n<th>Pack<\/th>\n<th>Minify<\/th>\n<th>Pack.Zip<\/th>\n<th>Min.Zip<\/th>\n<\/tr>\n<tr class=\"major\">\n<td>4\/02\/2006<\/td>\n<td>0.x<\/td>\n<td>6<\/td>\n<td>19<\/td>\n<td>13<\/td>\n<td><\/td>\n<td>6<\/td>\n<td><\/td>\n<\/tr>\n<tr class=\"major\">\n<td>26\/08\/2006<\/td>\n<td>1.0<\/td>\n<td>9<\/td>\n<td>45<\/td>\n<td>17<\/td>\n<td><\/td>\n<td>9<\/td>\n<td><\/td>\n<\/tr>\n<tr class=\"major\">\n<td>14\/01\/2007<\/td>\n<td>1.1<\/td>\n<td>11<\/td>\n<td>56<\/td>\n<td>21<\/td>\n<td><\/td>\n<td>11<\/td>\n<td><\/td>\n<\/tr>\n<tr class=\"major\">\n<td>10\/09\/2007<\/td>\n<td>1.2<\/td>\n<td>15<\/td>\n<td>78<\/td>\n<td>27<\/td>\n<td>45<\/td>\n<td>14<\/td>\n<td>15<\/td>\n<\/tr>\n<tr>\n<td>16\/09\/2007<\/td>\n<td>1.2.1<\/td>\n<td>15<\/td>\n<td>79<\/td>\n<td>27<\/td>\n<td>46<\/td>\n<td>14<\/td>\n<td>15<\/td>\n<\/tr>\n<tr>\n<td>14\/01\/2008<\/td>\n<td>1.2.2<\/td>\n<td>16<\/td>\n<td>94<\/td>\n<td>29<\/td>\n<td>52<\/td>\n<td>15<\/td>\n<td>16<\/td>\n<\/tr>\n<tr>\n<td>7\/02\/2008<\/td>\n<td>1.2.3<\/td>\n<td>16<\/td>\n<td>95<\/td>\n<td>30<\/td>\n<td>53<\/td>\n<td>15<\/td>\n<td>16<\/td>\n<\/tr>\n<tr>\n<td>19\/05\/2008<\/td>\n<td>1.2.4<\/td>\n<td>16<\/td>\n<td>96<\/td>\n<td>30<\/td>\n<td>54<\/td>\n<td>15<\/td>\n<td>16<\/td>\n<\/tr>\n<tr>\n<td>20\/05\/2008<\/td>\n<td>1.2.5<\/td>\n<td>17<\/td>\n<td>98<\/td>\n<td>31<\/td>\n<td>55<\/td>\n<td>16<\/td>\n<td>17<\/td>\n<\/tr>\n<tr>\n<td>24\/05\/2008<\/td>\n<td>1.2.6<\/td>\n<td>17<\/td>\n<td>98<\/td>\n<td>31<\/td>\n<td>55<\/td>\n<td>16<\/td>\n<td>17<\/td>\n<\/tr>\n<tr class=\"major\">\n<td>14\/01\/2009<\/td>\n<td>1.3<\/td>\n<td>19<\/td>\n<td>115<\/td>\n<td><\/td>\n<td>54<\/td>\n<td><\/td>\n<td>19<\/td>\n<\/tr>\n<tr>\n<td>21\/01\/2009<\/td>\n<td>1.3.1<\/td>\n<td>19<\/td>\n<td>115<\/td>\n<td><\/td>\n<td>54<\/td>\n<td><\/td>\n<td>19<\/td>\n<\/tr>\n<tr>\n<td>20\/02\/2009<\/td>\n<td>1.3.2<\/td>\n<td>20<\/td>\n<td>118<\/td>\n<td><\/td>\n<td>56<\/td>\n<td><\/td>\n<td>20<\/td>\n<\/tr>\n<tr class=\"major\">\n<td>14\/01\/2010<\/td>\n<td>1.4<\/td>\n<td>24<\/td>\n<td>155<\/td>\n<td><\/td>\n<td>69<\/td>\n<td><\/td>\n<td>24<\/td>\n<\/tr>\n<tr>\n<td>25\/01\/2010<\/td>\n<td>1.4.1<\/td>\n<td>24<\/td>\n<td>157<\/td>\n<td><\/td>\n<td>70<\/td>\n<td><\/td>\n<td>24<\/td>\n<\/tr>\n<tr>\n<td>19\/02\/2010<\/td>\n<td>1.4.2<\/td>\n<td>24<\/td>\n<td>161<\/td>\n<td><\/td>\n<td>71<\/td>\n<td><\/td>\n<td>24<\/td>\n<\/tr>\n<tr>\n<td>16\/10\/2010<\/td>\n<td>1.4.3<\/td>\n<td>27<\/td>\n<td>177<\/td>\n<td><\/td>\n<td>76<\/td>\n<td><\/td>\n<td>27<\/td>\n<\/tr>\n<tr>\n<td>11\/11\/2010<\/td>\n<td>1.4.4<\/td>\n<td>27<\/td>\n<td>179<\/td>\n<td><\/td>\n<td>77<\/td>\n<td><\/td>\n<td>27<\/td>\n<\/tr>\n<tr class=\"major\">\n<td>31\/01\/2011<\/td>\n<td>1.5<\/td>\n<td>29<\/td>\n<td>208<\/td>\n<td><\/td>\n<td>83<\/td>\n<td><\/td>\n<td>29<\/td>\n<\/tr>\n<\/table>\n<p>The numbers in the first row may be slightly speculative, since I had to reconstruct some of those files &#8212; I didn&#8217;t just have them lying around.<\/p>\n<p>In the old days, the jQuery website used to talk about the size of the library in uncompressed form or in packed form. At some point they changed this and started quoting the minified and gzipped size. This confused me at first &#8212; I thought that jQuery had actually gotten <em>smaller<\/em> &#8212; but then I realised it was just a bit of spin.<\/p>\n<p>The jQuery team used to use <a href=\"http:\/\/dean.edwards.name\/packer\/\">Packer<\/a> (or some variant of it) to squash the JavaScript before gzipping, but from version 1.2 they started using Minify too and from 1.3 they switched to Minify exclusively. jQuery 1.5 is minified using what looks like a custom script driven by <a href=\"http:\/\/nodejs.org\/\">Node.js<\/a>. It&#8217;s interesting to see that minify performs quite poorly compared to Packer, but the resulting file gzips much better. The end result is still pretty lean &#8212; 29KB for the best JavaScript library around &#8212; but it&#8217;s a long way from the 6KB download I first played with five years ago.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Back when jQuery was heading towards its 1.0 release, one of the things that really impressed me was its small size. Only about 15KB of uncompressed code was enough to turn JavaScript (and particularly DOM manipulation) from a chore into a pleasure. But with each new release, new features and speed optimisations have inevitably bloated [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[56,21,40],"class_list":["post-503","post","type-post","status-publish","format-standard","hentry","category-general","tag-gzip","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/comments?post=503"}],"version-history":[{"count":20,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/503\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/503\/revisions\/528"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}