? ????? ?? ???? ????? ??? ??? ???? ?? ???? ???? ?????? ????? ??? ???????. ???? ??? ??? ????.

?? ????? ???? ????? ???

?? ?? ?????? ??? ???? ?? ???? ??? ?????? ?????. ? ??? ?????? ??? ??? ? ?? ??? ?????. ?? ?? js ??? ??? ??? ?? ?????? ???? ?? ??? ???? ???? ?????. ??? ?? ?? ???? ???? ???? ??? ?????

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

?? ??: ??? ??, ??, ???? ??, UI ???

Javascript? ?? ??? ????? ?? ??? ?? ????. ???? ? ?? ??? ????. ??? ?? ??(??)?? ?? ??? ??? ??(???)???. ?? ??? ?? ????? ??? ?? ?? ?? ??? ????, ?? ??? ??? ??? ?? ??? ??? ? ????. "?? ???"? ??? ??? ??? ? ??? ?? ???? ?? ?? ??? ??? ?? ?? ???? ?????.

??? ??? ??? ??(Task)? ???? ??(Micro Task)?? ?????. ????? ?? ???? ??? ?? ???? ???? ?? ???? ?????.

??? ??? ???? ??:

• ?? ??? ??? ?? ????? ???? ?? ???? ??? ?????.

• ??? ??? ?? ??? ?? ? ???? ?? ???? ?????.

• ?? ??? ??? ??? ??? ? ??? ?? ???? ??? ?? ?? ?? ??? ?????. ??? ??? ? ?? ???????? ?? ????. ?? ?? ??? ???????? ???? ? ???????? ??????? ???? ?????. ?? ???? ??????? ???? ?? ?? ??? ??? ?????? ???? ?? ?? ?? ??? ?????.

• ?? ???? ?? ? ?? ??? ?? ?????.

?? ??? ??:

• setTimeout
• setInterval
• postMessage
• ...

?? ???? ??:

• Promise
• MutationObserver

??? ??? UI ??? ?? ?? ? ??? ??????? ???? ?? ???????? ??? ? ????? ??? ????? ???? ??? ?????.

// 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, ? ? ???? ??? ? 16.66ms?? ?? ?? ????. Dom? ? ????? ? ? ???? ????? ????? ??? ?? ???? ?????.

// 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? ??? ?????. setInterval? ??? ?? ???? ??? ?? ???? ?? ??? ?????. ?? ???? ???? ????. ?? ???? setInterval ?? ??? ?????. ??? ?? ???? ? ??? ???? ?? ??? ???? ?? ???? ??? ??? ??? ??? ???? ????. ??? ??? ?? ???? ?? ??? ???? setInterval ??? ???? ????. ? ?? ?? ?? ??? ?? ??? ??? ?? ???? ?? ?????.

??? ? setInterval ??? ?? ??? ????? ?? ???? ?????

// 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? ??:

• ?? ???? ?? ??? ??? ??? ?? ???? ?? ?????. ?? ?? ?? ?? ??? ?? ??. ?? ??? ?? ???? ?? ??? ?? ????? ??? ?? ??? ???? ???????.
• setInterval? ?? ??? ????? ???? ????? ? ??? ???? ?? ?? ?? ??? ?? ? ????? ??? ??? ????? ??? ???? ??? ?? ????. ?? ???.

??? setInterval ?? setTimeout? ??? ???

requestAnimationFrame? ?????

js? ???? ?????? ??? ?? setTimeout ?? ?? ???? requestAnimationFrame? ?????.

window.requestAnimationFrame() ????? ?????? ???? ??? ??? ?? ?? ??? ?? ?????? ?????? ?? ??? ?? ??? ????? ????? ?????

由上面的例子可知，兩個(gè)宏任務(wù)之間不一定會觸發(fā)瀏覽器渲染，這個(gè)由瀏覽器自己決定，并且瀏覽器的幀率并會一直是60fps，有時(shí)可能會下降到30fps，而setTimeout的回調(diào)時(shí)間是寫死的，就有可能導(dǎo)致修改了多次Dom，而只觸發(fā)了一次ui更新，造成掉幀。

// demo5
const con = document.getElementById('con');
let i = 0;
function rAF(){
  requestAnimationFrame(function aaaa() {
    con.textContent = i;
    Promise.resolve().then(function bbbb(){
      if(i < 5) {rAF(); i++;}
    });
  });
}
con.onclick = function () {
  rAF();
};

可以看到渲染了5次（五條豎直虛線）

小程序上的動畫優(yōu)化

小程序是雙線程架構(gòu)

好處是：ui渲染和js主線程是分開的，我們知道在瀏覽器中這兩者是互斥的，所以當(dāng)主線程有阻塞時(shí)，頁面交互就會失去響應(yīng)，而小程序中不會出現(xiàn)這樣的情況。

壞處是：邏輯層、渲染層有通信延時(shí)，大量的通信也會造成性能瓶頸。

小程序提供了wxs用來處理渲染層的邏輯。

購物車拋物線動畫優(yōu)化

所以我們不應(yīng)該用setInterval去執(zhí)行動畫，我們修改成，當(dāng)點(diǎn)擊加購時(shí)，把點(diǎn)擊坐標(biāo)與目標(biāo)坐標(biāo)傳入wxs，然后計(jì)算運(yùn)行軌跡點(diǎn)的坐標(biāo)計(jì)算，接著用requestAnimationFrame執(zhí)行動畫幀

// 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ī)上的動畫也非常絲滑。但是錄屏效果不好，這里就不放了。

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

? ??? ??? ???? ?? ????? ???? ?????? ????? ??? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!