【小程序】小程序性能探索----骨架屏

骨架屏是什麼？

在Goole提出的以用戶爲中心的四個頁面性能衡量指標中，FP/FCP(首屏渲染)。

 

關於儘快渲染出首屏，減小白屏時間，常見的優化方式大體有如下幾種：

1. 優化關鍵渲染路徑，儘量減小阻塞渲染的JavaScript和CSS，常見作法包括使用async/defer讓瀏覽器下載JavaScript的同時不阻塞HTML解析，內聯頁面關鍵部分的 樣式 

2. 使用Service Worker 緩存AppShell，加快後續訪問速度。

3. 使用HTTP/2 Server Push,幫助瀏覽器今早發現靜態資源，減小請求數。淺談HTTP/2 Server Push

骨架屏充分利用了前兩點。

實現思路

從H5生成骨架屏方案提及，總得來講H5生成骨架屏的方案有2種

1. 徹底靠手寫HTML和CSS方式給每一個頁面定製一套骨架屏

2. 利用預渲染的方式生成靜態骨架屏

第一套方案，無疑是最簡單最直白的方式，缺點也很明細，加入頁面佈局有修改的話，那麼除了修改業務代碼以外還須要額外修改骨架屏，增長了維護的成本。

第二套方案，必定程度上改善了第一套方案帶來的維護成本增長的缺點，主要仍是使用工具預渲染頁面，獲取到DOM節點和樣式，保留頁面結構，覆蓋樣式，生成灰色塊蓋在原有文本、圖片或者是canvas等節點上面，最後將生成的HTML和CSS打包出來，就是一個帶有骨架屏的頁面。最後再利用webpack工具將生成的骨架屏插入到HTML頁面，詳細的話能夠看看餓了麼的分享。

小程序生成骨架屏

1. 預渲染

2. 節點

 咱們看小程序官網api給的例子

 實現方法： 咱們根據class或者id獲取節點信息，而後手動添加須要處理的形狀，約定2個特殊的class爲獲取節點的標記，在組件裏進行相應的繪製就能夠了。

SelectQuery NodesRef.boundingClientRect(function callback) 添加節點的佈局位置的查詢請求，相對於顯示區域，以像素爲單位。其功能相似於DOM的getBoundingClientRect

這裏咱們須要使用官網的SelectorQuery的selectAll()和exec(function callback)執行全部請求，請求結果按請求次序構成數組

如今咱們拿一個簡單的頁面試一下

添加自定義class

component組件生命週期

1. 獲取首屏的佈局位置

 

打印結果：

2. 接下來咱們須要將首屏可視區域的寬高，賦值到咱們的組件裏

 

 大功告成啦

 

如今咱們利用骨架屏這個小組件，寫一下日誌demo的首屏渲染

 

其中日誌列表是請求數據，咱們只須要對其進行初始渲染便可。

 1.   引入skeleton組件

 2.   將列表容器(能夠是最外層容器也能夠是列表的次級容器)加上skeleton，列表的class加上skeleton-rect

 

此時我遇到了一個問題，就是有時候從新編譯，找不到skeleton-rect，可是能找到他的最外層容器。最後發現是因爲我沒有在組件里加wx:key致使的。加上就能夠了。

注意：因爲骨架屏組件是經過定位來

如今讓咱們暢快的用骨架屏優化用戶體驗吧！！！