小程序代碼在ios上很溜，但是安卓機上性能問題很多，低端安卓機對性能調優更是要求賊高，稍不注意，頁面就能卡死。

性能問題基本都是cpu不夠用導致的卡頓，這種卡頓可能是1）dom太大，內存爆滿 2）js操作頻繁，js進程繁忙 3）渲染問題，可能是被js阻塞了，也有可能是所在環境的渲染機制不夠優化

在本次為小程序開發的雙十一會場頁面時，總結出以下經驗。

 

存在的性能問題及解決方案

在開發中發現在低端機上幾個小程序端需要注意的事：

1. dom大了后，bindtap事件會不靈敏，短時間連續觸發的bindtap事件后續的會丟失。原生小程序測試時，3000個dom節點就有丟失現象。后來嘗試了使用touchstart和touchend去模擬，發現雖然touchstart很靈敏，但是touchend會丟失（個人猜測小程序的tap事件也是通過touchstart和touchend模擬的）。我們的大促會場600個商品時我算了下大約13000個dom節點，低端安卓機事件丟的很嚴重，間隔幾乎是秒級別才能觸發下一次事件。所以解決方案只能減小dom量，添加dom懶加載和動態移除的邏輯，經過多次測試，比較理想的效果是預加載2屏

2）滾動時setState卡頓嚴重，如果滾動時有觸發setState操作，那么setState成功可能發生在幾秒后，即使滾動操作在幾百ms內就結束了。這就導致導航類功能的滾動跟隨效果在安卓機上反應特別慢，滾停到某個商品樓層后，過了1-2s才導航條才突然動一下，所以最終取消了安卓的滾動跟隨效果。（不根據版本取消效果，是因為發現即使是安卓最新的7.1版本在性能不好的機器上也會這樣）

3）白屏問題

快速瘋狂滾動頁面，前面的頁面沒渲染出就不停的往后滾，發現小程序不是優先渲染可視區域，而是一定要把曾經滾過的區域按順序渲染了。所以如果快速瘋狂滾動，后面的內容白屏等待時間會很久。考慮到正常用戶不會有這種需求，想看后面的內容可以通過樓層導航過去，而且這個問題我們也找不到解決方案，所以這個現象沒有處理。

 

注意事項

1）懶加載+動態移除非可視范圍內的內容，讓dom小下去

2）耗時的js操作異步化，不要阻塞主線程。落地一點說，小程序里不要做頻繁的setState操作，不在state里放跟視圖層無關的內容。譬如我之前為了代碼清晰，把導航功能模塊里的樓層位置信息放到了視圖層也用的一個變量里，其實視圖層并不直接用到這個信息，這個信息為了準確，又會在每次滾動后重新計算，導致頻繁setState，且set的是跟視圖層無關的數據，優化后，性能提升很明顯。

3）還有跟小程序本身相關的，wx.createSelectorQuery系列接口都是異步的，會受主進程影響，如果主進程繁忙，這個接口返回時間會延遲很久也是s級別的，對于樓層導航和懶加載這種需要頁面各模塊位置信息的功能，不能每次操作都等這個接口返回，可以緩存數據，取緩存，然后用戶的操作觸發調接口更新緩存，在緩存有更新時，為了更準確，也可以主動觸發下需要位置信息的后續處理函數。

4）少用scroll-view，這個組件對性能影響實在太大，單純的只是需要一塊可滾動區域，請用css+view解決

5）不知道微信的小程序做了什么，滾動操作時進程異常繁忙，滾動停止后很久才是可操作和執行js狀態，所以盡量少的觸發在滾動時的回調函數，節流函數必須合理用起來。

性能調優是個漫長的取舍過程，需要不斷測試來獲取最優效果。cpu只有那么多，一段時間只能干那么多事，那就要干效果最好最重要的事。