![]() ![]() Because of this, the following 2 snippets should render identically: HTML 4.01 is actually specified to do just that, so there’s no harm in doing it upfront. Second option is to never fully remove white space characters, and instead always collapse them to one white space character. However, depending on a context, giving few elements a class for styling purposes, and then stripping white space from the entire document, can result in a smaller output. After all, adding class seems to defeat the purpose, resulting in larger output, when compared to a version with just one white space character. At first, this might seem like an overkill. In previous example, this could have been: foobar (where foo class would be declared with, say, margin-right: 0.25em ). There are two ways to work around this issue.įirst one is not to rely on such white space for document representation, and instead style elements to have margins and paddings as needed. changing markup to foobar), representation changes from “foo bar” to “foobar”. As soon as we remove that white space (i.e. U+0020), and as long as two adjacent elements are inline-level-as they are in this example-it is this white space that contributes to a gap in between “foo” and “bar”. This text node’s value is a white space (e.g. White space in markup is represented as text node in document tree. Now, it’s worth mentioning that this modification can have side effects, and significantly change document representation.įor example, markup like foo bar is usually displayed as “foo bar” in browsers, with one space character in between two words. It takes input string and configuration object passes this input string to parser, and builds final output according to specified options.įor example, we can tell it to remove comments: Minifier is a very small “wrapper” on top of parser. SCRIPT and STYLE) were getting stripped for no apparent reason. CDATA sections and comments inside elements with CDATA content model (e.g. There were also some defficiencies in regular expressions for matching comments and CDATA sections: newlines inside them were not accounted for, so multiline comments simply weren’t matched. Whenever attribute name contained characters like “-” (e.g. For example, doctype declarations were not understood at all. John’s parser was capable of handling quite complex documents, but would sometimes trip on some of the more obscure structures. If you are not interested in inner workings, feel free to skip to tests or conclusions.Īt its core, minifier relies on HTML parser by John Resig. Please note that the script is still in very early stage, and shouldn’t be used in production. I’ll quickly go over some of the initial features, explain how minifier works, and look into possible side effects of minification. Today, I’d like to share this tool with you. Ultimately, I wanted to minify some of the popular websites and see if savings are worth all the trouble. The goal was to see how easy it is to implement something like this, learn HTML a bit more, and have fun in a process. After some tweaking, the script was able to parse and minify markup of almost any random website. Only when other aspects are taken into consideration, it is worth minifying document markup.įew weeks ago, I decided to experiment with Javascript-based HTML minifier and created an online-based tool, with lint-like capabilities. When it comes to client-side performance, there are certainly other more important things to pay attention to. It’s no suprise that HTML minification is almost always a low-priority optimization. In some cases, though, savings in document size (and so bandwidth) can be more important than time spent on minification. Only when this overhead is less then difference in time for delivering minified-vs-original document, there’s a benefit in minification. As a result, HTML minification has to be done “on demand”, and carries certain overhead. Second, the nature of document markup is much more dynamic than that of scripts and styles. ![]() ![]() This is actually quite understandable.įirst of all, minifiying scripts and stylesheets usually results in better savings, overall. We have a large variety of JS and CSS minification tools, but almost no HTML ones. In Optimizing HTML, I mentioned that state of HTML minifiers is rather crude at the moment. Remove comments from scripts and styles. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |