小程序Android端movable-view拖拽卡頓掉幀的優化

背景： 最近項目中使用到 movable-view來作一個拖拽排序的功能，等到功能都實現完成後到真機測試發現，拖拽動畫在Android端存在嚴重的卡頓掉幀，及其不跟手，可是在IOS端卻挺流暢。查閱Google發現也有相同的小夥伴有相似問題： 小程序的移動拖動圖片安卓太過卡頓如何解決

致使卡頓掉幀的緣由

例如頁面有 2 個元素 A 和 B，用戶在 A 上作 touchmove 手勢，要求 B 也跟隨移動，movable-view 就是一個典型的例子。一次 touchmove 事件的響應過程爲：

a、touchmove 事件從視圖層（Webview）拋到邏輯層（App Service）

b、邏輯層（App Service）處理 touchmove 事件，再經過 setData 來改變 B 的位置

一次 touchmove 的響應須要通過2 次的邏輯層和渲染層的通訊 以及一次渲染，通訊的耗時比較大。此外setData渲染也會阻塞其它腳本執行，致使了整個用戶交互的動畫過程會有延遲。

針對以上緣由，微信小程序推出了WXS(WX Script)，其做用是可以讓邏輯代碼在視圖層（Webview）運行，經過減小數據在視圖層和邏輯層之間的傳輸次數，進而達到優化的目的。具體參考：WXS

在Taro中使用WXS的優化實踐

背景：因爲目前Taro中尚未支持WXS（ taro#2959），因此我在項目中不能直接編寫WXS代碼，讓Taro幫我編譯成WXML。因此得用點小技巧來實現，但願將來Taro可以支持WXS。

若是你是使用原生小程序開發能夠直接參考WXS來實現，若是是其餘框架則能夠參照本文章進行實踐。

優化前的代碼

優化前經過setState來動態更新x,y座標值，從而利用movable-view達到拖拽效果。

進行優化

首先須要去除掉movable-view組件，由於沒法使用movable-view和WXS來達到減小數據傳輸通過的路徑次數，其次movable-view是用CSS作的動畫，咱們能夠用position:absolute來代替，在WXS中動態設置top&left的值，達到movable-view的效果。

其次在對應組件（使用到WXS的組件或頁面）的目錄下建立一個move.wxs的腳本文件，用於動態設置須要作動畫的節點的top&left座標值。

若是你在編譯時發現編譯後的組件目錄下沒有 move.wxs文件，則可參考 copy進行配置。來源 taro#2959

最後在對應的JSX下引入move.wxs而且與touchmove事件綁定。

Taro中使用存在的問題

做者編輯本文時，Taro對於 WXS並無很好的支持，只能說勉強達到能用WXS優化幀率的目的。不過目前Taro也準備對其進行支持，請關注 taro#2959
。做者後續也會持續關注 Taro對 WXS的支持進度。

在我使用WXS時遇到須要使用callMethod的場景（參考：WXS響應事件），來調用Taro類組件中定義的方法，直接按官方的教程使用是不行的。須要像如下的方式很醜陋的使用，目前具體緣由不知，估計Taro對於沒綁定事件的方法編譯方式有所不一樣。

)

在線演示

通過上面的優化，在Android機型上拖拽動畫的流暢度會獲得大幅度提高。你們能夠掃下方的小程序碼進行體驗，流程以下：

• 掃描小程序碼進入小程序
• 登錄小程序
• 在我的書庫頁面，掃描書籍後方的條形碼添加幾本書籍
• 長按書籍後進行拖拽