日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
對開發(fā)友好的前端骨架屏自動生成方案

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

專業(yè)領域包括網站制作、成都網站設計、電子商務商城網站建設、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網站設計及系統(tǒng)開發(fā)公司不同，成都創(chuàng)新互聯(lián)公司的整合解決方案結合了幫做網絡品牌建設經驗和互聯(lián)網整合營銷的理念，并將策略和執(zhí)行緊密結合，為客戶提供全網互聯(lián)網整合方案。

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

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

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

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

一、什么是骨架屏

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

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

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

2.可以獲知頁面的大體結構，減小用戶認為頁面出錯而離開的機率

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

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

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

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

1. UI 骨架屏圖

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

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

2. 手寫骨架屏

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

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

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

  • 生成骨架屏

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

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

借一張圖來說明：

  • 插入骨架屏

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

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

它的不足之處在于：

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

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

在方案調研過程中，draw-page-structure 為我們的設計提供了靈感。

4. draw-page-structure

  • 生成骨架屏：
 
 
 
 
    
  
  
  
  
  1. // dps.config.js 
    2.   
  
  
  
  2. { 
    3.   
  
  
  
  3.   url: 'https://baidu.com', 
    4.   
  
  
  
  4.   output: { 
    5.   
  
  
  
  5.     filepath: '/Users/famanoder/DrawPageStructure/example/index.html', 
    6.   
  
  
  
  6.     injectSelector: '#app' 
    7.   
  
  
  
  7.   }, 
    8.   
  
  
  
  8.   background: '#eee', 
    9.   
  
  
  
  9.   animation: 'opacity 1s linear infinite;', 
    10.   
  
  
  
  10.   // ... 
    11.   
  
  
  
  11. } 
    12.

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

  • 插入骨架屏

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

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

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

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

1. 設計思路

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

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

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

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

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

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

2. 實現(xiàn)方式

  • 生成骨架屏

(1) config.js 配置

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

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

 
 
 
 
    
  
  
  
  
  1. const ppteer = require('puppeteer'); 
    2.   
  
  
  
  2. const { log, getAgrType } = require('./utils'); 
    3.   
  
  
  
  3. const insertBtn = require('../insertBtn'); 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. const devices = { 
    7.   
  
  
  
  7.   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'], 
    8.   
  
  
  
  8.   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'], 
    9.   
  
  
  
  9.   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'] 
    10.   
  
  
  
  10. }; 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. async function pp({device = 'mobile', headless = true, showInitiativeBtn = false}) { 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.   const browser = await ppteer.launch({headless});//返回browser實例 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.   async function openPage(url, extraHTTPHeaders) { 
    17.   
  
  
  
  17.     const page = await browser.newPage(); 
    18.   
  
  
  
  18.     let timeHandle = null; 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.    if(showInitiativeBtn){ 
    21.   
  
  
  
  21.     browser.on('targetchanged', async ()=>{//監(jiān)聽頁面路由變化，并獲取當前標簽頁的最新的頁面，在showInitiativeBtn為true時插入按鈕由開發(fā)控制主動生成骨架屏 
    22.   
  
  
  
  22.       const targets = await browser.targets(); 
    23.   
  
  
  
  23.       const currentTarget = targets[targets.length - 1] 
    24.   
  
  
  
  24.       const currentPage = await currentTarget.page(); 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26.       clearTimeout(timeHandle) 
    27.   
  
  
  
  27.       setTimeout(()=>{ 
    28.   
  
  
  
  28.         if(currentPage){ 
    29.   
  
  
  
  29.           currentPage.evaluate(insertBtn); 
    30.   
  
  
  
  30.         } 
    31.   
  
  
  
  31.       },300) 
    32.   
  
  
  
  32.     }) 
    33.   
  
  
  
  33.    } 
    34.   
  
  
  
  34.     try{ 
    35.   
  
  
  
  35.       let deviceSet = devices[device]; 
    36.   
  
  
  
  36.       page.setUserAgent(deviceSet[2]); 
    37.   
  
  
  
  37.       page.setViewport({width: deviceSet[0], height: deviceSet[1]}); 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39.       if(extraHTTPHeaders && getAgrType(extraHTTPHeaders) === 'object') { 
    40.   
  
  
  
  40.         await page.setExtraHTTPHeaders(new Map(Object.entries(extraHTTPHeaders))); 
    41.   
  
  
  
  41.       } 
    42.   
  
  
  
  42.       await page.goto(url, { 
    43.   
  
  
  
  43.         waitUntil: 'networkidle0'//不再有網絡連接時觸發(fā)（至少500ms后） 
    44.   
  
  
  
  44.       }); 
    45.   
  
  
  
  45.     }catch(e){ 
    46.   
  
  
  
  46.       console.log('\n'); 
    47.   
  
  
  
  47.       log.error(e.message); 
    48.   
  
  
  
  48.     } 
    49.   
  
  
  
  49.     return page; 
    50.   
  
  
  
  50.   } 
    51.   
  
  
  
  51.   return { 
    52.   
  
  
  
  52.     browser, 
    53.   
  
  
  
  53.     openPage 
    54.   
  
  
  
  54.   } 
    55.   
  
  
  
  55. }; 
    56.   
  
  
  
  56.  
    57.   
  
  
  
  57. module.exports = pp; 
    58.

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

 
 
 
 
    
  
  
  
  
  1. agrs.unshift(evalScripts);//evalScripts = require('../evalDOM');在pupeteer里執(zhí)行evalDom.js并將config.js里配置的參數(shù)傳遞給evalDom 
    2.   
  
  
  
  2. html = await page.evaluate.apply(page, agrs); 
    3.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. //evalDom.js主要邏輯 
    2.   
  
  
  
  2. startDraw: function () { 
    3.   
  
  
  
  3.     const $this = this; 
    4.   
  
  
  
  4.     const nodes = this.rootNode.childNodes; 
    5.   
  
  
  
  5.     this.beforeRenderDomStyle(); 
    6.   
  
  
  
  6.     function childNodesStyleConcat(childNodes) { 
    7.   
  
  
  
  7.         for (let i = 0; i < childNodes.length; i++) { 
    8.   
  
  
  
  8.             const currentChildNode = childNodes[i];//當前子節(jié)點 
    9.   
  
  
  
  9.             //有哪些節(jié)點要跳過繪制骨架屏的過程 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.             if ($this.shouldIgnoreCurrentElement(currentChildNode)) { //是否應該忽略當前節(jié)點，不采取任何措施。后續(xù)這個地方可以由用戶指定哪些節(jié)點應該被略去，todo 
    12.   
  
  
  
  12.                 continue; 
    13.   
  
  
  
  13.             } 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.             const backgroundHasurl = analyseIfHadBackground(currentChildNode); 
    16.   
  
  
  
  16.             const hasDirectTextChild = childrenNodesHasText(currentChildNode);//判斷當前元素是不是有直接的子元素并且此元素是Text 
    17.   
  
  
  
  17.             if ($this.customizeElement && $this.customizeElement(currentChildNode) !== 0 && $this.customizeElement(currentChildNode) !==  undefined) { 
    18.   
  
  
  
  18.                 //開發(fā)者自定義節(jié)點需要渲染的樣子，默認返回false表示使用正常遞歸的算法來處理。如果返回值是true表示不會在向下遞歸，如果返回值是一個對象那么表示開發(fā)需要自定義樣式此時直接繪制就好。todo 
    19.   
  
  
  
  19.                 if (getArgtype($this.customizeElement(currentChildNode)) === 'object') { 
    20.   
  
  
  
  20.                     console.log('object'); 
    21.   
  
  
  
  21.                     //此處如果返回一個對象表示對象要自定義最后繪制的對象 
    22.   
  
  
  
  22.                 } else if ($this.customizeElement(currentChildNode) === 1) { 
    23.   
  
  
  
  23.                     //如果此時返回true，表示此節(jié)點要過濾 
    24.   
  
  
  
  24.                     getRenderStyle(currentChildNode); 
    25.   
  
  
  
  25.                 } else if ($this.customizeElement(currentChildNode) === 2){ 
    26.   
  
  
  
  26.                     continue ; 
    27.   
  
  
  
  27.                 } 
    28.   
  
  
  
  28.                 continue; 
    29.   
  
  
  
  29.             } 
    30.   
  
  
  
  30.             if (backgroundHasurl || analyseIsEmptyElement(currentChildNode) || hasDirectTextChild || shouldDrawCurrentNode(currentChildNode)) { //如果當前元素是內聯(lián)元素或者當前元素非內聯(lián)元素，但是不包含子節(jié)點或者子節(jié)點都是內聯(lián)元素的話那么我們就在當前的骨架屏上繪制此節(jié)點。                    
    31.   
  
  
  
  31.                 getRenderStyle(currentChildNode, hasDirectTextChild); 
    32.   
  
  
  
  32.             } else if (currentChildNode.childNodes && currentChildNode.childNodes.length) { //如果當前節(jié)點包含子節(jié)點 
    33.   
  
  
  
  33.                 //遞歸 
    34.   
  
  
  
  34.                 childNodesStyleConcat(currentChildNode.childNodes); 
    35.   
  
  
  
  35.             } 
    36.   
  
  
  
  36.         } 
    37.   
  
  
  
  37.     } 
    38.   
  
  
  
  38.     childNodesStyleConcat(nodes); 
    39.   
  
  
  
  39.     return this.showBlocks(); 
    40.   
  
  
  
  40. }, 
    41.
  • 上述 rootNode 為根節(jié)點，默認為 document.body 或者可以由開發(fā)指定
  • 主要邏輯為判斷當前節(jié)點是否需要忽略、是否設置了背景圖片、是否含有文本信息、開發(fā)是否指定了當前節(jié)點的處理方式等，對滿足條件的渲染其對應的骨架屏節(jié)點，否則處理當前節(jié)點的子節(jié)點
  • 所有節(jié)點處理完成后，調用 showBlocks 將生成的骨架屏節(jié)點拼接位 HTML 字符串，以便后續(xù)處理

(4) getRenderStyle 生成骨架屏樣式

 
 
 
 
    
  
  
  
  
  1. const styles = [ 
    2.   
  
  
  
  2.     'position: fixed', 
    3.   
  
  
  
  3.     `z-index: ${zIndex}`, 
    4.   
  
  
  
  4.     `top: ${top}%`, 
    5.   
  
  
  
  5.     `left: ${left}%`, 
    6.   
  
  
  
  6.     `width: ${width}%`, 
    7.   
  
  
  
  7.     `height: ${height}%`, 
    8.   
  
  
  
  8.     'background: '+(background || '#eee'), 
    9.   
  
  
  
  9. ]; 
    10.   
  
  
  
  10. const radius = getStyle(node, 'border-radius'); 
    11.   
  
  
  
  11. radius && radius != '0px' && styles.push(`border-radius: ${radius}`); 
    12.   
  
  
  
  12. blocks.push(`
`); 

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.     
 
  • 插入骨架屏

在項目入口 index.html 文件內添加

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.     
 
  •     <% if(htmlWebpackPlugin.options.hasSkeleton) { %> 
  •          
  •             <%= htmlWebpackPlugin.options.loading.html %> 
  •         
    •  
  •     <% } %> 
  •      
  •  

    • 四、總結

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

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

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


    本文名稱：對開發(fā)友好的前端骨架屏自動生成方案
    URL鏈接：http://m.5511xx.com/article/cdcdhdc.html