由此引申出一系列的優化方法，骨架屏也因此被提出。
fcp優化
在 google 提出的以使用者為中心的四個頁面效能衡量指標中，fp/fcp可能是開發者們最熟悉的了：
為了優化首屏渲染時間這個指標，減少白屏時間，前端仔們想了很多辦法：
加速或減少http請求損耗：使用cdn載入公用庫，使用強快取和協商快取，使用網域名稱收斂，小使用base64代替，使用get請求代替post請求，設定 access-control-max-age 減少預檢請求，頁面內跳轉其他網域名稱或請求其他網域名稱的資源時使用瀏覽器prefetch預解析等；
延遲載入：非重要的庫、非首屏延遲載入，spa的元件懶載入等；
減少請求內容的體積：開啟伺服器gzip壓縮，js、css檔案壓縮合併，減少cookies大小，ssr直接輸出渲染後的html等；
瀏覽器渲染原理：優化關鍵渲染路徑，盡可能減少阻塞渲染的js、css；
優化使用者等待體驗：白屏使用載入進度條、菊花圖、骨架屏代替等；
這裡要介紹的就是優化使用者等待體驗的骨架屏，它可以被視為是原來載入菊花圖的一種公升級版，結合傳統的首屏優化方法對應用進行優化可以達到不錯的效果。
骨架屏骨架屏可以理解為是當資料還未載入進來前，頁面的乙個空白版本，乙個簡單的關鍵渲染路徑。可以看一下下面facebook的骨架屏實現，可以看到在頁面完全渲染完成之前，使用者會看到乙個樣式簡單，描繪了當前頁面的大致框架的骨架屏頁面，然後骨架屏中各個佔位部分被實際資源完全替換，這個過程中使用者會覺得內容正在逐漸載入即將呈現，降低了使用者的焦躁情緒，使得載入過程主觀上變得流暢。
可以看一下下面的示例圖，第乙個為骨架屏，第二個為菊花圖，第三個為無優化，可以看到相比於傳統的菊花圖會在感官上覺得內容出現的流暢而不突兀，體驗更加優良。
生成骨架屏的方法
生成骨架屏的方式主要有：
手寫html、css的方式為目標頁定製骨架屏 做法可以參考vue-skeleton-webpack-plugin的具體使用參考 vue-style-codebase，主要關注build目錄的幾個檔案，線上demo 在chrome的devtools中把network的網速調為gast 3g / slow 3g就能看到效果了~
****：
Vue單頁面骨架屏實踐
骨架屏的作用主要是在網路請求較慢時，提供基礎佔位，當資料載入完成，恢復資料展示。這樣給使用者一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。這裡主要通過 為大家展示如何一步步做出這樣乙個骨架屏 本元件庫骨架屏的實現也是基...
Vue頁面骨架屏
小公尺 vue專案中的入口index.html只有簡單的內容 當js執行完之後，會用vue渲染成的dom將div root完全替換掉。我們在div root中加入模擬骨架屏，在chrome開發者工具調整網速 這裡是骨架屏 由此可知，將骨架屏內容直接插入div root中即可實現骨架屏。我們需要骨架屏...
暑期實踐 嵌入式串列埠屏專案
暑期在永珍融通公司參與乙個嵌入式的專案,參與時間近兩個月,昨天正式結束,記錄一下這個時間節點.在這個專案中我主要負責的部分是串列埠屏的介面顯示,簡單的說就是用lpc的板子通過串列埠給螢幕傳送指令,動態控制螢幕上的顯示內容.串列埠通訊是指資料一位一位的按順序通訊,通訊線路非常簡單,線路成本低,適合遠距...