在微信小程序的開(kāi)發(fā)過(guò)程中，發(fā)現(xiàn)部分頁(yè)面的切換動(dòng)畫(huà)在真機(jī)調(diào)試時(shí)，非常卡頓。

頁(yè)面切換是指從一個(gè)頁(yè)面，切換到另外一個(gè)頁(yè)面。

反復(fù)查看了自己的代碼，也沒(méi)有發(fā)現(xiàn)自己寫(xiě)了任何非常耗時(shí)的操作，因此非常迷惑。

思考了多種方案沒(méi)有效果，于是在網(wǎng)上找了一種說(shuō)法，一篇文章說(shuō)，在全局樣式中新增如下屬性，就可以解決。

page {
  -webkit-overflow-scrolling: touch;
}

病急亂投醫(yī)試了一下，很可惜沒(méi)有效果。后來(lái)想起來(lái)了這條屬性是用來(lái)解決 iOS 使用 overflow: scroll 滾動(dòng)不流暢的問(wèn)題的。

于是，在沒(méi)有頭緒的情況下，我啟用了我的找 bug 的終極大招：刪除定位法。

刪除定位法：先刪除部分代碼，再執(zhí)行頁(yè)面，查看卡頓問(wèn)題是否消失。如果沒(méi)有，則刪除其他部分的代碼，直到找到問(wèn)題代碼為止。

該方法在我的十多年中，所向披靡，戰(zhàn)功顯赫。果不其然，我最終找到了問(wèn)題所在。

在該頁(yè)面組件中，我寫(xiě)了這樣一段代碼。

useEffect(() => {
  ad.current = Taro.createRewardedVideoAd({
    adUnitId: ads.ad15
  })
  ...
}, [])

在微信小程序中，createRewardedVideoAd 方法是用來(lái)提前創(chuàng)建激勵(lì)廣告實(shí)例，以便于讀者在點(diǎn)擊按鈕觀看廣告時(shí)，廣告已經(jīng)創(chuàng)建好了，而不用等待那么久。

很顯然，該方法是一個(gè)耗時(shí)操作。頁(yè)面如下：

但是這里一個(gè)很具有迷惑性的地方在于，實(shí)際上我調(diào)用該方法的時(shí)機(jī)，已經(jīng)在組件創(chuàng)建完成之后了。

useEffect(() => {
  // 組件創(chuàng)建完成之后
}, [])

因此，我就有點(diǎn)懵了，為什么組件創(chuàng)建完成之后調(diào)用該方法，還是會(huì)卡頓呢？

后面從結(jié)果反推之后，我才想明白，微信小程序頁(yè)面切換到詳細(xì)邏輯應(yīng)該是。

1. 創(chuàng)建新頁(yè)面實(shí)例
2. 執(zhí)行入場(chǎng)動(dòng)畫(huà) 「問(wèn)題是入場(chǎng)動(dòng)畫(huà)卡頓」

那么此時(shí)如果我們?cè)陧?yè)面實(shí)例創(chuàng)建完成之后立馬執(zhí)行一個(gè)耗時(shí)任務(wù)，就會(huì)跟入場(chǎng)動(dòng)畫(huà)搶占主線程資源，從而導(dǎo)致渲染卡頓。

想明白了這個(gè)過(guò)程之后，解決的辦法就非常簡(jiǎn)單了，我們只需要在入場(chǎng)動(dòng)畫(huà)執(zhí)行結(jié)束之后，再執(zhí)行耗時(shí)任務(wù)即可。因此，我們可以使用定時(shí)器來(lái)推后耗時(shí)任務(wù)的執(zhí)行。

useEffect(() => {
  setTimeout(() => {
    ad.current = Taro.createRewardedVideoAd({
      adUnitId: ads.ad15
    })
  }, 200)
  ...
}, [])

再保存，重試，發(fā)現(xiàn)所有卡頓的頁(yè)面都流暢了！完美解決。

在客戶端開(kāi)發(fā)的過(guò)程中，還有可能會(huì)遇到另外一種情況會(huì)導(dǎo)致頁(yè)面卡頓。不過(guò)這種情況與我這次遇到的這個(gè)卡頓的表現(xiàn)會(huì)有點(diǎn)不太一樣。這種情況的表現(xiàn)為：

當(dāng)我點(diǎn)擊按鈕之后，過(guò)了很長(zhǎng)時(shí)間切換動(dòng)畫(huà)才開(kāi)始執(zhí)行。

通常情況下，造成這種卡頓的原因是因?yàn)轫?yè)面初始化時(shí)執(zhí)行的邏輯過(guò)多，或者渲染的內(nèi)容多過(guò)，導(dǎo)致初始化時(shí)間過(guò)長(zhǎng)，從而造成反應(yīng)緩慢。解決的辦法就是通過(guò)懶加載延后處理和渲染非首屏內(nèi)容。

總結(jié)

該場(chǎng)景的問(wèn)題與解決方案可以當(dāng)做項(xiàng)目亮點(diǎn)在面試中去介紹。無(wú)論是找到問(wèn)題的思路，還是解決的思路都可以展開(kāi)聊很多。

對(duì)于瀏覽器的渲染機(jī)制和事件循環(huán)了解非常深刻的朋友可以快速想明白卡頓的原因所在，在面試中，基于這個(gè)場(chǎng)景延展出來(lái)自己對(duì)渲染原理的理解，那么你的面試過(guò)程將會(huì)非常有質(zhì)量。