(碼上打卡特約蘇寧雲商資深前端)
很久沒寫東西了，想了很久才確定了這個主題。對於程序員來說，如何提升用戶體驗，是一個一直存在的問題，今天主要跟大家探討一下提升用戶體驗的方法-骨架屏，骨架屏的技術其實並不新鮮，很多程序員都接觸過，接下來我們就來細說一下什麼是骨架屏，以及如何實現。
1、什麼是骨架屏？
骨架，用作支持某物（如文學作品或有機體的一部分）的結構、基礎或輪廓的支架。這是骨架的定義，骨架屏實際上是指頁面的一個整體結構，在頁面內容未加載之前，我們先展示頁面的整體結構，這些結構由圖形佔位符組成，當頁面加載完成之後，再把這些佔位符替換掉。以下是餓了麼H5頁面的骨架屏展示。 2、如何實現骨架屏？
這裡不會去羅列代碼，主要提供一下實現思路。對於vue項目來說，我們知道html文件中只有一個div#app元素，其餘都是通過vue創建，所以在js未加載之前，頁面處於空白狀態，如果我們在div#app中加入頁面整體結構佔位符，這樣在js未加載完成之前，頁面顯示的是這些佔位符（骨架屏），這樣對於用戶來說，能看到頁面正在努力加載的過程，這樣很好的提升了用戶體驗，下面我們來說一下兩種實現方式。（1）自己動手一步一步實現骨架屏
主要過程
1、創建Skeleton.vue，該文件即為骨架屏的代碼，用於後續注入
到div#app中。
2、創建skeleton.entry.js入口文件，用於webpack打包
3、配置webpack，新建webpack.skeleton.conf.js文件，此時
需要用到vue-server-renderer插件，該插件用於服務端渲染，
我們用於打包出node環境運行的js，在利用
vue-server-renderer來把佔位符注入div#app中
4、新建node skeleton.js，該js就是利用
vue-server-renderer，之前打包好的骨架屏注入到html中，
包括css和html
具體代碼實現請參照：
https://segmentfault.com/a/1190000014832185
（2）利用vue-skeleton-webpack-plugin插件
該方式其實和第一種方式很相似，具體使用可以參考：https://lavas.baidu.com/guide/v2/webpack/vue-skeleton-webpack-plugin（3）利用page-skeleton-webpack-plugin插件
該插件可以自動生成骨架屏。原理說明：利用puppeteer在服務端操控headless Chrome打開需要生成骨架屏的頁面，頁面渲染完以後,對頁面中的一些元素進行刪減、添加、覆蓋。這樣就能在不改變頁面佈局的同時，隱藏掉需要動態加載的內容。具體實現，請參照：https://www.colabug.com/2530634.html分享到:
閱讀更多 碼上打卡 的文章
