怎样用 JS 压缩 HTML ？

实现 HTML 压缩，可以使用 JavaScript 中的正则表达式来去除 HTML 中的空格和注释。以下是一个简单的 HTML 压缩函数：

function compressHTML(html) {
  // 去除注释
  html=html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html=html.replace(/\s+/g, " ");
  // 去除标签之间空格
  html=html.replace(/>\s+</g, "><");
  return html.trim();
}

该函数首先使用正则表达式去除 HTML 中的注释。然后，它使用另一个正则表达式去除 HTML 中的多余空格。最后，它使用另一个正则表达式去除标签之间的空格。

为了测试该函数，您可以创建一个 HTML 文件，并在其中添加一些冗余的空格和注释。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>

然后，您可以在Node.JS中使用以下代码将 HTML 文件加载为字符串并压缩它：

// 加载 HTML 文件
const fs=require("fs");
const html=fs.readFileSync("index.html", "utf8");
// 压缩 HTML
const compressedHtml=compressHTML(html);
console.log(compressedHtml);

输出是一个压缩后的 HTML 字符串，其中不包含注释或冗余空格。

或者直接在IE中测试，代码如下：

function compressHTML(html) {
  // 去除注释
  html=html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html=html.replace(/\s+/g, " ");
  // 去除标签之间空格
  html=html.replace(/>\s+</g, "><");
  return html.trim();
}
var html=`
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>
`;
console.log(compressHTML(html));

运行效果：

了，周末闲来无事，突然有个诡异想法！

如题，惯性思路很简单，就是直接撸上一个空内容的html。

注：以下都是在现代浏览器中执行，主要为**Chrome 版本 120.0.6099.217（正式版本）（64 位）和Firefox123.0.1 (64 位) **

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
</body>
</html>

????乛?乛????~

但是，要优雅~咱玩的花一点，如果这个HTML中加入一行文字，比如下面这样，如何让这行文字一直不显示出来呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
</body>
</html>

思考几秒~有了，江湖一直传言，Javascrip代码执行不是影响Render树生成么，上循环！于是如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
<div>放我出去！！！</div>
<script>
    while (1) {
      let a;
    }
    // 或者这样
    /*(function stop() {
       var message=confirm("我不想让文字出来！");
 
       if (message==true) {
         stop()
       } else {
         stop()
       }
     })()*/
</script>
</body>

</html>
```一下一下
bingo，可以实现，那再换个思路呢？加载资源？

说干就干，在开发者工具上，设置上下载速度为1kb/s，测试了以下三种类型资源

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <!-- <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css" as="style"/> -->
  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
  <div class="let-it-go">放我出去！！！</div>
  <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script>
  <style>
    .let-it-go {
      color: red;
    }
    </style>
</body>
</html>

总得来说，JS和CSS文件，需要排在.let-it-go元素前面或者样式前面，才会影响到渲染DOM或者CSSOM，图片或者影片之类的，不管放前面还是后面，都无影响。如果在css文件中，一直有import外部CSS，也是有很大影响！

但正如题目，这种只能影响一时，却不能一直影响，就算你在代码里写一个在头部不停插入脚本，也没有用，比如如下这么写，按，依旧无效：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"
    as="style" />
  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->
  <script>
    // setInterval(()=>{
    // 不停插入script脚本 或者css文件
    let index='';
    (function fetchFile() {
      var script=document.createElement('script');
      script.src=`https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect${index}.js`;
      document.head.appendChild(script);
      script.onload=()=> {
        fetchFile()
      }
      script.onerror=()=> {
        fetchFile()
      }
      index+=1
      
      // 创建一个 link 元素
      //var link=document.createElement('link');
      // 设置 link 元素的属性
     // link.rel='stylesheet';
     // link.type='text/css';
     // link.href='https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/app.f81e9f9${index}.css';
      // 将 link 元素添加到文档的头部
      //document.head.appendChild(link);
    })()
    // },1000)
  </script>
  <div class="let-it-go">放我出去！！！</div>
  <style>
    .let-it-go {
      color: red;
    }
  </style>
  <!-- <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script> -->
</body>

</html>

那么，还有别的方法吗？暂时没有啥想法了，等后续再在这篇上续接~

另外，在实验过程中，有一个方式让我很意外，以为以下代码也会造成页面一直空白，但好像不行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
</head>
<body>
  <div id="appp"></div>
  <script>
    (function createElement() {
      var parentElement=document.getElementById('appp');
      // 创建新的子元素
      var newElement=document.createElement('div');
      // 添加文本内容（可选）
      newElement.textContent='这是新的子元素';
      // 将新元素添加到父元素的子元素列表的末尾
      parentElement.appendChild(newElement);
      createElement()
    })()
  </script>
  <div class="let-it-go">放我出去！！！</div>
</body>
</html>

这可以很好的证明，插入DOM元素这个任务，会在主HTML渲染之后再执行。

祝周末愉快~

作者：大怪v
链接：https://juejin.cn/post/7344164779629985818

SS之空白处理。

免费少儿编程开课啦，同学们好！今天分享的知识是对网页中文档段落空白部分的处理。使用到的是CSS的white-space属性，它一共有6个值，分别是normal、pre、nowrap、pre-wrap、pre-line、inherit。下面我为大家一一演示和讲解。

·normal：使用浏览器的默认规则处理空白，不设置white-space属性时也是这个值Pre，和HTMLPre标签一样的效果。空白会被浏览器保留，源代码中文本是什么样，显示在浏览器中也是完全一致。

·Nowarp：文本不换行，直到遇到显示的换行标记。在示例中可以看到他和Pre还是有区别的，没有和源代码中格式一致，而是去掉了某些不需要的空白部分。

·pre-wrap：保留空白部分，但换行是正常换行。pe你们可以看到这个The和Play之间的空格都是完整的被显示出来，就相当于一个带换行的Pre值增强版。

·最后是pre-line，这个属性用得是比较多的，不仅仅有Pre和Pre-Warp值的功能，还可以自动的将源代码中的空白部分进行合并。

看看和 pre-Warp 的区别，可以发现在的和 play之间的连续空格已经被合并，为了一个空格而且换行和文本效果都是正确显示。可能有同学不明白空白不就是空格吗？怎么这个属性？还在设置换行的相关部分。其实在程序中，空白部分也可以叫影视，用户可见的叫做显示。影视不仅有空格还有换行以及各种特异字符，后面有机会我还会详细解释，这只是顺便一提。

好了，今天的分享就到这里，各位同学可以在汇总文档中尝试修改数值来查看不同的效果，所有的案例及相关文档均可向我获取。

我们下期见。网页编程·服务端编程·数据库·算法，点赞丶关注。

在线咨询

上一篇：2023年金砖国家职业技能大赛“Web技术”赛项山东
下一篇：Web前端面试中，12道经典的HTML面试题（附答案

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

怎样用 JS 压缩 HTML ？

您的项目需求