如何解決HTML頁面白屏問題

網頁開發過程中，我們有時會遇到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頁面白屏問題，并解決它們。不同的問題可能需要不同的解決方法，因此需要耐心和細心地分析和排查。在開發過程中，我們也要時刻關注頁面性能，優化頁面加載速度，提高用戶體驗。

上流行的解決方案是將assetsPublicPath: '/'改成'./'，下面說一下這個解決方案的弊端：

通常頁面空白的問題出現大多數是由于Spring Boot端配置了server.servlet.context-path，上下文改變了css, js等文件的訪問路徑，文件無法加載導致index.html顯示空白。'/'改成'./'是將絕對路徑變為相對路徑，可以動態適應Spring Boot端上下文的改變，這是為什么這個解決方案起作用的原因。

Vue項目部署在Spring Boot出現的另一個常見問題是當刷新瀏覽器的時候出現white label, 也就是404錯誤，解決的方案基本是把error page配置成為Vue的index.html。

這兩個解決方案有沖突的地方，當router出現子路徑的時候刷新瀏覽器，error page會指向Vue的index.html頁面，此時頁面中訪問css,js文件的路徑是相對路徑，也就是上下文路徑+router子路徑，這將導致css,js再次無法正常加載，這就是相對路徑的弊端。

由于router會出現子路徑，因此必須保證assetsPublicPath為絕對路徑，下面講一下保持絕對路徑的解決方案：

1 假設Spring Boot端配置server.servlet.context-path： api, 對應Vue的/config/index.js中assetsPublicPath: '/'改成 '/api/'

2 router/index.js中配置base: '/api/', 這是保證瀏覽器刷新時上下文參數和router跳轉路徑一致。

3 對于Ajax請求需要配置baseURL, 如果使用Axios, 可以采用如下方法在main.js中配置

// http request 攔截器
Axios.interceptors.request.use(
config => {
if (localStorage.getItem('id_token')) {
config.headers.Authorization = localStorage.getItem('id_token')
}
config.baseURL = '/api'
return config
},
err => {
return Promise.reject(err)
})

4 另外需要注意的一點，按照Spring Boot默認配置，在Vue端/config/index.js中assetsSubDirectory: 'static'要改變為其它字符，比如：'content', 'vue', 'api'等等。

5 試過將assetsSubDirectory配置為空，它和另一個css圖片加載的方案有沖突，圖片加載解決方案是在/build/util.js中加一行配置

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath: '../../'

})

結尾附上Spring Boot端將error page指向Vue的index.html代碼：

import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.boot.web.server.ConfigurableWebServerFactory;
 import org.springframework.boot.web.server.ErrorPage;
 import org.springframework.boot.web.server.WebServerFactoryCustomizer;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.http.HttpStatus;
 @Configuration
 public class ServletConfig {
 private static final Logger logger = LoggerFactory.getLogger(ServletConfig.class);
 @Bean
 public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
 logger.info("come to 404 error page");
 return factory -> {
 ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
 factory.addErrorPages(error404Page);
 };
 }
 }

對前端全棧工程師感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的前端全棧工程師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

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

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

在線咨詢

上一篇：數據血緣圖譜升級方案設計與實現
下一篇：php配置限定某個目錄禁止解析php 限制user_agent

您的項目需求

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

整合營銷服務商

如何解決HTML頁面白屏問題

您的項目需求