怎樣用 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 ？

您的項目需求