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

了，周末閑來無事，突然有個詭異想法！

如題，慣性思路很簡單，就是直接擼上一個空內容的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

夢CMS系統后臺出現了這種情況：每次更新首頁，“選擇主頁模板”和“主頁位置”兩項都是空的，及時填寫了也不會保存，下次更新網站首頁時還是這樣。

這種情況說明之前的數據備份不完整，dede_homepageset 項沒有數據，所以現在這個更新動作沒有數據被改變，就不會改變表的數據。

解決方法：

后臺-系統-SQL命令行工具-執行

INSERT INTO `dede_homepageset` VALUES('{style}/index.htm','../index.html','1');

點擊“執行”，出現提示“成功執行一條SQL語句”即完成對數據表的修改。

家好，很高興又見面了，我是姜茶的編程筆記，我們一起學習前端相關領域技術，共同進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力

在 JavaScript 中，Array.prototype.reduce 是一個功能強大的方法，用于對數組中的每個元素執行一個給定的函數，并將其結果匯總為單個值。為了更好地理解其內部機制，今天我們將從零開始，實現一個自定義的 reduce 方法，并詳細解析其實現步驟。

實現自定義 reduce 方法

首先，我們將自定義的 reduce 方法添加到 Array.prototype 上。這個方法接收一個回調函數和一個可選的初始值作為參數。

Array.prototype.myReduce = function(callback, initialValue) {
  // 將傳入的數組轉換為對象
  if (this == null) {
    throw new TypeError('Array.prototype.myReduce called on null or undefined');
  }

  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }

  const O = Object(this);
  const len = O.length >>> 0;

  let k = 0;
  let accumulator;

  // 判斷是否傳入初始值
  if (arguments.length >= 2) {
    accumulator = initialValue;
  } else {
    // 沒有初始值時，找到第一個有效值
    while (k < len && !(k in O)) {
      k++;
    }

    if (k >= len) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    accumulator = O[k++];
  }

  while (k < len) {
    if (k in O) {
      accumulator = callback(accumulator, O[k], k, O);
    }
    k++;
  }

  return accumulator;
};

讓我們逐步解析這個實現。

1. 檢查數組是否為 null 或 undefined

首先，我們確保 this 不為空：

if (this == null) {
  throw new TypeError('Array.prototype.myReduce called on null or undefined');
}

2. 檢查回調函數是否為函數類型

確保傳入的回調函數有效：

if (typeof callback !== 'function') {
  throw new TypeError(callback + ' is not a function');
}

3. 初始化變量

將傳入的數組轉換為對象，并獲取數組長度：

const O = Object(this);
const len = O.length >>> 0;

let k = 0;
let accumulator;

4. 判斷是否傳入初始值

如果傳入了初始值，則將其賦值給 accumulator。否則，找到數組中的第一個有效值作為 accumulator：

if (arguments.length >= 2) {
  accumulator = initialValue;
} else {
  while (k < len && !(k in O)) {
    k++;
  }

  if (k >= len) {
    throw new TypeError('Reduce of empty array with no initial value');
  }
  accumulator = O[k++];
}

5. 遍歷數組并執行回調函數

遍歷數組中的每個元素，并調用回調函數來更新 accumulator：

while (k < len) {
  if (k in O) {
    accumulator = callback(accumulator, O[k], k, O);
  }
  k++;
}

6. 返回累積結果

最后，返回 accumulator 作為最終結果：

return accumulator;

實用小技巧：reduce 方法處理對象數組

你知道嗎？你可以使用 reduce 方法輕松地處理對象數組。例如，計算一個對象數組中特定屬性的總和：

const products = [
  { name: 'Apple', price: 10 },
  { name: 'Banana', price: 5 },
  { name: 'Cherry', price: 15 }
];

const total = products.myReduce((acc, product) => acc + product.price, 0);

console.log(total); // 輸出 30

通過這種方式，我們可以快速計算出產品總價，大大簡化了代碼。