什麼是骨架螢幕（Skeleton Screen）？

骨架螢幕

最近在專案不時有用到骨架螢幕的需求,所以抽時間對骨架螢幕的方案作了一下研究,骨架屏的實踐已經有很多了,也有很多人對自己的方案作了介紹.在這裡按照個人的理解做了一個匯總和分類,分享給大家。

推薦教學：《小程式開發》《小程式影片教學》

關於骨架屏(簡介)

骨架螢幕就是在頁面資料尚未載入前先向使用者展示頁面的大致結構，直到請求資料返回後再渲染頁面，補充進需要顯示的資料內容。常用於文章清單、動態清單頁等相對比較規則的清單頁面。
很多專案都有應用程式:ex:餓了麼h5版本,知乎,facebook等網站都有應用程式。
借個圖舉例如下:

兩類用途

簡介中作了關於用途的說明,但是仍然可以繼續細分:

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

• ##作為首螢幕渲染的最佳化.

第一類用途

#第一類用途需要自己寫骨架螢幕,推薦兩個成熟方便客製化的svg元件客製化為骨架螢幕的方案

• react-content-loader

• vue-content-loader

作為首屏渲染(自動化方案)

此方案是餓了麼在骨架螢幕的實踐中總結出的一套方案:

• #骨架螢幕的dom結構和css透過離線產生後建構的時候注入模板中的節點下面.

• 原理相關eleme骨架螢幕外掛程式實現原理

• 方案的專案位址:page-skeleton-webpack-plugin

• #使用時候的注意點:

1、cssUnit的配置: 需要使用自適應的單位,按照文檔給出的選擇範圍選,直接用 px 生成的比例會不合適

2、puppeteer有大概80M, 安裝的時候有可能不能一次下載成功.

• 原理:

透過 puppeteer 在服務端操控 headless Chrome 開啟開發中的需要產生骨架螢幕的頁面，在等待頁面載入

渲染完成之後，在保留頁面佈局樣式的前提下，透過對頁面中元素進行刪減或增添，對已有元素透過層疊樣
式進行覆蓋，這樣達到在不改變頁面版面下，隱藏圖片和文字，透過樣式覆蓋，使得其顯示為灰色塊。然後
將修改後的 HTML 和 CSS 樣式擷取出來，這樣就是骨架螢幕了.

其他方案

#結合ssr render/prerender來使用:

• 事先編寫好骨架螢幕元件透過ssr render 解析注入html檔案中(除了需要自己寫外其實過程類似於上面的自動化方案)參考文章

• 1中事先寫好的骨架螢幕元件可以用圖片取代(svg) ;或設計師設計好.

小程式的骨架螢幕

• 不存在預先渲染的概念,但是還是可以透過自己預先編寫骨架螢幕元件放在頁面中,等到非同步請求的資料回來後更新頁面。

相關教學推薦：《

CSS基礎教學》《PHP入門到精通》

#

以上是什麼是骨架螢幕（Skeleton Screen）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！