Clientside HTML Minification

问题

Is there a way to this kind of minification with javascript and update the DOM (clientSide)

Input:

<div class="parentDiv">
    <div class="childDiv">Some text</div>
    <div class="childDiv">Some text</div>
</div>

Output:

<div class="parentDiv"><div class="childDiv">Some text</div><div class="childDiv">Some text</div></div>

I know its useless doing the minification after downloading all the content. The point here is to stop the identation to create gaps between my divs. I know that if I put a comment between the tags the gap won't appear but it gets difficult to understand the code with so many comments between my div tags.

See this [post] and you'll understand what I mean.

回答1:

If it's a minification the DOM won't update. Also there's nothing client-side minification accomplishes: it's not faster to download and it's not obfuscated from the client.

For what you wrote, you can replace '\n' with '' I guess.

回答2:

Try this javascript minification script -- http://prettydiff.com/lib/jspretty.js

回答3:

You need to be careful when parsing documents, especially with special characters in attributes. You can write your own DOM parser, but, why re-invent the wheel?

Here is a great parser, written in JavaScript: https://www.npmjs.com/package/html-minifier

Instructions are documented.

The above method is to "minify" production code; however, if it's a visual spacing issue, then see below:

Update:

"White-space" is mostly ignored when it comes to block-elements.
To ensure that your inline-block elements are not separated by "white-space" you can arrange your (blocks)-code underneath each other, indicating that it is not a "space" that separates them; other than that, here's what really matters:

Proper CSS & HTML

make sure all your HTML tags are "paired" correctly -that each open-tag has a close-tag. This does not count for "void-tags" like <img /> or <input /> as these are "self closing".
if you need blocks placed next to each other, use <div> tags styled with CSS to be display:inline-block. You can also make use of "table-cells" -which do NOT have to be <td> tags as you can achieve this also with CSS to be styled as: display:table-cell.
You can also have elements be wrapped and packed tightly together (as mentioned above) by specifying their style as: float:left (or "right").
It is good practice to place your styles in CSS style-sheets -not in-line as the latter makes your code unmanageable; however, some style-sheets are persistent (see below) and the only way to override such styles is by using inline style.
If you're coding in someone else's code-base and none of the above works, you can make some style-sheets of your own that overrides the others with the word: !important after each property. You can use this to override any property but in this case it would typically be margin or border-...
Lastly, make sure there are no no-braking-spaces between your elements if they are not needed; these look like this:

If you need more info on how to write the modern HTML5 markup and CSS3 style-sheet language, the "Mozilla Developer Network" is a great reference: https://developer.mozilla.org

回答4:

I managed to achieve what I wanted and even created a jQuery plugin to it.

jQuery.fn.clearWhiteSpace = function () {
    var htmlClone = this.html().replace(/\n[ ]*/g,"");
  this.html(htmlClone);

  return this;
}

$(".parentDiv").clearWhiteSpace();

there is an example I wrote in jsfiddle

But thanks for all your effort. :)

回答5:

So let's attempt to solve this issue: "The point here is to stop the indentation to create gaps between my divs." What I can deduce from that sentence + the [post] page + its linked answer page is that client-side HTML minification, isn't the correct solution for this problem.

Have you looked into using inline-block or CSS resets first, before attempting to minify the HTML code or munge it by adding blank comments between the HTML tags?

The linked answer page discusses using inline-block to eliminate the spacing, which is occurring between your HTML elements. Those two pages also discuss resetting the font styles to fix the spacing issues.

CSS Resets can be used to fix gaps between elements. There is a list of the most popular CSS Resets at http://cssreset.com If needed, it should be easy to extend them to override any font settings, thus normalizing how the fonts are treating the white-space characters.

So empty comments shouldn't need to be injected between HTML tags, to fix spacing issues with whitespace characters. If CSS is used to fix the styles, then the HTML will be readable. If the HTML is minified, it will be harder to read & debug. I'd suggest not minifying your HTML using JavaScript. Rather try fixing the spacing issues with CSS.

(As for how minification works under it's hood... see my answer at this SO question.)

回答6:

Minify HTML in the browser with vanilla JS.

const minify_html = (dom_node) => {
    dom_node.childNodes.forEach(node => {
        const isTextNode = node.nodeType === 3;
        const isEmpty = node.nodeValue.trim().length === 0;
        if (isTextNode && isEmpty){
            dom_node.removeChild(node); 
        }
    });
};

I created an example with 1,000 elements, and my computer can minify the html in less than 15ms, but it may be slower or faster depending on the device running the code.

https://jsfiddle.net/shwajyxr/

来源：https://stackoverflow.com/questions/36606082/clientside-html-minification

标签

javascript

html

whitespace

minify

removing-whitespace