Clientside HTML Minification

Question

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.

The problem you have here is with your CSS, not your HTML. You should be looking to correct the styles so that spaces don't create actual space between the elements. — Seer, Apr 13 '16 at 18:06
When you say "blank spaces" do you mean the indentation of those child elements? — The Muffin Man, Apr 13 '16 at 18:06
Yes @TheMuffinMan the indentation. The indentation is creating gaps between my divs. If I put a coment between the closing tag and the other opening tag the gaps disappear — gabriel.santos, Apr 13 '16 at 18:10
Are you saying that you get different rendering results for the user when you use input vs output? Because if so that doesn't make sense. — The Muffin Man, Apr 13 '16 at 18:14
@TheMuffinMan please see this post http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements — gabriel.santos, Apr 13 '16 at 18:15
@gabriel.santos Wow, that's very interesting. I was under the impression that shouldn't happen. — The Muffin Man, Apr 13 '16 at 18:27

score 1 · Accepted Answer · answered Apr 13 '16 at 20:09

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. :)

score 0 · Answer 2 · answered Apr 13 '16 at 18:01

0

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.

answered Apr 13 '16 at 18:01

djechlin

59,258
35
162
290

1

I've updated my question. I know its useless doing the minification after downloading all the content. Thig point here is to kill the blank spaces between the
elements. These spaces are annoying me 'cause they are moving my elements desired position.
– gabriel.santos Apr 13 '16 at 18:02
1

@gabriel.santos then you're not talking about minification, you're talking about modifying the DOM. those are basically opposites. – djechlin Apr 13 '16 at 18:02
Okay... but still. Is there a way to kill those white spaces and prevent my elements from moving? – gabriel.santos Apr 13 '16 at 18:03
1

@gabriel.santos I don't know, I posted this answer to answer the question you were asking, not the one you were thinking of. – djechlin Apr 13 '16 at 18:04
See my question again. I've updated with more details – gabriel.santos Apr 13 '16 at 18:26

score 0 · Answer 3 · 2016-04-13T18:56:42.820

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

I see! well that makes it very simple - thanks! - I'll update my answer — , Apr 13 '16 at 18:23
@gabriel.santos :: The answer is updated, have a look, test some of the claims and see if it works for you ;) — , Apr 13 '16 at 18:52

score 0 · Answer 4 · answered Apr 13 '16 at 18:05

0

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

answered Apr 13 '16 at 18:05

Stuart

6,630
2
24
40

See my question again. I've updated with more details – gabriel.santos Apr 13 '16 at 18:17

score 0 · Answer 5 · edited May 23 '17 at 12:07

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.)

score 0 · Answer 6 · answered Nov 20 '19 at 22:46

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/

Clientside HTML Minification

6 Answers6

Update:

Proper CSS & HTML

Linked