小程序(xu)代碼在ios上很(hen)(hen)溜，但(dan)是(shi)安卓機上性能問(wen)題很(hen)(hen)多(duo)，低端安卓機對性能調(diao)優更是(shi)要求賊高，稍不(bu)注意，頁面就能卡(ka)死。
性能(neng)問(wen)(wen)題(ti)基(ji)本都是(shi)(shi)cpu不夠用(yong)導致的卡頓，這種卡頓可(ke)能(neng)是(shi)(shi)1）dom太大(da)，內(nei)存爆滿 2）js操作頻繁(fan)，js進程繁(fan)忙 3）渲染問(wen)(wen)題(ti)，可(ke)能(neng)是(shi)(shi)被js阻塞了，也有(you)可(ke)能(neng)是(shi)(shi)所在(zai)環境(jing)的渲染機(ji)制(zhi)不夠優化
在本次為小程序開發的雙十一會場頁面(mian)時，總(zong)結出以下經驗。
在開發中發現在低端機(ji)上(shang)幾個小程(cheng)序(xu)端需要注(zhu)意的事：
2）滾動(dong)時(shi)setState卡頓嚴(yan)重，如果滾動(dong)時(shi)有(you)觸發setState操作，那么setState成(cheng)功可能發生(sheng)在(zai)幾秒后，即使滾動(dong)操作在(zai)幾百ms內就結束(shu)了。這(zhe)就導(dao)(dao)致導(dao)(dao)航(hang)類功能的(de)滾動(dong)跟隨效(xiao)果在(zai)安卓機上(shang)反應特(te)別慢(man)，滾停到某個商(shang)品樓層后，過了1-2s才導(dao)(dao)航(hang)條才突(tu)然動(dong)一(yi)下(xia)，所(suo)以(yi)最(zui)終(zhong)取(qu)消了安卓的(de)滾動(dong)跟隨效(xiao)果。（不根據版(ban)本取(qu)消效(xiao)果，是因(yin)為發現即使是安卓最(zui)新的(de)7.1版(ban)本在(zai)性能不好的(de)機器上(shang)也(ye)會這(zhe)樣(yang)）
3）白屏(ping)問題
快速(su)瘋狂(kuang)滾動頁面，前面的(de)頁面沒渲染出(chu)就(jiu)不(bu)停的(de)往后(hou)滾，發現小程序不(bu)是優先渲染可(ke)視區(qu)域，而是一定要把曾經滾過的(de)區(qu)域按順序渲染了。所以如果快速(su)瘋狂(kuang)滾動，后(hou)面的(de)內(nei)容白(bai)屏(ping)等待時間會很久。考(kao)慮(lv)到正常用戶不(bu)會有這種需求，想看(kan)后(hou)面的(de)內(nei)容可(ke)以通過樓(lou)層導(dao)航(hang)過去，而且這個問題我們也找(zhao)不(bu)到解決方案(an)，所以這個現象沒有處理。
1）懶加載+動態移除非可(ke)視(shi)范圍內的內容(rong)，讓dom小下去
2）耗時的(de)(de)js操作(zuo)異步化，不要阻塞主線程。落地一點說，小程序里(li)不要做頻繁的(de)(de)setState操作(zuo)，不在state里(li)放跟視(shi)圖(tu)(tu)層(ceng)(ceng)無關的(de)(de)內容(rong)。譬如我之前為(wei)了(le)代碼清晰(xi)，把導(dao)航功(gong)能模塊里(li)的(de)(de)樓層(ceng)(ceng)位置(zhi)信息放到(dao)了(le)視(shi)圖(tu)(tu)層(ceng)(ceng)也(ye)用的(de)(de)一個變量里(li)，其實視(shi)圖(tu)(tu)層(ceng)(ceng)并不直接(jie)用到(dao)這個信息，這個信息為(wei)了(le)準(zhun)確，又會在每次(ci)滾動后(hou)重新(xin)計算，導(dao)致頻繁setState，且set的(de)(de)是跟視(shi)圖(tu)(tu)層(ceng)(ceng)無關的(de)(de)數據(ju)，優化后(hou)，性能提升很明顯(xian)。
3）還有跟小程(cheng)序本身相關的(de)(de)(de)(de)(de)，wx.createSelectorQuery系列接(jie)口都是(shi)異步的(de)(de)(de)(de)(de)，會受(shou)主(zhu)進程(cheng)影響，如果主(zhu)進程(cheng)繁忙，這個接(jie)口返(fan)回時間(jian)會延遲很久也是(shi)s級(ji)別的(de)(de)(de)(de)(de)，對(dui)于樓層導航和懶加載這種(zhong)需(xu)要頁(ye)面各(ge)模塊(kuai)位置(zhi)信(xin)息的(de)(de)(de)(de)(de)功(gong)能，不(bu)能每次(ci)操(cao)作都等(deng)這個接(jie)口返(fan)回，可(ke)以(yi)緩(huan)存(cun)數據(ju)，取(qu)緩(huan)存(cun)，然后(hou)用戶的(de)(de)(de)(de)(de)操(cao)作觸(chu)發調接(jie)口更新緩(huan)存(cun)，在緩(huan)存(cun)有更新時，為了(le)更準確，也可(ke)以(yi)主(zhu)動觸(chu)發下需(xu)要位置(zhi)信(xin)息的(de)(de)(de)(de)(de)后(hou)續處理函數。
4）少(shao)用scroll-view，這(zhe)個組件對性能(neng)影響實在太大，單純的只是需要一塊可(ke)滾動(dong)區(qu)域，請(qing)用css+view解決
5）不知(zhi)道微信的小(xiao)程序做了(le)什么，滾動(dong)操作(zuo)時進程異常(chang)繁(fan)忙，滾動(dong)停止后很久才是可(ke)操作(zuo)和執行js狀態，所以盡量(liang)少(shao)的觸發在滾動(dong)時的回(hui)調函數(shu)，節流(liu)函數(shu)必(bi)須合理用(yong)起來。
性(xing)能(neng)調優(you)是(shi)個漫長的(de)取(qu)舍過程，需要不斷測試(shi)來獲取(qu)最優(you)效果。cpu只有(you)那(nei)(nei)么(me)多，一段時間只能(neng)干(gan)那(nei)(nei)么(me)多事，那(nei)(nei)就要干(gan)效果最好最重要的(de)事。
