自從前端三大框架react、vue、angular面世以來，前端開發逐漸趨向規範化、統一化，大多數時候新建前端專案，首先想到使用的技術一定是三大框架之一，框架給前端開發帶來了極大的便利和規範，但是由於這三大框架都是js驅動，在js沒有解析載入完成之前頁面無法展示，會處於長時間的白屏，帶來了一定的使用者體驗問題，接下來本篇文章會介紹本人最近在白屏優化時遇到的一些問題和思考
想到白屏問題，首先想到的解決方案一般都是服務端渲染，在服務端將渲染邏輯處理好，然後將處理好的html直接返回給前端展示，這樣就可以解決白屏的問題，也可以解決seo的問題，因為不需要動態獲取資料了，但是，這和我早期的寫後端時的開發模式很像，前端和後端關聯在了一起，不利於維護，同時，對於前端工程師來說，要求變高來，需要了解一定的後端知識，雖然有類似nuxt.js這類的ssr框架幫我們簡化了服務端的部分，但是在要做定製或是解決bug時還是無法避免要對服務端部分進行除錯、維護，成本頗高，還有需要考慮的服務端渲染會增加伺服器壓力，要處理併發、執行速度問題等等
這個方案是相對簡單直接的乙個解決辦法，嘗試成本也比較低，這裡介紹如何用prerender-spa-plugin做預渲染，這樣就可以在瀏覽器進行渲染，而不需要將vue或者react**部署到伺服器上，以vue-cli3的官方demo為例做配置，看具體的配置檔案：
const path = require('path')
const prerenderspaplugin = require('prerender-spa-plugin')
const renderer = prerenderspaplugin.puppeteerrenderer
module.exports = ,
renderer: new renderer()
}))config.plugins = [
...config.plugins,
...plugins]}}
接下來執行編譯，看看會發生什麼？
dist目錄下會生成路由對應的資料夾，開啟index.html
homea> |
abouta>
div>
for a guide and recipes on how to configure / customize this project,
check out the vue-cli documentationa>.p>
babela>li>
eslinta>li>
unit-jesta>li>
ul>
core docsa>li>
foruma>li>
community chata>li>
twittera>li>
newsa>li>
ul>
效能優化 啟動黑白屏優化
前言 優化 方案一 去掉這個預設的白色背景效果的方法 true true 方案二 給主題設定乙個自定義的背景 mipmap ic launcher 方案三 自定義主題 將此主題用在activity上 啟動時間的測量系統日誌輸出獲取啟動時間1 displayed com.mnstartopt spla...
html白屏解決與優化方案
當前很多無線頁面都使用前端模板進行資料渲染，那麼在糟糕的網速情況下，一進去頁面，看到的不是白屏就是 loading，這成為白屏問題。此問題發生的原因基本可以歸結為網速跟靜態資源 1 css檔案載入需要一些時間，在載入的過程中頁面是空白的。解決 可以考慮將css 前置和內聯。2 首屏無實際的資料內容，...
前端效能優化之白屏時間
該篇文章會為您分享在前端效能優化中非常重要的一環 白屏時間，將從白屏時間的概念 重要性以及白屏的過程一一進行闡述，同時提供效能優化的策略與實踐。白屏時間的長短將直接影響使用者對該 的第一印象。當使用者點開乙個鏈結或者是直接在瀏覽器中輸入url開始進行訪問時，就開始等待頁面的展示。頁面渲染的時間越短，...