1. 程式人生 > >對骨架屏的研究

對骨架屏的研究

骨架屏簡介:

骨架屏就是在頁面資料尚未載入前先給使用者展示出頁面的大致結構,直到請求資料返回後再渲染頁面,補充進需要顯示的資料內容。常用於文章列表、動態列表頁等相對比較規則的列表頁面。

  1. 作為spa中路由切換的loading,結合元件的生命週期和ajax請求返回的時機來使用.
  2. 作為首屏渲染的優化.
通過 puppeteer 在服務端操控 headless Chrome 開啟開發中的需要生成骨架屏的頁面,在等待頁面載入 渲染完成之後,在保留頁面佈局樣式的前提下,通過對頁面中元素進行刪減或增添,對已有元素通過層疊樣 式進行覆蓋,這樣達到在不改變頁面佈局下,隱藏圖片和文字,通過樣式覆蓋,使得其展示為灰色塊。然後 將修改後的 HTML 和 CSS 樣式提取出來,這樣就是骨架屏了.   1.事先編寫好骨架屏元件通過ssr render 解析注入html檔案中(除了需要自己編寫外其實過程類似於上面的自動化方案)

2.事先編寫好的骨架屏元件可以用圖片代替 (svg) ,或者設計師設計好.