客户端HTML最小化

Clientside HTML Minification

本文关键字：最小化 HTML 客户端      更新时间：2024-06-04

有没有办法用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标签之间有这么多注释，很难理解代码。

看到这个帖子，你就会明白我的意思。

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

jQuery.fn.clearWhiteSpace = function () {
    var htmlClone = this.html().replace(/'n[ ]*/g,"");
  this.html(htmlClone);
  return this;
}
$(".parentDiv").clearWhiteSpace();

我在jsfiddle 中写了一个例子

但是谢谢你的努力

如果是缩小版，则DOM不会更新。此外，客户端缩小也没有实现任何功能：下载速度不快，也不会从客户端混淆。

对于您所写的内容，我想您可以将''n'替换为''。

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

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

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

说明已形成文件。

上述方法是"缩小"生产代码；但是，如果是视觉间距问题，请参阅以下内容：

更新：

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

正确的CSS&HTML

  • 确保所有HTML标记都正确"配对"——每个打开的标记都有一个关闭的标记。这不包括像<img />或<input />这样的"无效标签"，因为它们是"自关闭的"。

  • 如果需要相邻放置块，请使用样式为display:inline-block的带有CSS的<div>标记。您还可以使用"表单元格"-不必是<td>标记，因为您也可以使用样式为：display:table-cell的CSS来实现这一点。

  • 通过将元素的样式指定为：float:left（或"right"），也可以将元素紧密地包装在一起（如上所述）。

  • 将样式放在CSS样式表中是一种很好的做法，而不是内联，因为后者会使代码无法管理；然而，有些样式表是持久的（见下文），覆盖这些样式的唯一方法是使用内联样式。

  • 如果你在别人的代码库中进行编码，而上面的都不起作用，你可以制作一些自己的样式表，在每个属性后面用单词!important覆盖其他样式表。您可以使用它来覆盖任何属性，但在这种情况下，它通常是margin或border-...

  • 最后，如果不需要元素，请确保元素之间没有no-braking-spaces；这些看起来像这样：&nbsp;

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

所以让我们尝试解决这个问题："这里的重点是停止缩进，在我的div之间创建间隙。"。

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

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

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

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

（至于缩小是如何在它的引擎盖下工作的…请参阅我对这个SO问题的回答。）

使用香草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); 
        }
    });
};

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

https://jsfiddle.net/shwajyxr/

相关文章：