window.addEventListener вызывает замедление работы браузера - только Firefox. Почему? - PullRequest
Новая
       5

window.addEventListener вызывает замедление работы браузера - только Firefox. Почему?

0 голосов
/ 20 февраля 2020

Я пишу о функциях, запрошенных моим клиентом для проверки сеанса пользователя. Цель состоит в том, чтобы запросить пароль через 5 минут бездействия пользователя. Я столкнулся с довольно странной проблемой в Firefox.

ПОМЕЩЕНИЕ: Для работы обычно я использую Chrome. На самом деле, при написании функций я не заметил никаких проблем.

Анализируя результат функций в Firefox Я понял, что что-то не так. В частности, браузер ведет себя странно. Каждый раз, когда выполняется событие EventListener, браузер перерисовывает страницу aws, перемещая объекты, и, кроме того, кажется, что выполнение событий происходит очень медленно, чего не происходит в Chrome. Почему??? ... я не знаю!

Вот код: 

var IDLE_TIMEOUT = 300; //seconds
var _idleSecondsCounter = 0;
var InfoSess = document.getElementById('infosession');
var SessinStandBy = 0;

function force_reflow(){
    $(window).trigger('resize');
}

window.addEventListener('click', function(e) {
    SessinStandBy == 0 ? InfoSess.innerHTML = 'Session: <strong>active</strong> [event: click]' : InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>';
    _idleSecondsCounter = 0;
});
window.addEventListener('mousemove', function(e) {
    SessinStandBy == 0 ? InfoSess.innerHTML = 'Session: <strong>active</strong> [event: mouse moved]' : InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>';
    _idleSecondsCounter = 0;
});
window.addEventListener('keypress', function(e) {
    SessinStandBy == 0 ? InfoSess.innerHTML = 'Session: <strong>active</strong> [event: keyboard pressed]' : InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>';
    _idleSecondsCounter = 0;
});
var myInterval = window.setInterval(CheckIdleTime,1000);

function CheckIdleTime() {

    var _DiffTime = IDLE_TIMEOUT-_idleSecondsCounter;

    var _MinutDiffTime = Math.floor(_DiffTime / 60) < 10 ? '0'+Math.floor(_DiffTime / 60) : Math.floor(_DiffTime / 60);
    var _SecondsDiffTime = Math.floor(_DiffTime % 60) < 10 ? '0'+Math.floor(_DiffTime % 60) : Math.floor(_DiffTime % 60);
    var _Countdown = _MinutDiffTime+'m:'+_SecondsDiffTime+'s';

    var _MinutCounter = Math.floor(_idleSecondsCounter / 60) < 10 ? '0'+Math.floor(_idleSecondsCounter / 60) : Math.floor(_idleSecondsCounter / 60);
    var _SecondsCounter = Math.floor(_idleSecondsCounter % 60) < 10 ? '0'+Math.floor(_idleSecondsCounter % 60) : Math.floor(_idleSecondsCounter % 60);
    var _IncativeTime = _MinutCounter+'m:'+_SecondsCounter+'s';

    _idleSecondsCounter++; // add 1s
    if (_idleSecondsCounter > 30) {
        InfoSess.innerHTML = 'Sessione intattiva da <strong>'+_IncativeTime+'</strong> | in pausa tra: <strong>'+_Countdown+'</strong>';
        force_reflow();
    }

    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        window.clearInterval(myInterval);
        SessinStandBy = 1;
        InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>'; 
        force_reflow();
    }
}

Я добавил функцию принудительного оплавления, я решил проблему перемещения объектов на странице, но не медлительности.

Я надеюсь на помощь сообщества stackoverflow. Спасибо!

КОД ОБНОВЛЕНИЯ 

var IDLE_TIMEOUT = 300; //seconds
var _idleSecondsCounter = 0;
var InfoSess = document.getElementById('infosession');
var SessinStandBy = 0;

function force_reflow(){
    $(window).trigger('resize');
}

function display_session_message(_event_type) {
    if (prec_event_execute != _event_type) {
        prec_event_execute = _event_type;
        InfoSess.innerHTML = 'Session <strong>active</strong> - User event: ' + _event_type;
        force_reflow();
        //console.log('ui refresh');
    } else {
        //console.log('silent check');
    }
}

var update_layout = _.debounce(function (e) {
    display_session_message(e.type);
    _idleSecondsCounter = 0;
},1000);

window.addEventListener('click', update_layout, false, { passive: true });
window.addEventListener('keypress', update_layout, false, { passive: true });
window.addEventListener('mousemove', update_layout, false, { passive: true });

var myInterval = window.setInterval(CheckIdleTime,1000);

function CheckIdleTime() {
    var _DiffTime = IDLE_TIMEOUT-_idleSecondsCounter;
    var _MinutDiffTime = Math.floor(_DiffTime / 60) < 10 ? '0'+Math.floor(_DiffTime / 60) : Math.floor(_DiffTime / 60);
    var _SecondsDiffTime = Math.floor(_DiffTime % 60) < 10 ? '0'+Math.floor(_DiffTime % 60) : Math.floor(_DiffTime % 60);
    var _Countdown = _MinutDiffTime+'m:'+_SecondsDiffTime+'s';
    var _MinutCounter = Math.floor(_idleSecondsCounter / 60) < 10 ? '0'+Math.floor(_idleSecondsCounter / 60) : Math.floor(_idleSecondsCounter / 60);
    var _SecondsCounter = Math.floor(_idleSecondsCounter % 60) < 10 ? '0'+Math.floor(_idleSecondsCounter % 60) : Math.floor(_idleSecondsCounter % 60);
    var _IncativeTime = _MinutCounter+'m:'+_SecondsCounter+'s';
    _idleSecondsCounter++; // add 1s
    if (_idleSecondsCounter > 30) {
        InfoSess.innerHTML = 'Sessione intattiva da <strong>'+_IncativeTime+'</strong> | in pausa tra: <strong>'+_Countdown+'</strong>';
        force_reflow();
    }
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        window.clearInterval(myInterval);
        SessinStandBy = 1;
        InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>'; 
        force_reflow();
    }
}
...