前言
現(xiàn)在的前端開(kāi)發(fā)領(lǐng)域茎辐，都是前后端分離宪郊，前端框架的主流都是SPA，MPA;這就意味著拖陆，頁(yè)面渲染以及等待的白屏?xí)r間弛槐，成為我們需要解決的問(wèn)題點(diǎn)；而且大項(xiàng)目依啰，這個(gè)問(wèn)題就尤為突出乎串。
Webpack可以實(shí)現(xiàn)按需加載，減少我們首屏需要加載的代碼體積速警；在配合CDN以及一些靜態(tài)代碼（框架叹誉，組件庫(kù)等等...）緩存技術(shù)鸯两，可以很好的緩解這個(gè)加載渲染的時(shí)間過(guò)長(zhǎng)的問(wèn)題。
即便如此长豁，首屏加載仍然存在加載以及渲染等待時(shí)間的問(wèn)題钧唐；
目前，常見(jiàn)的解決方案是使用骨架屏技術(shù)蕉斜，包括很多原生APP逾柿，在頁(yè)面渲染的時(shí)候，也會(huì)使用骨架屏宅此。
一机错、什么是骨架屏
舉個(gè)??：
骨架屏就是在頁(yè)面資源尚未加載完成以及渲染尚未完成 時(shí)需要先給用戶的展示頁(yè)面大致結(jié)構(gòu)。直到資源加載完成以及渲染完成后 使用渲染的頁(yè)面父腕。
常用例子： 文章列表弱匪，動(dòng)態(tài)列表頁(yè)等相對(duì)比較規(guī)則的頁(yè)面。
實(shí)戰(zhàn)項(xiàng)目例子： 餓了么h5版本璧亮、知乎萧诫、Facebook等都有應(yīng)用。
二枝嘶、什么是骨架屏
- 首屏：可以在
index.html模版中手寫骨架屏相關(guān)代碼帘饶。 - 其他頁(yè)面：可以利用UI提供SVG圖
- 使用組件庫(kù)中的骨架屏組件：
React: Material-UI中的Skeleton 骨架屏、Vue: Ant Design of Vue的Skeleton 骨架屏等 - 可以使用餓了么團(tuán)隊(duì)根據(jù)頁(yè)面樣式生成的骨架屏工具
page-skeleton-webpack-plugin
按照用途可以細(xì)分為兩類
2.1作為SPA中路由切換的loading
需要自己編寫骨架屏群扶，推薦兩個(gè)成熟方便定制的svg組件去定制骨架屏
2.2作為首屏渲染的優(yōu)化（自動(dòng)化方案）
該方案是餓了么在骨架屏中總結(jié)出的一套方案：
- 骨架屏的dom結(jié)構(gòu)和css通過(guò)離線生成后構(gòu)建的時(shí)候注入模版中的節(jié)點(diǎn)下面及刻。
- 如果你的項(xiàng)目是基于
vue-cli腳手架構(gòu)建的，那么餓了么團(tuán)隊(duì)的page-skeleton-webpack-plugin是最佳之選竞阐，如果不是缴饭，那么可以選擇vue-router提供的vue-server-renderer。
page-skeleton-webpack-plugin的原理
通過(guò)無(wú)頭瀏覽器puppeteer打開(kāi)要生成骨架屏的頁(yè)面
等待頁(yè)面渲染完后注入提取骨架屏的腳本（注意：一定要等頁(yè)面完全渲染完骆莹，不然提取的DOM不完整）
對(duì)頁(yè)面中元素進(jìn)行刪減或增添颗搂，對(duì)已有元素通過(guò)層疊樣式進(jìn)行覆蓋，這樣達(dá)到在不改變頁(yè)面布局下幕垦，隱藏圖片和文字丢氢，通過(guò)樣式覆蓋，使得其展示為灰色塊先改。然后將修改后的 HTML 和 CSS 樣式提取出來(lái)生成骨架屏卖丸。
優(yōu)勢(shì)：
- 支持多種加載動(dòng)畫
- 針對(duì)移動(dòng)端 web 頁(yè)面
- 支持多路由
- 可定制化，可以通過(guò)配置項(xiàng)對(duì)骨架塊形狀顏色進(jìn)行配置盏道，同時(shí)也可以在預(yù)覽頁(yè)面直接修改骨架頁(yè)面源碼
- 幾乎可以零配置使用
三、骨架屏的具體實(shí)現(xiàn)
3.1在模版中來(lái)實(shí)現(xiàn)骨架屏
以vue項(xiàng)目為例载碌，默認(rèn)情況下猜嘱，我們的模版index.html中有一個(gè)id為app的div元素<div id="app"></div>,最終應(yīng)用程序會(huì)替換到該div元素衅枫。
利用這個(gè)特性，在index.html中的id#app的元素內(nèi)實(shí)現(xiàn)骨架屏朗伶，程序渲染完成后弦撩，就會(huì)替換掉骨架屏內(nèi)容。
也就是首屏论皆，可以在index.html中實(shí)現(xiàn)骨架屏樣式益楼。如果不手寫樣式，可以用base64圖片來(lái)代替点晴。（小米商城的移動(dòng)端頁(yè)面）
3.2自動(dòng)生成并自動(dòng)插入靜態(tài)骨架屏
- 餓了么開(kāi)源插件：page-skeleton-webpack-plugin
- vue-skeleton-webpack-plugin
結(jié)束語(yǔ)
總結(jié)：大功告成????????????????????????????????????????
