Как оптимизировать js код?

Question

[Evgeniy]

Добрый день, всем.
Использую библиотеку lazy-line-painter.js ( lazylinepainter.info ) , для "ленивой" отрисовки линий svg изображений.

Так получилось, что таких изображений около 20 штук.
Отрисовываются они после наведения мышки на блок с нужным id

Везде разные id блоков и изображений
Частые обращения к DOM и пр сильно грузят сайт, до 3 секунд.

Подскажите пожалуйста, как можно оптимизировать этот код, или какие-то приёмы, чтобы ускорить загрузку?

spoiler

// элемент на который наводим
	let audit = document.querySelector('#audit__block');
	let schit = document.querySelector('#schit__block');  

    // ID нужного изображения
    let auditSvg = document.querySelector('#auditobject');
    let schitSvg = document.querySelector('#schitok');  

    // добавляем и удаляем класс при наведении с display:block
    audit.onmouseover = function(e) {  
        document.querySelector('#audit').classList.add('svg_vision');   
    }   
    audit.onmouseout = function(e) {
        document.querySelector('#audit').classList.remove('svg_vision'); 
    }

    schit.onmouseover = function(e) {  
        document.querySelector('#schit').classList.add('svg_vision');
        document.querySelector('#audit').style.display = 'none';  
    }  
    schit.onmouseout = function(e) {
        document.querySelector('#schit').classList.remove('svg_vision'); 
        document.querySelector('#audit').style.display = 'block';  
    } 
     

    // инициализация и свойства отрисовки анимации
    let auditAnimation = new LazyLinePainter(auditSvg, {
        strokeColor: '#cc2d8a',
        strokeWidth: 0.5,
        ease: 'easeInOutExpo'
    });
    let schitAnimation = new LazyLinePainter(schitSvg, {
        strokeColor: '#cc2d8a',
        strokeWidth: 0.2,
        ease: 'easeInOutExpo'
    }); 


    audit.addEventListener('mouseover', paintAudit, false);
    schit.addEventListener('mouseover', paintSchit, false); 

    function paintAudit(){ 
        auditAnimation.paint();
    }
    function paintSchit(){ 
        schitAnimation.paint();
    } 

    paintAudit();
    paintSchit();

Comments

[Василий Банников]

Например можешь кэшировать вызовы
document.querySelector('#audit')
И в этом случае чуть эффективнее будет getElementById

[Aetae]

Василий Банников, лол, нашё что оптимизировать. Получение элемента по id занимает чуть больше времени чем получение свойства объекта. Это явно не узкое место.)

[Василий Банников]

Aetae, да я хз что там сколько занимает. Не фронтендер

Answer 1

[RAX7]

Основная причина тормозов - это метод getPointAtLength, он съедает очень много времени при инициализации библиотеки. Можешь попробовать форкнуть либу и выпилить из нее метод _getPathPoints и поправить все зависящие от него методы. Это должно помочь.
Более простой способ использовать другую библиотеку, например animejs.

Comments

[Evgeniy]

Помогло, спасибо

Answer 2

[Aetae]

Поменять mouseover на mouseenter.