背景： 最近專案中使用到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和WXS響應事件

在Taro中使用WXS的優化實踐

背景：由於目前Taro中還沒有支援WXS（taro#2959），所以我在專案中不能直接編寫WXS程式碼，讓Taro幫我編譯成WXML。所以得用點小技巧來實現，希望未來Taro能夠支援WXS。

如果你是使用原生小程式開發可以直接參考WXS和WXS響應事件來實現，如果是其他框架則可以參照本文章進行實踐。

優化前的程式碼

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

進行優化

首先需要去除掉movable-view元件，因為無法使用movable-view和WXS來達到減少資料傳輸經過的路徑次數，其次movable-view是用CSS做的動畫，我們可以用position:absolute來代替，在WXS中動態設定top&left的值，達到movable-view的效果。

其次我在小程式開發者dist目錄下對應元件（使用到WXS的元件或頁面）的目錄下建立了一個move.wxs的指令碼檔案，用於動態設定需要做動畫的節點的top&left座標值。

在dist目錄下寫move.wxs的原因是因為Taro沒有支援WXS,因此無法識別.wxs型別檔案，也不會進行編譯。

最後在對應的JSX下引入move.wxs並且與touchmove事件繫結。

線上演示

經過上面的優化，在Android機型上拖拽動畫的流暢度會得到大幅度提升。大家可以掃下方的小程式碼進行體驗，流程如下：

• 掃描小程式碼進入小程式

• 登陸小程式

• 在個人書庫頁面，掃描書籍後方的條形碼新增幾本書籍

• 長按書籍後進行拖拽