我自己一直没太留意,直到用户强烈反映才发现,bindtouchstart、bindtouchmove和bindtouchend的响应速度在最近的版本中大大下降。导致原来一个能够很顺畅画出轨迹的操作,变得十分卡顿,用户体验大大下降。
经过测试发现,在开发工具中是没问题,但是到了手机上速度就大大下降。再一查原因,开发工具中e.touches[0].x和e.touches[0].y都是整数,而在真机上就是浮点数,而且位数非常的长。这个位数毫无意义,两位小数甚至整数都是没问题的,弄成长浮点数只会大大拖慢速度。我尝试采用e.touches[0].x.toFixed(2)这种方式来缩短,但是并没有用,速度瓶颈不在函数中,而在于触发事件的时候。
请尽快解决,否则应用的体验会非常的糟糕。
@一石流 可以留一下小程序名吗
楼上这个发现不错!
楼主看下是否这个问题导致的?
小程序名叫青藤白板
如此说来,还真有可能跟基础库的版本升级有一定的关系。
@Special: 如果真机里能选择使用特定版本的基础库的话,这类的问题就比较容易追查和验证了。我在另一个帖子里提出过这个问题,能帮忙看看吗?谢谢!
如何获知手机正在使用的客户端基础库版本?如何升级基础库版本?
感谢一二楼的热心回复。因为同一段代码在开发工具和真机上性能差距非常大,我才会怀疑是浮点数导致的。
我自己也写了类似的语句来做测试,结果是在start后会有1秒左右的延迟,才开始响应move的事件。开始响应后,速度也不甚理想。不仅如此,在多划几次之后,还会莫名失去响应,停在某次start之后,不再响应move事件,也不再响应start和end/cancel事件。没有报错信息,日志里一片空白,也不触发bindtoucherror事件。
我后来对bindtouchmove中的语句进行了优化,速度确实有所提升。但是和之前相比还是有下降。因为同一段代码,没有修改过,在刚上线的时候(大概两周前)是很流畅的,而且很多人都用过的。然后到了今天就是明显变卡。
我做了一段测试程序,在自己手机上实测的效果是:相比于在开发者工具中的响应来说,的确能感觉到多一点延迟,但应该不算特别明显。
另外我发现一个现象,如果程序中注释掉的那行 console.log() 被放开的话,在手机上多划动一会儿就会明显感觉到延迟增加了不少。所以建议你也检查一下程序中是否有类似这种 console.log() 的影响。
程序代码附后,建议你在自己的手机上跑一下看看,对照一下实际的效果。
test.wxml
<
view
bindtouchstart
=
"onTouchEvent"
bindtouchmove
=
"onTouchEvent"
bindtouchend
=
"onTouchEvent"
style
=
"position:fixed; top:0; bottom:0; width:100%; white-space:pre;"
>
<
view
style
=
"position:absolute; left:{{pageX}}px; top:{{pageY}}px;"
>+</
view
>
<
text
>{{json}}</
text
>
</
view
>
test.js
Page({
data: {
json:
'-'
,
pageX: 100,
pageY: 100
},
onTouchEvent:
function
(evt) {
//console.log('onTouchEvent:', evt);
var
pageX = 100;
var
pageY = 100;
if
(evt.touches && evt.touches[0]) {
pageX = evt.touches[0].pageX;
pageY = evt.touches[0].pageY;
}
this
.setData({
json: JSON.stringify(evt.touches, undefined,
' '
),
pageX: pageX,
pageY: pageY
});
}
});
……不相信浮点数会导致能感觉得出来的延迟。