title: skeleton-screen date: 2019-01-14 19:33:18 tags: javascript
背景及意義
眾所周知，在網際網路資訊過載的時代，每個使用者的注意力集中時間也越來越短，如果在web網頁開啟的瞬間就能吸引住使用者的眼球，是每一個前端開發人員都需要仔細考慮的
我們常見的web效能優化，在於提高頁面的載入速度，保證我們的頁面儘快run起來，但是對於介面返回資料較慢的情況下，新增一個動態的skeleton loading可以有效的向使用者傳遞'頁面正在載入'這一有效資訊，而不是讓使用者不知所措，失去耐心，最終選擇離開
適用的場景
- 弱網環境，或後端介面業務邏輯相對複雜，需要一段時間才會返回資料
- 需要大量後端資料渲染的圖文頁面，最好是具有規律性的卡片或列表資訊
- 提前設定好和資料正常展示時相等寬高的佔點陣圖片，也避免了頁面的reflow重新佈局，優化web效能
主角登場
今天我推薦的神奇就是create-content-loader，它支援react、vue主流框架，支援線上自定義骨架屏樣式，使用起來十分方便