客户端 HTML 缩小答案

【问题标题】：Clientside HTML Minification客户端 HTML 缩小
【发布时间】：2016-08-05 00:03:46
【问题描述】：

有没有办法用 javascript 进行这种缩小并更新 DOM（客户端）

输入：

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

输出：

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

我知道下载所有内容后进行缩小是没有用的。这里的重点是停止识别以在我的 div 之间创建间隙。我知道，如果我在标签之间添加注释，则不会出现间隙，但是在我的 div 标签之间有这么多 cmets 时，很难理解代码。

看到这个 [post] 你就会明白我的意思了。

【问题讨论】：

这里的问题是你的 CSS，而不是你的 HTML。您应该寻找更正样式，以便空间不会在元素之间创建实际空间。
你说的“空格”是指那些子元素的缩进吗？
是的@TheMuffinMan 缩进。缩进在我的 div 之间造成了间隙。如果我在结束标签和另一个开始标签之间添加评论，那么差距就会消失
你是说当你使用输入和输出的时候你会得到不同的用户渲染结果？因为如果是这样，那就没有意义了。
@TheMuffinMan 请看这篇帖子stackoverflow.com/questions/19038799/…

标签： javascript html whitespace minify removing-whitespace

【解决方案1】：

如果是缩小版，则 DOM 不会更新。此外，客户端缩小并没有完成任何事情：下载速度不会更快，也不会被客户端混淆。

对于你写的，我猜你可以用''替换'\n'。

【讨论】：

我已经更新了我的问题。我知道在下载所有内容后进行缩小是没有用的。这里的重点是消除
元素之间的空格。这些空间让我很烦，因为它们正在将我的元素移动到所需的位置。
@gabriel.santos 那么您不是在谈论缩小，而是在谈论修改 DOM。这些基本上是对立的。
好的...但仍然。有没有办法消除这些空白并阻止我的元素移动？
@gabriel.santos 我不知道，我发布这个答案是为了回答您提出的问题，而不是您想的问题。
再次查看我的问题。我已经更新了更多详细信息

【解决方案2】：

在解析文档时需要小心，尤其是属性中的特殊字符。您可以编写自己的 DOM 解析器，但是，为什么要重新发明轮子呢？

这是一个很棒的解析器，用 JavaScript 编写：https://www.npmjs.com/package/html-minifier

说明已记录在案。

上述方法是“缩小”生产代码；但是，如果是视觉间距问题，请参见下文：

更新：

当涉及到块元素时，“空白”通常会被忽略。
为确保您的内联块元素不被“空白”分隔，您可以将（块）代码排列在彼此下方，表明分隔它们的不是“空格”；除此之外，这才是真正重要的：

正确的 CSS 和 HTML

确保所有 HTML 标签都正确“配对”——每个开放标签都有一个关闭标签。这不包括像 <img /> 或 <input /> 这样的“无效标签”，因为它们是“自动关闭”。
如果您需要将块彼此相邻放置，请使用带有 CSS 样式的 <div> 标记为 display:inline-block。您还可以使用“table-cells” - 不必是 <td> 标签，因为您也可以使用 CSS 来实现此目的，样式为：display:table-cell。
您还可以通过将元素的样式指定为：float:left（或“正确”）来将元素紧紧地包裹在一起（如上所述）。
将样式放在 CSS 样式表中是一种很好的做法，而不是内联样式，因为后者会使您的代码难以管理；然而，一些样式表是持久的（见下文），覆盖这些样式的唯一方法是使用内联样式。
如果您在其他人的代码库中进行编码并且上述方法均不起作用，您可以制作一些自己的样式表，在每个属性后使用以下词覆盖其他样式表：!important。您可以使用它来覆盖任何属性，但在这种情况下，它通常是 margin 或 border-...
最后，如果不需要的话，确保你的元素之间没有no-braking-spaces；这些看起来像这样：&nbsp;

如果您需要有关如何编写现代 HTML5 标记和 CSS3 样式表语言的更多信息，“Mozilla 开发者网络”是一个很好的参考：https://developer.mozilla.org

【讨论】：

再次查看我的问题。我已经更新了更多详细信息
我明白了！好吧，这很简单-谢谢！ - 我会更新我的答案
@gabriel.santos :: 答案已更新，看看，测试一些声明，看看它是否适合你;)

【解决方案3】：

试试这个 javascript 缩小脚本 -- http://prettydiff.com/lib/jspretty.js

【讨论】：

再次查看我的问题。我已经更新了更多详细信息

【解决方案4】：

所以让我们尝试解决这个问题：“这里的重点是停止缩进以在我的 div 之间创建间隙。”我可以从那句话 + [post] 页面 + 它的 linked answer page 中推断出客户端 HTML 缩小，不是解决这个问题的正确方法。

在尝试缩小 HTML 代码或通过在 HTML 标记之间添加空白 cmets 之前，您是否考虑过先使用 inline-block 或 CSS 重置？

linked answer page 讨论了使用inline-block 来消除 HTML 元素之间的间距。这两页还讨论了重置字体样式以解决间距问题。

CSS 重置可用于修复元素之间的间隙。 http://cssreset.com 有一个最流行的 CSS 重置列表。如果需要，应该很容易扩展它们以覆盖任何字体设置，从而规范字体处理空白字符的方式。

因此不需要在 HTML 标记之间注入空 cmets，以解决空白字符的间距问题。如果使用 CSS 来修复样式，那么 HTML 将是可读的。如果 HTML 被缩小，它将更难阅读和调试。我建议不要使用 JavaScript 缩小您的 HTML。而是尝试使用 CSS 解决间距问题。

（至于缩小是如何工作的……see my answer at this SO question.）

【讨论】：

【解决方案5】：

我设法实现了我想要的，甚至为它创建了一个 jQuery 插件。

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

  return this;
}

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

有一个例子我写在jsfiddle

但感谢您的所有努力。 :)

【讨论】：

【解决方案6】：

使用 vanilla JS 在浏览器中缩小 HTML。

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); 
        }
    });
};

我创建了一个包含 1,000 个元素的示例，我的计算机可以在不到 15 毫秒的时间内缩小 html，但它可能会更慢或更快，具体取决于运行代码的设备。

https://jsfiddle.net/shwajyxr/

【讨论】：