一份來自 Akamai 的研究報告顯示，在對 1048 名網(wǎng)購戶進行采訪后發(fā)現(xiàn)：

約 47% 的用戶期望他們的頁面在兩秒之內(nèi)加載完成。

如果頁面加載時間超過 3s，約 40% 的用戶會選擇離開或關(guān)閉頁面。

一直以來，為了提升用戶在頁面加載時的體驗，無論是 Web 還是 iOS、Android 的應(yīng)用中，前端開發(fā)工程師都做了許多工作。除了解決如何讓網(wǎng)頁展現(xiàn)速度更快的問題，還有很重要的一點就是提升用戶對加載等待時間的感知?！妇栈▓D」以及由其衍生出的各種加載動畫就是一類常見的解決方案，相信無論是開發(fā)者還是用戶對下面這個圖標(biāo)都不會陌生：

本文將要介紹的「骨架屏」則被視為菊花圖升級版的方案。受現(xiàn)有骨架屏方案的啟發(fā)，馬蜂窩電商前端研發(fā)團隊實現(xiàn)了一種自動化生成骨架屏的方法，并在馬蜂窩商城的多個頁面中實現(xiàn)應(yīng)用，取得了不錯的效果。

一、什么是骨架屏

骨架屏可以理解為在頁面數(shù)據(jù)尚未返回或頁面未完成完全渲染前，先給用戶呈現(xiàn)一個由灰白塊組成的當(dāng)前頁面大致結(jié)構(gòu)，讓用戶產(chǎn)生頁面正在逐漸渲染的感受，從而使加載過程從視覺上變得流暢。生成后的骨架屏頁面如下圖所示：

骨架屏的主要優(yōu)勢為：

1.用戶避免看到長時間的白頁

2.可以獲知頁面的大體結(jié)構(gòu)，減小用戶認(rèn)為頁面出錯而離開的機率

3.與菊花圖相比視覺更加流暢

二、常見的前端骨架屏方案

在選擇骨架屏之前，我們也考慮了一些其他的方法，比如能否通過服務(wù)端渲染(SSR)的方式來避開前端白屏?xí)r間的問題。但發(fā)現(xiàn)需要涉及項目過多，還會涉及服務(wù)的構(gòu)建與部署;或是通過 prerender-spa-plugin 提供簡單的預(yù)呈現(xiàn)，它對 SPA 支持友好，但需要額外的 webpack 配置，且因為包源的問題，下載時間過長，有時還會莫名失敗，等等，都因為種種原因最終放棄。

經(jīng)過一系列調(diào)研后，我們對業(yè)界常見的幾種骨架屏解決方案，以及它們的優(yōu)勢、不足進行了一個簡單的梳理。

1. UI 骨架屏圖

即通過 UI 提供符合頁面首頁樣式的圖來充當(dāng)骨架屏，將骨架屏 base64 圖片插入 root 根節(jié)點，在 webpack 打包時嵌入項目中。

這是一種簡單粗暴的方法，實現(xiàn)起來比較容易。但缺點也很明顯，就是需要 UI 設(shè)計師支持和開發(fā)介入，不能自動生成。

2. 手寫骨架屏

即通過手寫 HTML、CSS 的方式為目標(biāo)頁定制骨架屏。這種方式可以做到對頁面真實樣式的復(fù)刻。不過一旦由于各種原因?qū)е马撁鏄邮桨l(fā)生改變，就需要再改一遍骨架屏的樣式和布局，極大增加了維護的成本。

3. 自動生成靜態(tài)骨架屏

目前比較受關(guān)注的是餓了么開源的插件 page-skeleton-webpack-plugin，其具體實現(xiàn)原理為：

• 生成骨架屏

通過 Puppter 操控 handless Chrome 打開需要生成的骨架屏頁面，在等待頁面加載完成之后，保留頁面布局樣式的前提下，通過對頁面中元素進行增刪，對已有元素通過層疊樣式進行覆蓋，使其展示為灰白塊。然后將修改后的 HTML 和 CSS 提取出來，將頁面分為不同的塊區(qū)域，例如文本塊、圖片塊、按鈕塊、SVG、偽類元素塊等，分別對每個塊進行處理，使其盡量與原頁面保持一致。這里用到了 Puppetter page 實例的 addScriptTag 方法來將處理塊的腳本插入到 headless Chrome 打開的頁面當(dāng)中。

實際生成的骨架屏頁面與原頁面可能還會存在差距，插件通過 memory-fs 將骨架屏寫入內(nèi)存中，可以通過預(yù)覽頁面對生成的骨架屏進行二次編輯和效果預(yù)覽，修改完成后點擊生成按鈕就能生成一份新的骨架屏寫入到項目中。

借一張圖來說明：

• 插入骨架屏

骨架屏的 DOM 結(jié)構(gòu)和 CSS 通過離線生成后，在構(gòu)建時注入模板 (EJS) 中的節(jié)點下面，插入到 HTML 是在 after-emit 鉤子函數(shù)中進行。

page-skeleton-webpack-plguin 生成骨架屏的方案可以根據(jù)項目中不同的路由頁面生成相應(yīng)的骨架屏頁面，并將骨架屏頁面通過 webpack 打包到對應(yīng)的靜態(tài)路由頁面中。

它的不足之處在于：

• 實際使用過程中無法監(jiān)聽接口返回導(dǎo)致生成骨架屏的時機是否準(zhǔn)確
• 生成的頁面與業(yè)務(wù)人員寫的結(jié)構(gòu)質(zhì)量有直接關(guān)系，經(jīng)常出現(xiàn)需要手工二次調(diào)整的情況

在這樣的背景下，馬蜂窩電商研發(fā)前端團隊希望找一種在提升用戶體驗的同時，對開發(fā)更友好的骨架屏生成方式，能針對不同的業(yè)務(wù)場景自動生成出相似的骨架屏，并且實現(xiàn)自動注入。對于開發(fā)而言，只需要執(zhí)行一條命令，或者簡單配置，就可以生成骨架屏，不需要再考慮后續(xù)的維護工作。

在方案調(diào)研過程中，draw-page-structure 為我們的設(shè)計提供了靈感。

4. draw-page-structure

• 生成骨架屏：

// dps.config.js 
{ 
  url: 'https://baidu.com', 
  output: { 
    filepath: '/Users/famanoder/DrawPageStructure/example/index.html', 
    injectSelector: '#app' 
  }, 
  background: '#eee', 
  animation: 'opacity 1s linear infinite;', 
  // ... 
} 

根據(jù) URL 指定的線上地址，配合 Puppeteer 獲取當(dāng)前頁面的 DOM 結(jié)構(gòu)，并對其中元素節(jié)點生成骨架屏文件到 filepath 指定的文件里面，就可以生成骨架屏頁面，結(jié)果如下圖所示：

• 插入骨架屏

將上述生成的骨架屏文件插入到頁面根節(jié)點下面一般為 id="app" 的節(jié)點，然后在通用工具里提供主動銷毀骨架屏的方法，就可以幫助開發(fā)主動控制或銷毀骨架屏，顯示頁面真實內(nèi)容。

draw-page-structure 的設(shè)計思想很大程度上可以滿足我們的需求，不足的是只能對線上已經(jīng)存在的 URL 生成骨架屏，不支持開發(fā)環(huán)境。另外由于是自動生成，當(dāng)頁面存在重定向(如果未登錄重定向到登錄頁面)的情況時，生成的骨架屏可能與預(yù)期不一致。而且它的內(nèi)部實現(xiàn)并不完善，可能導(dǎo)致某些結(jié)構(gòu)復(fù)雜的頁面下生成的骨架屏需要二次優(yōu)化調(diào)整。

于是，我們開始了進一步的探索。

三、對開發(fā)更友好的實現(xiàn)方案

1. 設(shè)計思路

基于對現(xiàn)有方案的借鑒，我們想到了在配置文件中指定要生成骨架屏的頁面 URL 和文件輸出的目錄，運行時讀取配置文件中的配置項，通過 Pupeteer 打開指定的頁面并注入 evalDom.js 的方法。因為此 JS 是在 Pupeteer 里面執(zhí)行的，所以可以獲取到當(dāng)前頁面完整的 DOM 結(jié)構(gòu)，這給我們留下了非常大的發(fā)揮空間。

最初我們是從獲取到的 DOM 結(jié)構(gòu)中的 body 標(biāo)簽出發(fā)，遞歸去處理頁面上的所有節(jié)點，處理完成后用生成的 DIV 替換原有元素的位置。第一版方案中通過 getBoundingClientRect 和 getComputedStyle 的方法來獲取元素所有計算屬性和相對于視口的寬高和位置，然后結(jié)合元素本身的樣式屬性遞歸渲染，保留頁面原始 DOM 嵌套層次。

但由于能夠決定元素位置的屬性實在太多，如 position，z-index、width、height、top、display、box-sizing、flex 等都需要考慮，導(dǎo)致無法聚焦對頁面 DOM 結(jié)構(gòu)處理的邏輯，而且這些屬性在處理完成后還需要加到最終生成骨架屏節(jié)點的 style 上，這樣骨架屏文件可能比原來完整的頁面結(jié)構(gòu)還大，這肯定不是我們希望的。

優(yōu)化后的方案是用 getBoundingClientRect 和 getComputedStyle 獲取元素相關(guān)屬性，然后直接通過絕對定位的方式來生成最終的骨架屏節(jié)點。這樣在頁面上最終需要的屬性主要是 position、z-index、top、left、width、height、background、border-radius。除了無法保證頁面原始的 DOM 結(jié)構(gòu)，其它需求基本都可以滿足，也更加聚焦于節(jié)點的處理。

主要實現(xiàn)流程如下圖：

該方案目前主要應(yīng)用于馬蜂窩電商業(yè)務(wù)的多頁面項目中，包括下單頁、簽證頁等，以下單頁為例，展示效果如下圖：

2. 實現(xiàn)方式

• 生成骨架屏

(1) config.js 配置

const dpsConfig = { 
   // 默認(rèn)生成位置為當(dāng)前項目目錄skeleton文件夾，已有骨架屏頁面不會再次生成，新頁面配置只需要添加新條目即可 
    visa_guide: { 
        url: 'https://w.mafengwo.cn/sfe-app/visa_guide.html?mdd_id=10083', // 必填項 
    }, 
    call_charge： { 
        url: 'http://localhost:8081/sfe-app/call_charge.html?rights_id=25', // 必填項 待生成骨架屏頁面的地址，用百度（https://baidu.com）試試也可以 
        //url:'https://www.baidu.com', 
        device: 'pc', // 非必填，默認(rèn)mobile 
        background: '#eee', // 非必填 
        animation: 'opacity 1s linear infinite;', // 非必填 
        headless:false, // 非必填 
        customizeElement: function(node) { // 非必填 
            //返回值枚舉如果是true表示不會向下遞歸到這層為止，如果返回值是一個對象那么節(jié)點的檔子就按照對象里面的樣式來繪制 
            //如果返回值為0表示正常遞歸渲染 
            //如果返回值為1表示渲染當(dāng)前節(jié)點不在向下遞歸 
            //如果返回值為2表示對當(dāng)前節(jié)點不作任何處理 
            if(node.className === 'navs-bottom-bar'){ 
                return 2; 
            } 
            return 0; 
        }, 
        showInitiativeBtn: true,// 非必填 如果此值設(shè)置為true表示開發(fā)需要主動觸發(fā)生成骨架屏了，此時headless需設(shè)置為false 
        writePageStructure: function(html) { // 非必填 
            // 自己處理生成的骨架屏 
            // fs.writeFileSync(filepath, html); 
            // console.log(html) 
        }, 
        init: function() { // 非必填 
            // 生成骨架屏之前的操作，比如刪除干擾節(jié)點 
        }   
    } 
} 
 
 
module.exports = dpsConfig; 

(2)Pupeteer 新打開頁面并返回瀏覽器實例、openPage

const ppteer = require('puppeteer'); 
const { log, getAgrType } = require('./utils'); 
const insertBtn = require('../insertBtn'); 
 
 
const devices = { 
  mobile: [375, 667, 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'], 
  ipad: [1024, 1366, 'Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1'], 
  pc: [1200, 1000, 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'] 
}; 
 
async function pp({device = 'mobile', headless = true, showInitiativeBtn = false}) { 
 
  const browser = await ppteer.launch({headless});//返回browser實例 
 
  async function openPage(url, extraHTTPHeaders) { 
    const page = await browser.newPage(); 
    let timeHandle = null; 
 
   if(showInitiativeBtn){ 
    browser.on('targetchanged', async ()=>{//監(jiān)聽頁面路由變化，并獲取當(dāng)前標(biāo)簽頁的最新的頁面，在showInitiativeBtn為true時插入按鈕由開發(fā)控制主動生成骨架屏 
      const targets = await browser.targets(); 
      const currentTarget = targets[targets.length - 1] 
      const currentPage = await currentTarget.page(); 
 
      clearTimeout(timeHandle) 
      setTimeout(()=>{ 
        if(currentPage){ 
          currentPage.evaluate(insertBtn); 
        } 
      },300) 
    }) 
   } 
    try{ 
      let deviceSet = devices[device]; 
      page.setUserAgent(deviceSet[2]); 
      page.setViewport({width: deviceSet[0], height: deviceSet[1]}); 
 
      if(extraHTTPHeaders && getAgrType(extraHTTPHeaders) === 'object') { 
        await page.setExtraHTTPHeaders(new Map(Object.entries(extraHTTPHeaders))); 
      } 
      await page.goto(url, { 
        waitUntil: 'networkidle0'//不再有網(wǎng)絡(luò)連接時觸發(fā)（至少500ms后） 
      }); 
    }catch(e){ 
      console.log('\n'); 
      log.error(e.message); 
    } 
    return page; 
  } 
  return { 
    browser, 
    openPage 
  } 
}; 
 
module.exports = pp; 

(3)在瀏覽器環(huán)境里執(zhí)行 evalDom.js 和 evalDom.js 中處理 node 節(jié)點的主要邏輯

agrs.unshift(evalScripts);//evalScripts = require('../evalDOM');在pupeteer里執(zhí)行evalDom.js并將config.js里配置的參數(shù)傳遞給evalDom 
html = await page.evaluate.apply(page, agrs); 

//evalDom.js主要邏輯 
startDraw: function () { 
    const $this = this; 
    const nodes = this.rootNode.childNodes; 
    this.beforeRenderDomStyle(); 
    function childNodesStyleConcat(childNodes) { 
        for (let i = 0; i < childNodes.length; i++) { 
            const currentChildNode = childNodes[i];//當(dāng)前子節(jié)點 
            //有哪些節(jié)點要跳過繪制骨架屏的過程 
 
            if ($this.shouldIgnoreCurrentElement(currentChildNode)) { //是否應(yīng)該忽略當(dāng)前節(jié)點，不采取任何措施。后續(xù)這個地方可以由用戶指定哪些節(jié)點應(yīng)該被略去，todo 
                continue; 
            } 
 
            const backgroundHasurl = analyseIfHadBackground(currentChildNode); 
            const hasDirectTextChild = childrenNodesHasText(currentChildNode);//判斷當(dāng)前元素是不是有直接的子元素并且此元素是Text 
            if ($this.customizeElement && $this.customizeElement(currentChildNode) !== 0 && $this.customizeElement(currentChildNode) !==  undefined) { 
                //開發(fā)者自定義節(jié)點需要渲染的樣子，默認(rèn)返回false表示使用正常遞歸的算法來處理。如果返回值是true表示不會在向下遞歸，如果返回值是一個對象那么表示開發(fā)需要自定義樣式此時直接繪制就好。todo 
                if (getArgtype($this.customizeElement(currentChildNode)) === 'object') { 
                    console.log('object'); 
                    //此處如果返回一個對象表示對象要自定義最后繪制的對象 
                } else if ($this.customizeElement(currentChildNode) === 1) { 
                    //如果此時返回true，表示此節(jié)點要過濾 
                    getRenderStyle(currentChildNode); 
                } else if ($this.customizeElement(currentChildNode) === 2){ 
                    continue ; 
                } 
                continue; 
            } 
            if (backgroundHasurl || analyseIsEmptyElement(currentChildNode) || hasDirectTextChild || shouldDrawCurrentNode(currentChildNode)) { //如果當(dāng)前元素是內(nèi)聯(lián)元素或者當(dāng)前元素非內(nèi)聯(lián)元素，但是不包含子節(jié)點或者子節(jié)點都是內(nèi)聯(lián)元素的話那么我們就在當(dāng)前的骨架屏上繪制此節(jié)點。                    
                getRenderStyle(currentChildNode, hasDirectTextChild); 
            } else if (currentChildNode.childNodes && currentChildNode.childNodes.length) { //如果當(dāng)前節(jié)點包含子節(jié)點 
                //遞歸 
                childNodesStyleConcat(currentChildNode.childNodes); 
            } 
        } 
    } 
    childNodesStyleConcat(nodes); 
    return this.showBlocks(); 
}, 

• 上述 rootNode 為根節(jié)點，默認(rèn)為 document.body 或者可以由開發(fā)指定
• 主要邏輯為判斷當(dāng)前節(jié)點是否需要忽略、是否設(shè)置了背景圖片、是否含有文本信息、開發(fā)是否指定了當(dāng)前節(jié)點的處理方式等，對滿足條件的渲染其對應(yīng)的骨架屏節(jié)點，否則處理當(dāng)前節(jié)點的子節(jié)點
• 所有節(jié)點處理完成后，調(diào)用 showBlocks 將生成的骨架屏節(jié)點拼接位 HTML 字符串，以便后續(xù)處理

(4) getRenderStyle 生成骨架屏樣式

const styles = [ 
    'position: fixed', 
    `z-index: ${zIndex}`, 
    `top: ${top}%`, 
    `left: ${left}%`, 
    `width: ${width}%`, 
    `height: ${height}%`, 
    'background: '+(background || '#eee'), 
]; 
const radius = getStyle(node, 'border-radius'); 
radius && radius != '0px' && styles.push(`border-radius: ${radius}`); 
blocks.push(`<div style="${styles.join(';')}"></div>`); 

zIndex、top、left、width、height 為處理后的屬性，然后把所有骨架屏節(jié)點的字符串都 push 進 blocks 這個數(shù)組中。

(5) 最終生成骨架屏的 HTML 文件如下：

<html><head></head> 
    <body><div style="position: fixed;z-index: 999;top: 89.805%;left: 4.267%;width: 91.467%;height: 11.994%;background: #eee"></div></body></html> 

• 插入骨架屏

在項目入口 index.html 文件內(nèi)添加

<body> 
    <div id="app"> 
    </div> 
    <% if(htmlWebpackPlugin.options.hasSkeleton) { %> 
        <div id="skeleton"><!-- 骨架屏通過htmlWebpackPlugin在啟動打包的時候自動注入 --> 
            <%= htmlWebpackPlugin.options.loading.html %> 
        </div> 
    <% } %> 
    <!-- built files will be auto injected --> 
</body> 

四、總結(jié)

目前，該方案已經(jīng)支持由開發(fā)主動控制骨架屏生成時間，這樣就避免了頁面重定向的過程中無法生成正確的骨架屏，同時可以支持在本地開發(fā)時生成骨架屏。未來我們將實現(xiàn)支持開發(fā)自定義生成骨架屏節(jié)點的樣式和組件骨架屏的生成，并優(yōu)化 evalDom.js 內(nèi)部節(jié)點過濾、處理的算法。敬請期待!

本文作者：康岑波、孫昊男，馬蜂窩電商平臺前端研發(fā)工程師。

【本文是51CTO專欄作者馬蜂窩技術(shù)的原創(chuàng)文章，作者微信公眾號馬蜂窩技術(shù)(ID：mfwtech)】 

戳這里，看該作者更多好文