E
E
Evgeniy2021-07-09 18:19:54
JavaScript
Evgeniy, 2021-07-09 18:19:54

How to optimize js code?

Good day to all.
I'm using the lazy-line-painter.js library ( lazylinepainter.info ) for lazy line drawing of svg images.

It so happened that there are about 20 such images.
They are drawn after hovering the mouse over a block with the desired id

Everywhere different id blocks and images
Frequent calls to the DOM, etc. heavily load the site, up to 3 seconds.

Can you please tell me how to optimize this code, or some tricks to speed up the download?

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();

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
RAX7, 2021-07-09
@Zheleznov

The main reason for the brakes is the getPointAtLength method , it eats up a lot of time when initializing the library. You can try to fork the lib and cut out the _getPathPoints method from it and fix all the methods that depend on it. This should help.
An easier way is to use another library like animejs .

A
Aetae, 2021-07-09
@Aetae

Change mouseover to mouseenter.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question