fard 更新，小程序性能極致優化……

你們好，我是 132，又是週日啦，基本上如今實習後，只有週六日能夠寫本身的東西了

這週週六主要是去 airbnb 作了一次技術交流，和小哥哥一塊兒討論了不少 fard 相關的內容

而後週日，就按照討論的思路進行了重構，發佈了新版本

接下來咱們捋一捋：

fard block tree

唔，你們若是看到以前的文章的話，會發現 fard 的 bridge 是使用 template 來作的 經過 template 模擬 vdom

可是很不幸，微信不支持 view 標籤的遞歸，這就很尷尬

致使咱們要寫不少重複代碼，不符合我性格

好在最終我研究出了一種新的方式，使用自定義組件來作

這是此次更新最大的變化，得先說，還記得今年 vue3 的 block tree 嗎？

如圖，其實 vue 的 block tree 本質就是將 diff 的單位從組件縮減到區塊，而這個區塊和組件的區別，只是前者是相似於 react fragment 的一個數組

vue 的這個思路，說實話不是新鮮事，並且其實對於 web 的 diff 來講，收益不大，由於傳統的 web diff 也是有 key 的，而除了遍歷，其餘的性能開銷少得多

可是不得不說，小程序咱們沒辦法控制 ui 層面的 diff，這個 block tree 的思路仍是很是好的

因此與之對應的我搞出來適用於小程序的 fard block tree

感覺下這個顏值，shdow dom + fard bridge + dom 的逼格……

你們能夠看到，這個截圖其實和也是有 block 的感受的，只是本質區別在於，vue 是將一個組件的 vfor 拆成多個 block，而 fard 是將一個組件（頁面）的 wxfor 拆成多個組件

最終的目標都是一致的，縮減單位更新的範圍

通過這麼一折騰，不只僅解決了 template 的性能天坑，還能收穫一波新的性能提高

可是這還沒完呢……

data diff

咱們一直都知道，setData 要次數少，量小，要先壓縮

而 fard 給出的方案，也是微信推薦的……diff

好比

let oldVdom = {
  type: 'view',
  props: {
    class: 'item'
  },
  children: [
    {
      type: 'text',
      props: {},
      children: []
    }
  ]
}

let newVdom = {
  type: 'view',
  props: {
    class: 'wrap'
  },
  children: [
    {
      type: 'view',
      props: {},
      children: []
    }
  ]
}

const out = diff(oldVdom, newVdom)
複製代碼

好比咱們更新一個 vdom ，一不當心就吧整個對象傳過去了 而 fard 會自動作一層 diff，以上這種狀況，其實只是變化了兩個字段：

{
  "props.class": "wrap",
  "children[0].type": "view"
}
複製代碼

這是 fard 第二個性能大提高的方面

可是……還沒完 emmmm

咱們解決了 setData 的量的問題，還沒解決次數問題

防抖

其實 fard 只會 setData 一次，可是也有一些狀況是不那麼穩妥的，因此須要作 防抖 處理，保證每次都發生一次 setData

new Promise((resolve, reject) => {
  if (!Object.keys(diffRes).length) {
    resolve(null)
    return
  }
  context.setData(diffRes, () => {
    resolve(diffRes)
  })
})
複製代碼

通過 promise 的小優化，能保證只進行一次，並且會檢查有沒有變化，沒有就直接 return

很好，將 setData 的次數也優化好了

然而，還沒完::>_<::

以上咱們解決的是，第二次之後的，更新階段的，可是首次渲染的 data 的量仍然是個坑

json 的壓縮

咱們想到的是壓縮對象，好比：

{
  type: 'view',
  props: {
    class: 'item'
  },
  children: [
    {
      type: 'text',
      props: {},
      children: []
    }
  ]
}
複製代碼

而後變成了：

{
  t: 'view',
  ps: {
    class: 'item'
  },
  c: [
    {
      t: 'text',
      p: {},
      c: []
    }
  ]
}
複製代碼

大量簡寫一些不對外暴露的字段……此處應該還有別的辦法，若是你知道，求告知

以上，是 fard 對於小程序性能優化作的探討

fard

fard 是我寫的 fre 轉小程序框架，它不須要編譯，相似 RN 的原理，是真真正正的在小程序裏跑 fre

加上各類性能優化騷操做，使其成爲異常精彩的設計

今後不再用 cli，不再用受限制，只要能跑 js ，就能夠跑 fard！

最後放上 fard 的 github 地址：github.com/132yse/fard

歡迎 star 與試用，也能夠加羣哦~