什么是骨架屏

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

是進度條和菊花圈的進化產物

作用

1.作為首屏渲染的優化

2.比其他的加載提示更人性化，能讓用戶更直接感知布局和內容

3.提升用戶體驗，增加用戶存留率

組成

類似一個靜態的html

文本塊：僅包含文本節點（NodeType 為 Node.TEXT_NODE）的元素（NodeType 為 Node.ELEMENT_NODE），一個文本塊可能是一個 p 元素也可能是 div 等。文本塊將會被轉化為灰色條紋。

圖片塊：圖片塊是很好區分的，任何 img 元素都將被視為圖片塊，圖片塊的顏色將被處理成配置的顏色，形狀也被修改為配置的矩形或者圓型。

按鈕塊：任何 button 元素、 type 為 button 的 input 元素，role 為 button 的 a 元素，都將被視為按鈕塊。按鈕塊中的文本塊不在處理。

svg 塊：任何最外層是 svg 的元素都被視為 svg 塊。

偽類元素塊：任何偽類元素都將視為偽類元素塊，如 ::before 或者 ::after。

如何制作骨架屏svg

1.vue組件
2.react組件
3.ng組件
4.自定義svg在線生成骨架屏

vue和react的組件中，除了可以自定義，也有一些現成的骨架屏svg，比如公司類型的Facebook Style，比如布局類型 List Style，功能類型的Code Style
如果適用自己的話可以直接引用組件就行

可行性和構建原理

1.vue/react/ng 這三大框架都有一個共同的特定，其都是 JS 驅動，在 JS 代碼解析完成之前
直接展示的是

<div id="app"><!-- 內容為空 或者可以輸入自己喜歡的東西，在js解析成功之前都會展示這里的內容，js展示完成會替換掉這里--> </div>

所以骨架屏可以在js解析成功之前放在這里，以此類推

2.骨架屏的dom結構和css通過離線生成后構建的時候注入模板中的節點下面.

如何引入到自己的項目

1.手工工場時代

手寫css配合svg注入頁面 一旦頁面布局有所更改我們就需要跟著去更改，所以出現了下面這張圖

2.蒸汽時代，借助插件

通過使用插件page-skeleton-webpack-plugin方式通過Puppeteer API 結合webpackage動態生成 骨架屏，生成原理看[大神的這邊文章][6]該插件還不是很智能，目前只能支持首屏的骨架屏生成，還不支持局部的

3.下個時代

思索

1.通過設置某個div含有某個屬性或者class定性為需要骨架占位符，渲染的時候作為一個常規骨架屏輸出，然后又真實內容再做替換

參考

1.https://github.com/Jocs/jocs....
2.https://juejin.im/post/59ef52...
3.https://juejin.im/post/5b79a2...

總結

以上是生活随笔為你收集整理的#周分享#骨架屏[Skeleton Screen]的全部內容，希望文章能夠幫你解決所遇到的問題。

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