![]() Var message = "Hello world!" function doSomething() )() The tricky part of eval() is that it has access to all of the variables and functions that exist around it. The eval() statement’s job is to take a string and interpret it as JavaScript code. To understand why, we need to understand the intricacies of how each works. Though there are other considerations, both of these features force YUI Compressor to stop replacing variables. The eval() function and the with statement are the two most egregious examples of evil JavaScript. JavaScript’s evil features #section4Īnyone who has followed Douglas Crockford’s writing or lectures knows about the “evil” parts of JavaScript: The parts that are confusing and/or that prevent us from writing clean code that performs well. By modifying or avoiding these coding patterns, you can improve the YUI Compressor’s performance. In my investigation, I discovered coding patterns that prevented YUI Compressor from performing variable name replacement. I presented my results, Extreme JavaScript Compression with YUI Compressor, internally at Yahoo!. Bothered by what I considered a lot of wasted bytes, I explored coding patterns to boost the YUI Compressor’s minification powers. Boosting minification #section3Ī couple of years ago, as I started debugging large amounts of production code, I realized that the YUI Compressor didn’t apply variable replacement to a fairly significant portion of my code. This results in even greater savings than using either method alone. These days, it’s common to use a minification tool plus HTTP compression to further reduce JavaScript file size. On average, the YUI Compressor can compress files up to 18% more than JSMin. The overall function continues to work as it did originally since the variable names are irrelevant to the functionality. Since YUI Compressor actually parses the entire JavaScript input, it can safely replace local variable names without introducing code errors. Note that the two local variables, num1 and num2, were replaced by A and B, respectively. For example, suppose you have the following function: The biggest byte savings, though, come from replacing local variable names with one- or two-character names. In addition to removing comments, spaces, and tabs, the YUI Compressor also safely removes line breaks, further decreasing the overall file size. ![]() The YUI Compressor’s goal was to shrink JavaScript files even further than JSMin by applying smart optimizations to the source code. Three years later, Yahoo! engineer Julien Lecomte introduced the YUI Compressor. His rationale was sound: decreasing the size of JavaScript code results in faster downloads and a better user experience. His simple tool removed spaces, tabs, and comments from JavaScript files, effectively decreasing the size compared to the original source file. The history of JavaScript byte savings #section2ĭouglas Crockford introduced JSMin in 2004 as a way to shrink JavaScript files before placing them into a production environment. The second approach? Make your code as small as possible. Performance research asks: How can these external resources be downloaded and applied most efficiently? The first approach is to limit the number of external requests since the overhead of each HTTP request is high. Brief books for people who make websites.Īlthough both CSS and JavaScript may be included within an HTML page, best practices encourage storing CSS and JavaScript in external files that can be downloaded and cached separately.
0 Comments
Leave a Reply. |