#周分享#骨架屏[Skeleton Screen]

什麼是骨架屏

骨架屏就是在頁面數據還沒有加載前先給用戶展現出頁面的大體結構,直到請求數據返回後再渲染頁面，補充進須要顯示的數據內容。經常使用於文章列表、動態列表頁等相對比較規則的列表頁面

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

做用

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...