這篇文章跟大家分享一次小程式動(dòng)畫優(yōu)化實(shí)踐，看看小程式購物車動(dòng)畫怎麼優(yōu)化，希望對大家有幫助！

小程式購物車動(dòng)畫優(yōu)化

公司小程式點(diǎn)擊加購時(shí)，會繪製一個(gè)拋物線動(dòng)畫，這個(gè)拋物線動(dòng)畫是計(jì)算出來的貝塞爾曲線上各點(diǎn)的座標(biāo)，再由js遍歷點(diǎn)座標(biāo)，然後動(dòng)態(tài)設(shè)定點(diǎn)的樣式，進(jìn)而實(shí)現(xiàn)動(dòng)畫。但這會帶來卡頓掉幀問題

this.goodBoxTimer = setInterval(() => {
  index--
  this.setData({
    'movingBallInfo.posX': linePos[index][0],
    'movingBallInfo.posY': linePos[index][1],
  })
  if (index < 1) {
    this.resetGoodBoxStatus()
  }
}, 30)

前置知識：Event Loop, Task, micro Task, UI Rendering

javascript是單線程語言，這意味著所有任務(wù)都要排隊(duì)。任務(wù)分為兩種：一種是同步任務(wù)(synchronous)，另一種是非同步任務(wù)(asynchronous)。同步任務(wù)指的是，在主執(zhí)行緒上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行後一個(gè)任務(wù)；非同步任務(wù)指的是，不進(jìn)入主執(zhí)行緒、而進(jìn)入"任務(wù)佇列"(task queue)的任務(wù)，只有"任務(wù)隊(duì)列"通知主線程，某個(gè)非同步任務(wù)可以執(zhí)行了，該任務(wù)才會進(jìn)入主執(zhí)行緒執(zhí)行。

而非同步任務(wù)又分為巨集任務(wù)(Task)和微任務(wù)(micro Task)，同理任務(wù)佇列也分成巨集任務(wù)佇列和微任務(wù)佇列。

事件循環(huán)(Event Loop) 大致步驟：

• 所有同步任務(wù)都在主執(zhí)行緒上執(zhí)行，形成一個(gè)執(zhí)行端(execution context stack)。

• 只要非同步任務(wù)有了運(yùn)行結(jié)果，就在任務(wù)佇列之中放置一個(gè)事件。

• 執(zhí)行堆疊中的巨集任務(wù)執(zhí)行完畢，引擎會先讀取微任務(wù)，並推入執(zhí)行堆疊。執(zhí)行完成之後，繼續(xù)讀取下一個(gè)微任務(wù)。如果執(zhí)行過中產(chǎn)生新的微任務(wù)，就會把這個(gè)微任務(wù)推入微任務(wù)佇列。如果主執(zhí)行緒執(zhí)行完所有微任務(wù)佇列中的任務(wù)中時(shí)，就會去讀取巨集任務(wù)佇列，推入執(zhí)行堆疊。

• 主執(zhí)行緒不斷重複上面的第三步。

常見的巨集任務(wù)：

• setTimeout
• setInterval
• postMessage
##...

常見的微任務(wù)：

Promise
#MutationObserver

而Event Loop和UI渲染的關(guān)係呢？其實(shí)是執(zhí)行完微任務(wù)佇列裡所有微任務(wù)的之後，由瀏覽器決定是否要進(jìn)行渲染更新。

// demo1
// 渲染發(fā)生在微任務(wù)之后
const con = document.getElementById('con');
con.onclick = function () {
  Promise.resolve().then(function Promise1 () {
    con.textContext = 0;
  })
};

// demo2
// 兩次EventLoop中間沒有渲染
const con = document.getElementById('con');
con.onclick = function () {
  setTimeout(function setTimeout1() {
      con.textContent = 0;
      Promise.resolve().then(function Promise1 () {
          console.log('Promise1')
    })
  }, 0)
  setTimeout(function setTimeout2() {
    con.textContent = 1;
    Promise.resolve().then(function Promise2 () {
        console.log('Promise2')
    })
  }, 0)
};

我們知道瀏覽器正常情況下的幀率是60fps，即一幀的時(shí)間大約是16.66ms。如果在一幀裡對Dom進(jìn)行了兩次修改，那麼瀏覽器只會取最後一次的修改值去渲染。

// demo3
// 兩次eventloop中有渲染
const con = document.getElementById('con');
con.onclick = function () {
  setTimeout(function  setTimeout1() {
    con.textContent = 0;
  }, 0);
  setTimeout(function  setTimeout2() {
    con.textContent = 1;
  }, 16.7);
};

#盡量不要使用setInterval

由上文可知setInterval是巨集任務(wù)，setInterval每隔定義的時(shí)間間隔就會往巨集任務(wù)佇列推入回呼函數(shù)，然後主執(zhí)行緒會讀取巨集任務(wù)佇列裡的setInterval回呼函數(shù)並執(zhí)行。但如果主執(zhí)行緒有長任務(wù)(long task)執(zhí)行時(shí)，會阻塞讀取，直到主執(zhí)行緒裡的任務(wù)執(zhí)行完才會繼續(xù)讀取，但setInterval往宏任務(wù)佇列新增回調(diào)函數(shù)的操作是不會停止的，這種情況就會造成：函數(shù)執(zhí)行的時(shí)間間隔遠(yuǎn)大於我們定義的時(shí)間間隔。

下面是一個(gè)例子，每次setInterval回呼都需要進(jìn)行大量的計(jì)算，這樣阻塞主執(zhí)行緒

// demo4
const btn = document.getElementById('btn')
btn.addEventListener('click', setIntervalFn)
let sum = 0
function setIntervalFn() {
  let last
  let countIdx = 0
  const timer = setInterval(function timeFn() {
    countIdx++
    const newTime = new Date().getTime()
    const gap = newTime - last
    last = newTime
    console.log('setInterval', gap, countIdx)
    if (countIdx > 5) clearInterval(timer)
    // 10000000
    // 100000
    for (let i = 0; i < 100000; i++) {
      sum+= i
    }
  }, 100)
  last = new Date().getTime()
}

setInterval的缺點(diǎn)：

當(dāng)主執(zhí)行緒有程式碼執(zhí)行時(shí)，巨集任務(wù)佇列會一直按照一定的時(shí)間間隔推入事件回呼函數(shù)。只有當(dāng)主執(zhí)行緒空閒時(shí)，才會執(zhí)行回呼函數(shù)，但是這些回呼函數(shù)大多都是過時(shí)的。
如果setInterval的回呼間隔比瀏覽器渲染一幀的時(shí)間要短，那麼回呼函數(shù)執(zhí)行了多次，但只會用到最後一次的結(jié)果，這樣也會造成浪費(fèi)，甚至有可能會阻塞主線程。

所以盡量用setTimeout去代替setInterval

#使用requestAnimationFrame##如果用js去繪製動(dòng)畫，還是用官方推薦的requestAnimationFrame，而不是setTimeout。

window.requestAnimationFrame()

告訴瀏覽器－你希望執(zhí)行一個(gè)動(dòng)畫，並且要求瀏覽器在下次重繪之前呼叫指定的回呼函數(shù)更新動(dòng)畫</blockquote><p>由上面的例子可知，兩個(gè)宏任務(wù)之間不一定會觸發(fā)瀏覽器渲染，這個(gè)由瀏覽器自己決定，并且瀏覽器的幀率并會一直是60fps，有時(shí)可能會下降到30fps，而setTimeout的回調(diào)時(shí)間是寫死的，就有可能導(dǎo)致修改了多次Dom，而只觸發(fā)了一次ui更新，造成掉幀。</p><pre class='brush:php;toolbar:false;'>// demo5 const con = document.getElementById(&amp;#39;con&amp;#39;); let i = 0; function rAF(){ requestAnimationFrame(function aaaa() { con.textContent = i; Promise.resolve().then(function bbbb(){ if(i &lt; 5) {rAF(); i++;} }); }); } con.onclick = function () { rAF(); };</pre><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/412/705/313/1640657854778507.png" class="lazy" title="1640657854778507.png" alt="記錄一次實(shí)踐，看看小程式購物車動(dòng)畫怎麼優(yōu)化"/></p><p>可以看到渲染了5次（五條豎直虛線）</p><p><span style="max-width:90%"><strong>小程序上的動(dòng)畫優(yōu)化</strong></span></p><p>小程序是雙線程架構(gòu)</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/416/262/830/164065785853058記錄一次實(shí)踐，看看小程式購物車動(dòng)畫怎麼優(yōu)化" class="lazy" title="164065785853058記錄一次實(shí)踐，看看小程式購物車動(dòng)畫怎麼優(yōu)化" alt="記錄一次實(shí)踐，看看小程式購物車動(dòng)畫怎麼優(yōu)化"/></p><p>好處是：ui渲染和js主線程是分開的，我們知道在瀏覽器中這兩者是互斥的，所以當(dāng)主線程有阻塞時(shí)，頁面交互就會失去響應(yīng)，而小程序中不會出現(xiàn)這樣的情況。</p><p>壞處是：邏輯層、渲染層有通信延時(shí)，大量的通信也會造成性能瓶頸。</p><p>小程序提供了wxs用來處理渲染層的邏輯。</p><p><span style="max-width:90%"><strong>購物車拋物線動(dòng)畫優(yōu)化</strong></span></p><p>所以我們不應(yīng)該用setInterval去執(zhí)行動(dòng)畫，我們修改成，當(dāng)點(diǎn)擊加購時(shí)，把點(diǎn)擊坐標(biāo)與目標(biāo)坐標(biāo)傳入<code>wxs，然后計(jì)算運(yùn)行軌跡點(diǎn)的坐標(biāo)計(jì)算，接著用requestAnimationFrame執(zhí)行動(dòng)畫幀

// wxs
function executeCartAnimation () {
  curCoordIdx = coordArr.length - 1
  ins.requestAnimationFrame(setStyleByFrame)
}

function setStyleByFrame() {
  if (curCoordIdx >= 0) {
    ins.selectComponent('.cart-animation').setStyle({
      display: 'block',
      left: coordArr[curCoordIdx].x + 'px', 
      top: coordArr[curCoordIdx].y + 'px'
    })
    curCoordIdx -= 1
    ins.requestAnimationFrame(setStyleByFrame)
  } else {
    ins.selectComponent('.cart-animation').setStyle({
      display: 'none'
    })
  }
}

在真機(jī)上效果非常明顯，低端安卓機(jī)上的動(dòng)畫也非常絲滑。但是錄屏效果不好，這里就不放了。

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

以上是記錄一次實(shí)踐，看看小程式購物車動(dòng)畫怎麼優(yōu)化的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！