JavaScript前端實現(xiàn)頁面白屏檢測與解決

更新時間：2025年03月19日 16:27:05 作者：水煮白菜王

白屏通常指的是頁面打開后,瀏覽器上面的地址欄已經(jīng)顯示完整的?URL,但是頁面內(nèi)容無法渲染,只有白色的空白頁面,下面我們就來看看白屏出現(xiàn)的具體原因與解決方法吧

資源加載問題

代碼執(zhí)行錯誤

從現(xiàn)代前端視角來看，這兩種原因都跟當前SPA框架的廣泛使用有關。

資源加載問題

這里的資源特指 JavaScript 腳本、樣式表、圖片等靜態(tài)資源，不包括接口調(diào)用等動態(tài)資源。

資源加載問題導致的白屏可以分為可恢復的和不可恢復的兩大類

1.可恢復的白屏

可恢復的白屏常見于第一次進人頁面時，由于資源加載過慢或者接口請求未返回，所以瀏覽器無法執(zhí)行下一步驟。

這種白屏通常是網(wǎng)絡狀況太差或者設備性能太差等原因?qū)е碌?，一般在瀏覽器返回后，就能恢復頁面渲染，可以通過監(jiān)控首屏時間來發(fā)現(xiàn)。

如果生產(chǎn)環(huán)境的首屏時間呈異常上升趨勢，那么一定是頁面白屏時間過長導致的，開發(fā)人員應該及時關注并排查近期改動的代碼

2.不可恢復的白屏

不可恢復的白屏大多是由于網(wǎng)絡或緩存問題導致的。

常見的例子莫過于 React、Vue 等 SPA 框架構建的 Web 應用，一旦 [bundle|app].js 因為網(wǎng)絡原因訪問失敗，便會引發(fā)頁面白屏。

你可以訪問任意SPA框架構建的Web應用，按照如下步驟復現(xiàn)：打開 DevTools > Network，找到 app.xxx.js，右鍵并選中 Block request URL，隨后刷新頁面。

另一個例子是SPA項目打包后，在非首次線上替換dist文件時，某些手機/瀏覽器在之后首次打開頁面，可能出現(xiàn)白屏情況

在用戶端會默認緩存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此會出現(xiàn)找不到css/js的情況，導致白屏的產(chǎn)生。在服務端更新包之后，由于舊的文件被刪除，而index.html所鏈接的路徑依然是舊文件路徑，因此會找不到文件，從而白屏。

代碼執(zhí)行錯誤

代碼執(zhí)行錯誤導致的白屏一般伴隨著功能流程的阻斷出現(xiàn),并且很難通過等待或者頁面刷新等方法修復。
這類問題出現(xiàn)的原因通常是前端代碼邏輯錯誤，或是后端接口的臟數(shù)據(jù)導致的前端數(shù)據(jù)解析邏輯錯誤，最終導致運行異常的前端代碼觸發(fā)了頁面崩潰。

例如，如果 React 中的組件發(fā)生了異常，并且外部沒有使用 componentDidCatch 或者getDerivedStateFromError 捕錯誤，那么 React 組件 render 掛載的目標節(jié)點下的 DOM 樹會被移除、頁面就會出現(xiàn)白屏。

自React 16 起,任何未被錯誤邊界捕獲的錯誤將會導致整個 React 組件樹被卸載。

白屏檢測

檢測根節(jié)點是否渲染

這種方法的原理是在當前主流 SPA 框架下，DOM 一般掛載在一個根節(jié)點之下（比如 < div id=“app” > ），發(fā)生白屏后通常是根節(jié)點下所有 DOM 被卸載。

我們可以通過在頁面渲染完成后，檢查頁面根節(jié)點的子元素是否存在，如果不存在，則可以判斷頁面是白屏狀態(tài)。

這種方案簡潔明了，但缺點也很明顯，項目有骨架屏渲染的情況下無法判斷是否白屏。

如在 Vue.js 中可以使用鉤子函數(shù) mounted 或 created 在頁面渲染完成后進行檢測。

export default {
  created() {
    // 獲取頁面根節(jié)點
    const rootNode = document.querySelector('#app');
    // 檢測根節(jié)點的子元素是否存在
    if (rootNode.children.length === 0) {
      // 頁面是白屏狀態(tài)
      console.error('頁面白屏了！');
    } else {
      // 頁面正常顯示
      console.log('頁面正常顯示');
    }
  },
}

由于 SPA 應用通常使用異步加載方式加載組件和數(shù)據(jù)，因此需要確保在頁面組件渲染完成后再進行白屏檢測。如果在組件渲染之前進行檢測，可能會誤判為白屏。另外，SPA 應用可能會存在某些異步請求失敗或加載超時等問題，也需要考慮這些因素對白屏檢測的影響。

Mutation Observer 監(jiān)聽 DOM 變化

Mutation Observer 是一種在 DOM 樹發(fā)生變化時進行回調(diào)的方式，可以用于監(jiān)聽頁面元素的變化?？梢酝ㄟ^ Mutation Observer 來監(jiān)聽 DOM 樹變化，從而判斷頁面是否白屏。

但這個方式的缺點也很明顯：

對性能的影響：使用 Mutation Observer 監(jiān)聽 DOM 變化會對瀏覽器性能造成一定影響，尤其是當 DOM樹變化頻繁時，會導致回調(diào)函數(shù)頻繁執(zhí)行，影響頁面的響應速度和用戶體驗。
兼容性問題：Mutation Observer 的兼容性不是很好，不同瀏覽器支持程度不同，需要進行兼容性處理。
誤判問題：有些情況下，頁面并不是真正的白屏，但是 Mutation Observer 仍然會誤判為白屏，例如頁面中有一個空白的 div元素占位，此時即使頁面內(nèi)容未加載，也不會被判定為白屏狀態(tài)。

具體實現(xiàn)步驟如下：

創(chuàng)建一個 Mutation Observer 實例，并指定回調(diào)函數(shù)。

const observer = new MutationObserver((mutations) => {
  // mutations 表示 DOM 樹的變化列表
});

將 Mutation Observer 實例與根節(jié)點進行綁定，并指定監(jiān)測的選項。

const rootNode = document.documentElement;
const observerConfig = {
  childList: true, // 監(jiān)聽子節(jié)點的變化
  subtree: true, // 監(jiān)聽所有后代節(jié)點的變化
  attributes: true, // 監(jiān)聽節(jié)點屬性的變化
  characterData: true, // 監(jiān)聽節(jié)點文本內(nèi)容的變化
  attributeOldValue: true, // 記錄節(jié)點屬性變化前的值
  characterDataOldValue: true, // 記錄節(jié)點文本內(nèi)容變化前的值
};
observer.observe(rootNode, observerConfig);

在回調(diào)函數(shù)中檢查 DOM 樹的變化，如果發(fā)現(xiàn)根節(jié)點的子元素存在，則可以判斷頁面不是白屏狀態(tài)。

const observer = new MutationObserver((mutations) => {
  // 檢查根節(jié)點的子元素是否存在
  if (rootNode.children.length > 0) {
    console.log('頁面正常顯示');
  } else {
    console.error('頁面白屏了！');
  }
});

頁面截圖

通過對網(wǎng)頁進行截圖，對截圖進行像素點分析，判斷頁面是否白屏。一般情況下，可以統(tǒng)計截圖中所有像素點的 RGB 值，如果所有像素點的 RGB 值都相同，且與白色（RGB(255, 255, 255)）非常接近，那么就可以判斷頁面是白屏狀態(tài)。

這個方式的缺點如下：

頁面截圖需要包含足夠的像素點，以便能夠準確地檢測頁面是否白屏。如果截圖不夠清晰，可能會導致誤判。

有些情況下，頁面并不是真正的白屏，但是由于一些外部原因（例如網(wǎng)絡問題）導致頁面未加載，此時頁面截圖也會被判定為白屏狀態(tài)。

頁面存在骨架屏的情況下，需要對比骨架屏

解決辦法

思路：減小打包后的體積（sourceMap關掉，CDN引入，路由懶加載，組件按需加載）

提高渲染速度
優(yōu)化用戶體驗
CDN資源優(yōu)化

將依賴的第三方npm包全部改為通過CDN鏈接獲取，在index.html里插入相應鏈接

<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>

在vue.config.js里配置externals屬性

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios':'axios',
      'element-ui': 'ElementUI'
    }
 }

卸載相關依賴的npm包

npm uninstall xxx

使用gzip壓縮

前端處理：

// npm i compression-webpack-plugin -S
const CompressionPlugin = require('compression-webpack-plugin');

???????module.exports = {
  productionSourceMap: false,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            // 匹配規(guī)格
            test: /\.js$|\.html$|\.css$|\.png$/,
            // 文件超過多大進行壓縮 單位Byte
            threshold: 10240,
            // 是否刪除源文件（建議不刪除）
            deleteOriginalAssets: false
          })
        ],
      }
    }
  },
}

還需要在 nginx開啟gzip壓縮, 例如:

 gzip on;
 gzip_static on; //當存在.gzip格式的js文件時，優(yōu)先使用靜態(tài)文件
 gzip_min_length  10k; //開啟gzip壓縮的最小大小
 gzip_buffers     4 16k;
 gzip_http_version 1.1;
 gzip_comp_level 6;
 gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
 gzip_vary on;
 gzip_proxied   expired no-cache no-store private auth;
 gzip_disable   "MSIE [1-6]\.";

注意：

當nginx開啟gzip壓縮的時候，無論前端打包出來的文件是否壓縮，網(wǎng)站加載到的js文件都是經(jīng)過nginx實時壓縮過的。

當gzip_static off的時候，前端上傳的js壓縮文件（gzip格式那些）并沒有什么用。

當gzip_static on時，優(yōu)先加載前端打包的gzip壓縮文件，如果沒有找到該文件，那么nginx將實時壓縮之后傳給瀏覽器。

到此這篇關于JavaScript前端實現(xiàn)頁面白屏檢測與解決的文章就介紹到這了,更多相關JavaScript頁面白屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript 實現(xiàn)HTML DOM增刪改查操作的常見方法詳解
這篇文章主要介紹了JavaScript 實現(xiàn)HTML DOM增刪改查操作,結合實例形式分析了JavaScript針對HTML DOM元素增刪改查常見操作技巧與使用注意事項,需要的朋友可以參考下
2020-01-01
JS應用之禁止抓屏、復制、打印
js 禁止復制js 復制js 禁止右鍵復制文件js 禁止 js禁止選擇 js禁止右鍵代碼
2008-02-02
寫js時遇到的一些小問題
寫js時遇到的一些小問題,需要的朋友可以參考下。
2010-12-12
學習javascript面向?qū)ο?理解javascript對象
這篇文章主要介紹了javascript對象，學習javascript面向?qū)ο?，感興趣的小伙伴們可以參考一下
2016-01-01
javascript 在firebug調(diào)試時用console.log的方法
當你使用console.log()函數(shù)時，下面的firebug一定要打開，不然這函數(shù)在用firefox運行時無效且影響正常程序，如果用IE打開，將會出錯
2012-05-05
小程序?qū)崿F(xiàn)滑動塊效果
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)滑動塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
JavaScript計算正方形面積
這篇文章主要為大家詳細介紹了JavaScript計算正方形面積，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
JavaScript實現(xiàn)換膚功能
js換膚功能的實現(xiàn)原理非常簡單，就是使用js切換對應的css樣式表文件，本文重點給大家介紹JavaScript實現(xiàn)換膚功能，感興趣的朋友參考下吧
2017-09-09
js字符串去重復id的實現(xiàn)代碼
最近由于需要我們將相關id的重復的去掉，一個是客戶端一個后臺程序把關，這里分享下js的去重復id的實現(xiàn)代碼
2013-07-07
小程序開發(fā)之uniapp引入iconfont圖標以及使用方式
uniapp本身是有icon組件的,但由于icon組件各端表現(xiàn)存在差異,所以我們可以通過使用iconfont的字體圖標來彌補這些差異,下面這篇文章主要給大家介紹了關于小程序開發(fā)之uniapp引入iconfont圖標以及使用方式的相關資料,需要的朋友可以參考下
2022-11-11