吸引更多的注意力,內容還在加載中,相比於之前的Loading動畫,骨架屏頁面更容易讓用戶產生一種錯覺,頁面快加載完了。骨架屏實現原理很簡單,就是通過佔位線框元素,漸進式加載數據。
不足:
增加程序運行負擔,無法根本解決頁面加載性能問題。
開發工作量大,對特定頁面數據額外繪製動畫效果。
總結:骨架屏適用一些固定位置元素,不適用於一些動態位置元素。(比如:列表渲染數據) 建議採用Loading動畫+懶/預加載技術提高用戶體驗與性能。
經觀察,大多數網站動態數據的骨架渲染也就渲染成一條。個人猜測,列表渲染之所以渲染一條,多條不合適。假設骨架屏渲染三條佔位元素,結果數據返回一條數據,那就尷尬了。
(固定位置元素,且數據條數與加載完成一致,注意:圖片仍會消耗性能,考慮在app端本地存儲下使用)
實現:頁面元素默認使用(Skeleton Screens)類,加載完數據後清除