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

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

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

網頁開發過程中，我們有時會遇到HTML頁面白屏的問題，即打開網頁時頁面顯示空白，沒有任何內容。這不僅令用戶困惑，也使開發者頭疼不已。本文將分享一些常見的HTML頁面白屏問題解決方法，幫助你快速解決這個問題，讓你的網頁煥然一新！

第一步：檢查HTML代碼

首先，我們需要檢查HTML代碼是否正確。常見的錯誤包括標簽未閉合、標簽嵌套錯誤等。這些錯誤可能會導致頁面無法正常顯示。因此，仔細檢查HTML代碼，確保沒有語法錯誤是解決白屏問題的第一步。

第二步：檢查CSS文件

HTML頁面的樣式通常由CSS文件控制。如果CSS文件中存在錯誤或者無法正常加載，可能會導致頁面白屏。我們可以通過以下步驟檢查CSS文件是否存在問題：

1、檢查CSS文件路徑是否正確：確保CSS文件的路徑正確，并且文件存在于指定的位置。可以通過瀏覽器開發者工具查看網絡面板，檢查CSS文件是否被成功加載。

2、檢查CSS文件語法錯誤：使用CSS驗證工具，如W3C CSS驗證服務，檢查CSS文件是否存在語法錯誤。如果存在錯誤，及時修復。

3、檢查CSS選擇器和樣式規則：檢查CSS文件中的選擇器和樣式規則是否正確。可能存在選擇器與HTML元素不匹配或樣式規則沖突的情況。可以通過逐個注釋掉樣式規則，逐步排查問題。

第三步：檢查JavaScript代碼

JavaScript代碼也可能導致頁面白屏。以下是檢查JavaScript代碼的步驟：

1、檢查JS文件路徑是否正確：與CSS文件類似，確保JS文件的路徑正確，并且文件存在于指定的位置。通過瀏覽器開發者工具查看控制臺面板，檢查是否有JS文件加載錯誤的提示信息。

2、檢查JS代碼語法錯誤：使用JS語法檢查工具，檢查JS代碼是否存在語法錯誤。如果有錯誤，及時修復。

3、檢查JS代碼邏輯錯誤：檢查JS代碼中的邏輯是否正確。可能存在變量未定義、函數未調用或者邏輯錯誤等問題。可以通過調試工具，如瀏覽器開發者工具中的調試器，逐步排查問題。

第四步：排查網絡請求問題

如果前面的步驟都沒有發現問題，那么可能是網絡請求出現了問題。以下是一些排查網絡請求問題的方法：

1、檢查網絡連接：確保你的設備已連接到互聯網，并且網絡連接穩定。

2、檢查資源加載狀態：通過瀏覽器開發者工具的網絡面板，檢查頁面中的資源加載狀態。可能存在資源加載失敗或者超時的情況，導致頁面白屏。

3、檢查服務器配置：如果你使用了服務器端腳本語言，如PHP，檢查服務器配置是否正確。可能存在服務器配置問題導致頁面無法正確渲染。

第五步：優化頁面性能

如果以上方法都沒有解決問題，那么可能是頁面性能問題導致白屏。以下是一些優化頁面性能的方法：

1、壓縮和合并文件：將CSS和JS文件進行壓縮和合并，減少文件的大小和數量，提高頁面加載速度。

2、使用緩存：利用瀏覽器緩存機制，將靜態資源進行緩存，減少服務器的請求次數，提高頁面加載速度。

3、異步加載資源：使用異步加載技術，如異步加載JS文件或使用延遲加載，減少頁面加載時間。

4、減少HTTP請求：減少頁面中的HTTP請求次數等。

結語：

通過以上五個步驟，我們可以逐步排查HTML頁面白屏問題，并解決它們。不同的問題可能需要不同的解決方法，因此需要耐心和細心地分析和排查。在開發過程中，我們也要時刻關注頁面性能，優化頁面加載速度，提高用戶體驗。

于空鏈接的通常會有兩種方式，第一種模式是直接的HTML的空鏈接。

第二模式是使用JavaScript動態的設置src屬性。

var img = new Image();

img.src = "";

這兩種模型寫出來的空鏈接的影響是一樣的，但是對于不同的瀏覽器來說會有所不同。

1) Internet Explorer向頁面所在的目錄發出請求。例如，如果您運行的頁面http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html，由于空鏈接找不到圖片，所以會向http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload發送請求來查找圖片。HTTP請求如圖所示。

2) Firefox和Chrome會向實際頁面提出請求。例如運行的頁面http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html，如果使用Firefox或Chrome瀏覽器就只會向這個頁面發送請求，請求的是test1.html文檔，圖片的請求會被忽略，如圖所示。

所以當頁面中存在圖片空鏈接時，可能會導致以下兩個問題：

第一：可能出現流量峰值。例如上面的例子，訪問http://192.168.40.128:8091/ECShop_V2.7.3_UTF8_release0411/upload/test1.html頁面，如果這個頁面中包含空圖片鏈接，那么就會對根目錄進行再次發送請求，這樣相當于訪問服務的流量增加了一位。

如果是一個小型網站，訪問量不是很多的話，請求從1000變成2000這樣服務器也不會出現太大問題，但如果網站每天的流量很大時，上百萬的流量時，那么由于圖片空鏈接導制流量成倍增長時，那么對服務器的的性能就會產生很大的影響。

第二：用戶狀態可能受損。如果您通過cookie或其他方式跟蹤請求中的狀態，則可能會破壞數據。即使圖像請求未返回圖像，瀏覽器也會讀取并接受所有標頭，包括所有cookie。雖然其余的響應被丟棄，但可能已經造成了損害。

正常情況下不會寫出圖片空鏈接的情況，但是如果出現以下情況就可能出現圖片空鏈接的情況，如以下代碼：

如果$imageUrl是由其它代碼調用而已來，并且$imageUrl的代碼存在問題，那么就會出現圖片空鏈接的現象。

當然要解決圖片空鏈接帶的問題，那么最好的方法顯然是完善代碼，在代碼中消除頁面中的違規代碼。如果我們不能保證代碼中是否會出現圖片空鏈接的情況，那么可以嘗試在服務器上檢測空鏈接并中止任何進一步的執行。下面是一個PHP的檢測代碼。

<?php

$referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';

$url = "http://" . $_SERVER['HTTP_HOST']? . $_SERVER['REQUEST_URI'];

if ($referrer == $url){

exit;

}

上面代碼的目的是檢測頁面是否引用自身，如果有引用自身，那么就立即退出，并阻止服務器執行任何其他操作。另一種選擇，就是記錄已發生的情況，并進行分析。

嘗試在服務器上檢測此類請求的另一種方法是查看HTTP Accept標頭。除IE之外的所有瀏覽器都會Accept為圖像請求發送不同的HTTP 標頭，而不是HTML請求。例如，Chrome會Accept為HTML請求發送以下標頭，如以下Accept請求。

Accept: application/xml,application/xhtml+xml,text/html;q=0.7,text/plain;q=0.3,image/png,*/*;q=0.6

Firefox和Chrome瀏覽器都會使用Accept為HTML請求發送一些內容以上面大致相同的標頭，這樣可以去判斷我們要的內容是否存在，例如判斷“image/png”的內容，但是對于IE瀏覽器只會發送所有請求中最后一個請求的Accept頭的內容，這樣就無法在服務器上區分它。對于IE以外的瀏覽器，您可以使用以下內容：

<?php

if (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false){

exit;

}

之所以會出現圖片空鏈接的問題是由于瀏覽器中執行URI解析方式引起的，在RFC3986統一資源標識中定義，當遇到空字符串作為URI時，瀏覽器解析時會認為是相對URI。

這其實是瀏覽器的一個嚴重缺陷，當然瀏覽器都在嘗試不斷的解決這個問題。在HTML5中添加了<imag>標記src屬性的描述，以指示不要再額外的增加其它的請求。

在線咨詢

上一篇：HTML編碼規范
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

您的項目需求