騷操作：如何讓一個網頁一直處於空白情況？

林恒發表於2024-06-24
網頁

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

如題，慣性思路很簡單，就是直接擼上一個空內容的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渲染之後再執行。

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

騷操作：如何讓一個網頁一直處於空白情況？

相關文章