优化 JavaScript / jQuery 函数以获得更好的性能答案

【问题标题】：Optimize JavaScript / jQuery function for better performance优化 JavaScript / jQuery 函数以获得更好的性能
【发布时间】：2018-03-06 19:18:49
【问题描述】：

我有以下功能：

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

该功能进入我的页面标题并将菜单项的名称“Häufig gestellte Fragen (FAQ) - Übersicht”更改为“FAQ”。但是，此功能运行速度太慢，因此“Häufig gestellte Fragen (FAQ) - Übersicht”总是出现在“FAQ”出现之前。

有没有办法优化我的功能，使这个错误不再发生？不幸的是，我必须以这种方式解决它，因为我的 CMS 根据 CMS 中的页面名称生成菜单项。

【问题讨论】：

在加载文档时总是会出现文本闪烁，你应该先用 css 隐藏它，然后在你的 js 完成文本更改后取消隐藏它。你能不能不编辑你的 cms 所以它有一个额外的菜单名称字段 - 这是大多数 cms 系统所做的
你没有使用for循环中的i，所以你可以省略这行for (i = 0; i < nav_item_text.length; i++) {
哇，您正在迭代字符串nav_item_text 的所有字符，并在每次迭代时设置元素的innerHTML...为什么要这样做？只需删除此 for 循环，您就会变得更好。
非常感谢您的建议。我也终于注意到了不必要的 for 循环。我已经删除了循环，现在它运行得更快了。但是仍然不如预期（见下面的 cmets）。

标签： javascript jquery performance

【解决方案1】：

.each 内的 for 循环不是必需的。

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

这应该会更快。

您可能仍会看到旧文本闪烁，因为它会首先呈现，为了解决此问题，您应该考虑使用一些 CSS 隐藏文本，然后在其文本更改后显示它。

【讨论】：

这个肯定更快了，但是老名字还是闪退。如果我通过 CSS 隐藏它（显示：无或不透明度：0）并再次显示，在调用 JavaScript 函数后，文本不再闪烁，但现在整个导航。
@Codehan25 但现在整个导航意味着什么？
导航由以下项目组成：学院、服务、新闻、联系方式、常见问题解答、校园。现在，当我单击特定项目进行导航时，所有项目都会闪烁一次。一旦我点击一个项目，该函数就会被再次调用。
不，您应该使用 CSS 隐藏元素，但在调用函数 toggleInnerHtml 之后使用 jquery 将显示设置为阻止。
嘿，对不起。我只是注意到闪烁与 Javascript 函数无关。我完全删除了该功能，闪烁仍然存在。文本的问题已解决，但现在可能还有另一个问题：D

【解决方案2】：

您可以为此使用contain 试试这个：

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

elm.text("FAQ");

与

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

【讨论】：

同样用这个方案，肯定是更快了，但是老名字还是闪退。如果我通过 CSS 隐藏它（显示：无或不透明度：0）并再次显示，在调用 JavaScript 函数后，文本不再闪烁，但现在整个导航。
这里是现场版。检查左上角的导航：academyofsports.de
我从“void”中获取了解决方案，因为它效果最好。但是，它仍然闪烁，并且与 Javascript 功能无关。您知道为什么当我单击此项目时项目会闪烁吗？也许这是一个 PHP 故事 ..