html白屏解決與優化方案

2021-07-31 06:30:02 字數 495 閱讀 8665

當前很多無線頁面都使用前端模板進行資料渲染,那麼在糟糕的網速情況下,一進去頁面,看到的不是白屏就是 loading,這成為白屏問題。

此問題發生的原因基本可以歸結為網速跟靜態資源

1、css檔案載入需要一些時間,在載入的過程中頁面是空白的。 解決:可以考慮將css**前置和內聯。

2、首屏無實際的資料內容,等待非同步載入資料再渲染頁面導致白屏。 解決:在首屏直接同步渲染html,後續的滾屏等再採用非同步請求資料和渲染html。

3、首屏內聯js的執行會阻塞頁面的渲染。 解決:盡量不在首屏html**中放置內聯指令碼。(來自翔歌)

解決方案

根本原因是客戶端渲染的無力,因此最簡單的方法是在伺服器端,使用模板引擎渲染所有頁面。同時

1減少檔案載入體積,如html壓縮,js壓縮

2加快js執行速度 比如常見的無限滾動的頁面,可以使用js先渲染乙個螢幕範圍內的東西

3提供一些友好的互動,比如提供一些假的滾動條

4使用本地儲存處理靜態檔案。

啟動頁白屏解決方案

由於activity只能到onresume時,才能展示到前台,所以,如果為main activity設定背景的話,無論oncreate onresume速度多快,都會出現短暫的白屏或者黑屏 視的background屬性 其實解決的辦法很簡單,只需將你的splashactivity中的view的bac...

Android 冷啟動(所謂白屏)優化方案

在styles.xml中自定義乙個style stylename welcometheme parent itemname android windowbackground drawable welcomelaunch item 這裡是設定你想要顯示的 itemname android window...

Vue首屏渲染白屏優化方案

然後找到 build webpack.base.conf.js 檔案,在 module.exports 中新增以下 externals 找到 config index.js,修改為 productionsourcemap false 這個優化是兩方面的,前端將檔案打包成.gz檔案,然後通過nginx...