Optimize JavaScript / jQuery function for better performance

Question

I have the following function:

    // Change nav item in header in order to display it shorter
    function toggleInnerHtml(){
        $('#header .top ul li span, .banner nav.company li a span').each(function(index, value){

            var nav_item_text = value.innerHTML;

            for (i = 0; i < nav_item_text.length; i++) { 
                if(nav_item_text == 'Häufig gestellte Fragen (FAQ) - Übersicht' ){
                    nav_item_text = 'FAQ';
                    this.innerHTML = nav_item_text;
                 }
            }

        });         
    }

    toggleInnerHtml();

The function goes into the header of my page and changes the name of the menu item "Häufig gestellte Fragen (FAQ) - Übersicht" to "FAQ". However, this function works too slowly, so "Häufig gestellte Fragen (FAQ) - Übersicht" always appears just before "FAQ" appears.

Is there a way to optimize my function so that this error no longer occurs? Unfortunately I have to solve it this way because my CMS generates the menu items based on the page names within the CMS.

You will always get that flash of text whilst the document is loading, you should hide it with css first and then unhide it when your js has finished changing the text. Can you not edit your cms so it has an extra field for menu name - that's what most cms systems do — Pete
– Pete, Commented Mar 6, 2018 at 10:31
You are not using the i from the for loop, so you can just omit this line for (i = 0; i < nav_item_text.length; i++) { — Adder
– Adder, Commented Mar 6, 2018 at 10:32
Wow you are iterating over all the characters of the string nav_item_text and set innerHTML of your element at every iteration... Why do you do this? Simply remove this for loop and you'll be way better. — Kaiido
– Kaiido, Commented Mar 6, 2018 at 10:49
Thank you very much for your suggestions. I also finally noticed the unnecessary for loop. I have removed the loop and now it is running faster. However still not as desired (see comments below). — Codehan25
– Codehan25, Commented Mar 6, 2018 at 11:08

void · Accepted Answer · 2018-03-06 10:32:31Z

1

That for loop inside .each is not required.

function toggleInnerHtml(){
    $('#header .top ul li span, .banner nav.company li a span').html(function(){
       if($(this).html() === 'Häufig gestellte Fragen (FAQ) - Übersicht' )
          return "FAQ";
       return $(this).html();
    });         
}

This should work much faster.

You might still see a blink of the older text as it will get rendered first, in order to fix that you should consider using some CSS to hide the text and then show it once its text is changed.

answered Mar 6, 2018 at 10:32

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Codehan25 Over a year ago

This is definitely faster, but the old name still flashes. If I hide this via CSS (display: none or opacity: 0) and display again, after the Javscript function was called, the text does not flash anymore, but now the whole navigation.

void Over a year ago

@Codehan25 but now the whole navigation means?

Codehan25 Over a year ago

The navigation consists of the following items: The Academy, Service, News, Contact, FAQ, Campus. Now all the items flash once when I click on a specific item to navigate. The function is called again as soon as I click on an item.

void Over a year ago

No you should hide the elements using CSS but set the display to block using jquery just after where you are calling the function toggleInnerHtml .

Codehan25 Over a year ago

Hey, I'm sorry. I just noticed that flashing has nothing to do with the Javascript function. I completely removed the function and the flashing was still there. The problem with the text is solved but now there is probably another one :D

|

PHP Worm... · Accepted Answer · 2018-03-06 11:18:49Z

1

You can use contain for this Try This:

var elm = $(".banner nav.company li a span:contains('Häufig gestellte Fragen (FAQ) - Übersicht')");

elm.text("FAQ");

AND

 elm = $("#header .top ul li span:contains('Häufig gestellte Fragen (FAQ) - Übersicht')");
elm.text("FAQ");

edited Mar 6, 2018 at 11:18

answered Mar 6, 2018 at 10:38

PHP Worm...

4,2341 gold badge28 silver badges48 bronze badges

3 Comments

Codehan25 Over a year ago

Also with this solution, it is definitely faster, but the old name still flashes. If I hide this via CSS (display: none or opacity: 0) and display again, after the Javscript function was called, the text does not flash anymore, but now the whole navigation.

Codehan25 Over a year ago

Here is the live version. Check the navigation at the top left: academyofsports.de

Codehan25 Over a year ago

I took the solution from "void" because it worked best. However, it still flashes and it is not related to the Javascript function. Do you have any idea why the items flash when I click on this? maybe it's a PHP story ..

Collectives™ on Stack Overflow

Optimize JavaScript / jQuery function for better performance

2 Answers 2

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related