骨架屏簡介：

骨架屏就是在頁面數據尚未加載前先給用戶展示出頁面的大致結構，直到請求數據返回后再渲染頁面，補充進需要顯示的數據內容。常用于文章列表、動態列表頁等相對比較規則的列表頁面。

作為spa中路由切換的loading,結合組件的生命周期和ajax請求返回的時機來使用.

作為首屏渲染的優化.

通過 puppeteer 在服務端操控 headless Chrome 打開開發中的需要生成骨架屏的頁面，在等待頁面加載 渲染完成之后，在保留頁面布局樣式的前提下，通過對頁面中元素進行刪減或增添，對已有元素通過層疊樣 式進行覆蓋，這樣達到在不改變頁面布局下，隱藏圖片和文字，通過樣式覆蓋，使得其展示為灰色塊。然后 將修改后的 HTML 和 CSS 樣式提取出來，這樣就是骨架屏了. 1.事先編寫好骨架屏組件通過ssr render 解析注入html文件中(除了需要自己編寫外其實過程類似于上面的自動化方案)

2.事先編寫好的骨架屏組件可以用圖片代替 (svg) ，或者設計師設計好.

?

轉載于:https://www.cnblogs.com/zhouyideboke/p/9812427.html

總結

以上是生活随笔為你收集整理的对骨架屏的研究的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。