基于餓了么骨架屏方案，使用Chrome擴展程序生成網(wǎng)頁骨架屏

前言

?

之前寫移動端項目的時候，使用骨架屏來解決首屏渲染時出現(xiàn)短暫空白現(xiàn)象，采用了就是餓了么page-skeleton-webpack-plugin方法

?

但是page-skeleton-webpack-plugin需要puppeteer這個依賴，這玩意會導(dǎo)致整個項目在開發(fā)階段很笨重,而且不是所有的頁面都要用到骨架屏，后面找了套方案，決定使用谷歌插件代替puppeteer

Chrome擴展程序生成網(wǎng)頁骨架屏

?

谷歌插件下載

?

最新版本下載地址，還未通過谷歌官方審核, PS: 谷歌插件如何安裝，自行谷歌

效果圖

如何使用

插件參數(shù)

?

同餓了么骨架屏文檔保持一樣，如下圖

?

骨架屏原理

?

餓了么骨架屏原理,具體可以看看這篇文章

?

其實思路很簡單，我們可以根據(jù)已有的dom結(jié)構(gòu)，覆蓋指定上的顏色，這樣就大致實現(xiàn)了，不過這套方案有兩個難點

• 如何辨別容器和塊
• css冗余樣式和冗余dom結(jié)構(gòu)處理

容器和塊

?

因為不是所有的dom節(jié)點都覆蓋指定的背景色，有些dom是作為容器，來看餓了么是怎么處理的

?

  // 將所有擁有 textChildNode 子元素的元素的文字顏色設(shè)置成背景色，這樣就不會在顯示文字了。
  if (ele.childNodes && Array.from(ele.childNodes).some((n) => n.nodeType === Node.TEXT_NODE)) {
   transparent(ele)
  }
  if (checkHasTextDecoration(styles)) {
   ele.style.textDecorationColor = TRANSPARENT
  }
  // 隱藏所有 svg 元素
  if (ele.tagName === 'svg') {
   return svgs.push(ele)
  }
  // ! 針對于容器中如果有background或者img的 如果有需要當(dāng)做塊處理 否則就以容器為處理
  if (EXT_REG.test(styles.background) || EXT_REG.test(styles.backgroundImage)) {
   return hasImageBackEles.push(ele)
  }
  // export const GRADIENT_REG = /gradient/
  // CSS linear-gradient() 函數(shù)用于創(chuàng)建一個表示兩種或多種顏色線性漸變的圖片
  if (GRADIENT_REG.test(styles.background) || GRADIENT_REG.test(styles.backgroundImage)) {
   return gradientBackEles.push(ele)
  }
  if (ele.tagName === 'IMG' || isBase64Img(ele)) {
   return imgs.push(ele)
  }
  if (
   ele.nodeType === Node.ELEMENT_NODE &&
   (ele.tagName === 'BUTTON' || (ele.tagName === 'A' && ele.getAttribute('role') === 'button'))
  ) {
   return buttons.push(ele)
  }
  if (
   ele.childNodes &&
   ele.childNodes.length === 1 &&
   ele.childNodes[0].nodeType === Node.TEXT_NODE &&
   /\S/.test(ele.childNodes[0].textContent)
  ) {
   return texts.push(ele)
  }
 })(rootElement)

 // ! dom節(jié)點 引用類型  這里統(tǒng)一收集對應(yīng)類型的dom 然后集中用對應(yīng)的handler處理
 console.log('button數(shù)組', buttons)
 console.log('hasImageBackEles', hasImageBackEles)
 console.log(pseudos, gradientBackEles, grayBlocks)
 svgs.forEach((e) => handler.svg(e, svg, cssUnit, decimal))
 texts.forEach((e) => handler.text(e, text, cssUnit, decimal))
 buttons.forEach((e) => handler.button(e, button))
 console.log('imgs數(shù)組', imgs)

 hasImageBackEles.forEach((e) => handler.background(e, image))
 imgs.forEach((e) => handler.image(e, image))
 pseudos.forEach((e) => handler.pseudos(e, pseudo))
 gradientBackEles.forEach((e) => handler.background(e, image))
 grayBlocks.forEach((e) => handler.grayBlock(e, button))

解決的方式很簡單，根據(jù)該dom是否有background、backgroundImage、linear-gradient是否為容器

css冗余樣式和冗余dom結(jié)構(gòu)處理

?

餓了么那套解決方案是有對冗余節(jié)點和樣式做了處理，但是效果并不是很明顯，我們換種思路想，竟然我們已經(jīng)知道那個節(jié)點是容器，那個節(jié)點是塊，那么我們是不是對于容器這種節(jié)點做剔除，因為真正展示在頁面的是對應(yīng)的骨架屏塊，而對于具體位置，可以使用絕對定位，通過getBoundingClientRect這個api獲取

?