一、介紹
骨架屏在之前是個很熱門的概念，現在大部分APP都有骨架屏的應用，即使我們不知道骨架屏是什麼，但是一定見識過它的效果。
如上圖，骨架屏就是在頁面內容加載完成前，以簡單的純色塊表現出頁面的大致結構。其本意與以前廣泛使用的等待頁面加載的進度條、菊花圖等手段一致，都是爲了優化用戶體驗。不同之處在於，骨架屏的出現似乎更多的是爲了SPA的首屏渲染，這裏也介紹一下兩種頁面渲染方式區別。
二、服務端渲染與客戶端渲染
1.服務端渲染
服務端渲染方式下，瀏覽器發送請求，服務器接收請求後對HTML進行渲染，並將渲染完成的頁面返回給瀏覽器，瀏覽器在接收到渲染完成的HTML頁面後將其顯示出來，但此時頁面還不能進行交互，之後再從服務器下載JS文件以完成對整個頁面的加載，用戶能夠更快地看到網頁內容。
2.客戶端渲染
客戶端渲染則把所有的任務都交由瀏覽器完成。瀏覽器對服務器發送請求得到該網頁的所有靜態資源並下載，通過瀏覽器的渲染引擎和JS引擎處理靜態資源，渲染出呈現完整內容與功能的頁面。將服務器壓力分擔給客戶端的同時，也使得用戶需等待js文件加載，導致頁面呈現可視內容的時間推遲。
由於SPA由JS驅動，也必然存在客戶端渲染的弊端。之前看過對SPA進行服務端渲染的實現，大致原理爲在服務端使用puppteer打開目標網頁，提前對其進行渲染，再將頁面返回給客戶端，具體實現可以自行去了解。
三、骨架屏實現方式
1.實現方式介紹
1）手寫HTML、CSS。最簡單粗暴的方法，也是最初使用骨架屏的方式，對於複雜且常更新的頁面來說不太適用，但也不是完全一無是處。vue-content-loader這一插件適用於vue項目中，省去了寫樣式的步驟，其實現了矩形與圓形兩種形狀的組件，只需在引用組件時傳入座標及尺寸，且含有facebook、ins等等多種風格的骨架樣式。代碼示例如下：
2）讓UI設計對應頁面的骨架屏圖片，雖然也是有被在生產中採用的方式，但個人感覺在現在這種方式比較雞肋，不過也有其適用場景。
3）自動化工具。沒有深入研究，最終也沒成功實現，但也介紹一下兩個自動化實現骨架屏的插件。
vue-skeleton-webpack-plugin，使用之前介紹過的服務端渲染的方式，在html-webpack-plugin-before-html-processing事件回調中注入渲染結果。
page-skeleton-webpack-plugin，同樣通過 puppeteer 在服務端打開頁面，頁面加載渲染完成後，在保留頁面佈局樣式的前提下，通過對頁面中元素進行刪減或增添，隱藏圖片和文字，對已有元素通過層疊樣式進行覆蓋，使得其展示爲灰色塊。提取出修改後的 HTML 和 CSS 樣式。
2.vue、mpvue中的實踐
在vue中實現骨架屏除服務端渲染外，其實現思路爲在入口的index.html中<div id="app"></div>塊中寫入骨架屏，在頁面渲染完成後則會將該塊中的內容替換爲渲染完成的結果。
由於vue、mpvue、原生小程序的骨架屏實現不是所有方式都完全通用，在vue實踐中使用了vue-content-loader單獨寫了一個骨架屏組件，再通過vue-skeleton-webpack-plugin插入，實現效果如下：
在mpvue中的實現使用了現成的實現方式，倉庫地址：https://github.com/jayZOU/skeleton。其本質上也是手寫的組件，通過wx:if或v-if控制組件的顯示與否，只適用於等待請求數據的過程，並不能完全解決首屏渲染的問題。實現效果如下：
四、總結
以上均爲學習實踐過程中總結他人文章後的個人見解，水平有限，有問題之處歡迎指出，也望本文對骨架屏學習者有所幫助。