Как оптимизировать расчеты nativeJS на мобильных устройствах?

Question

[Виталий Хван]

В общем суть вопроса в чем, имеется скрипт

var objects = document.getElementsByClassName('draggable');
var target = document.getElementById('target');
var startPos;
var dragObj;
var objectSelectedCount = 0;
var widthObj,
    heightObj;
var targetOffsetWidth = target.offsetWidth,
    targetOffsetHeight = target.offsetHeight,
    targetOffsetLeft = target.offsetLeft,
    targetOffsetTop = target.offsetTop;

function inArray(arr, elem) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === elem) {
            return true;
        }
    }
    return false;
}

document.addEventListener('touchstart', function(event) {
    event.preventDefault();
    event.stopPropagation();

    if(inArray(objects,event.target)){
        dragObj = event.target;
        widthObj = parseInt(getComputedStyle(dragObj).width)/2;
        heightObj = parseInt(getComputedStyle(dragObj).height)/2;
        startPos = dragObj.style.WebkitTransform;
    }else{
        dragObj = null;
    }

}, false);

document.addEventListener('touchmove', function(event) {
    // event.preventDefault();
    // event.stopPropagation();
    if(dragObj){
        var touch = event.targetTouches[0];
        var touchOffsetX = touch.pageX - widthObj;
        var touchOffsetY = touch.pageY - heightObj;

        dragObj.style.WebkitTransform="translate("+touchOffsetX+"px,"+(touchOffsetY)+"px)";

        if(
            (event.changedTouches[0].pageX > targetOffsetLeft) &&
            (event.changedTouches[0].pageX < (targetOffsetLeft + targetOffsetWidth)) &&
            (event.changedTouches[0].pageY > targetOffsetTop) &&
            (event.changedTouches[0].pageY < (targetOffsetTop + targetOffsetHeight))
        ){
            var color = getComputedStyle(dragObj);
            target.style.boxShadow =  color.backgroundColor + '0 0 38px 10px';
        }else{
            target.style.boxShadow =  '0 0 38px 10px rgba(255,255,255,1)';
        }
    }

}, false);

document.addEventListener('touchend', function(event) {
    // event.preventDefault();
    // event.stopPropagation();

    if(
        (event.changedTouches[0].pageX > targetOffsetLeft) &&
        (event.changedTouches[0].pageX < (targetOffsetLeft + targetOffsetWidth)) &&
        (event.changedTouches[0].pageY > targetOffsetTop) &&
        (event.changedTouches[0].pageY < (targetOffsetTop + targetOffsetHeight))
    ){
        dragObj.remove();
        objectSelectedCount = objectSelectedCount + 1;
        if(objectSelectedCount >= 3){
            window.location.replace('/site/get-product');
        }
    }else{
        dragObj.style.WebkitTransform=startPos;
    }

}, false);

который откликается на прикосновения, в браузере на компьютере все идеально, но если попробовать запустить с планшета LENOVO бюджетной версии, то при попытке перемещения объекта в центре экрана заметно начинает подвисать, т.е. есть грех что в этом виноват я и не правильно рассчитываю смещение объекта.

Как можно побороть эти зависания?

Comments

[alfangur]

если я правильно понял описание события touchmove, то оно генерируется всякий раз когда происходит малейшее движение. следовательно на каждом движении будет срабатывать обработчик.
если это все верно, то вам необходимо переписать свой код так чтобы обработчик touchmove был гораздо дешевле в исполнении чем сейчас, возможно из него стоит убрать работу с style.

Answer 1

[xmoonlight]

1. Старайтесь реже вызывать ресурсоёмкие функции:
var color = getComputedStyle(dragObj);
Для расчёта позиции - используйте переменные, значения которых Вы УЖЕ знаете.

2. Не меняйте свойства и стили объекта при каждом событии! Меняйте каждые N-микросекунд или по событию: задержки (перестали тащить более 250ms), расстояние смещения, выход за границы и т.д.

3. В правилах CSS - включаем поддержку 3D ускорения для 2D объектов следующими правилами:

-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

4. Попробуйте сразу после запуска "погасить" правый клик:

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};

5. Пробуйте удалить 300ms задержку с помощью FastClick

6. Самые тяжёлые математические расчёты (вычисления столкновений, определение маршрута, преобразование матриц и т.д.) делайте через WebAssembly

Comments

[Виталий Хван]

Благодарю Вас xmoonlight, столько советов, все помогло!!!!

[xmoonlight]

Виталий Хван, Отлично! Рад за Вас! Рад был помочь!