對於前端來說，最重要的莫過於使用者體驗了，這次我們聊一聊骨架屏 - skeleton screen
我們平常對於需要請求載入的內容，可能用的比較多的是loading動畫，比如在內容區域放乙個菊花圖，當請求結束，並且render tree構造完成後，將菊花圖移除，展示使用者想看的內容。雖然這種方式沒啥缺點，但是現在更多的**開始使用骨架屏代替，因為它能帶過來更好的使用者體驗。
我們看幾個例子：
jira
slack
上圖展示中，我們可以看到每個site從骨架圖到真實內容的乙個變化。如果你細心一點你會發現，不同site對於骨架圖的block位置是不一致的：
不過他們都有乙個共同點，就是採用簡約的方式布局，我們可以以此為例，創造出獨一無二的風格，來提高使用者體驗和加強品牌的風格，我想這會比乙個loading logo帶來更好的效果。
上面簡單的介紹了一下骨架圖，接下來我們來說一下具體實現吧。
優先我們實現乙個簡單的帶有loading效果的骨架結構：
效果如下：
餓了麼骨架圖方案
ssr，請求後用puppeteer插入script生成當前頁的骨架圖，或者build的時候直接生成（個人覺得應該是這種），然後插入到根元素內，然後資料載入後直接隱藏並展示真實資料
分塊，對於，將採用最小大小尺寸 1 * 1的純色gif圖，然後進行拉伸
資料請求後對骨架進行隱藏等操作
uniapp實現骨架屏
前言 使用者在等待資料渲染的時候，有可能因為網路速度慢，手機硬體等問題，造成等待時間延長，使得使用者體驗不好。之前的做法是放個載入中的圖示，而現在是直接根據頁面原有元素繪製圖形的方式，讓使用者有種頁面就快渲染好的錯覺。載入過程效果圖 如圖，從圖一到圖二，最底部多出了乙個動態載入的骨架，模擬同一頁面多...
如何設計出優美的Web API？
熱文索引，堅持原創不易，請小夥伴們不吝 推薦 支援 1.程式設計師必須掌握的效能調優 x y z 2.程式設計師必須懂的架構入門課 1 2 3 3.如何把單體式應用拆解成微服務？上 4.如何把單體式應用拆解成微服務？下 5.如何寫好產品幫助文件？web api的應用場景非常豐富，例如 將已有系統的功...
React 如何實現骨架屏的展示 Suspense
react新增了乙個功能 suspense元件，幫助我們 等待 目標 載入，並且可以直接指定乙個載入的介面 像是個 spinner 讓它在使用者等待的時候顯示 一 引入 suspense import react,from react 二 使用 suspense 載入的內容 三 注意的點 僅處理介面...