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

В общем суть вопроса в чем, имеется скрипт
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 бюджетной версии, то при попытке перемещения объекта в центре экрана заметно начинает подвисать, т.е. есть грех что в этом виноват я и не правильно рассчитываю смещение объекта.

Как можно побороть эти зависания?
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
23 апр. 2024, в 19:21
300 руб./за проект
23 апр. 2024, в 19:05
15000 руб./за проект
23 апр. 2024, в 18:47
10000 руб./за проект