Javascript 手机上的动画速度非常慢

我刚刚为我目前工作的公司创建了我的第一个web应用程序，向公司中没有创意的人解释了我们所知道的“设计团队”（尽管有开发人员）的工作

我已经学习了大约4个月的代码，并亲自设计和创建了这一切，这是艰难的，但今天终于有一些足够可行的东西上传到我们的服务器

然而，我正在经历一些我无法诊断的错误行为。我有一种感觉，这是因为我缺乏JS最佳实践结构方面的知识，但在手机上，非css（我使用GSAP）的打开和关闭“信息”页面的动画速度非常慢

这是我用来显示卡的每个迭代信息的逻辑：

var info = $('.info');

info.click(function(){
    var gp = $(this).parent().parent(),
        gpInfoBG2 = gp.parent().siblings(".info-bg-close"),
        gpInfoBG = gp.parent().siblings(".info-bg");

    if ($(this).is('.first')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-one"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-one").addClass('open');

    } else if ($(this).is('.second')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-two"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-two").addClass('open');

    } else if ($(this).is('.third')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-three"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-three").addClass('open');

    } else if ($(this).is('.fourth')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-four"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-four").addClass('open');
    }
});

function backgroundIn(elemObject, infoBG, infoBG2) {

    var tl = new TimelineMax({onComplete:showText}),
        button = infoBG.siblings('.button-container'),
        line1 = button.children('.line-one'),
        line2 = button.children('.line-two');

        tl.fromTo(infoBG2, .3, {height: "0"}, {height: "100%"})
          .fromTo(infoBG, .3, {height: "0"}, {height: "100%"}, 0.25)
          .to(infoBG, .4, {height: "84%"})
          .to(infoBG, .3, {height: "86%"})
          .to(infoBG, .2, {height: "85%"})
          .fromTo([line1, line2], 0.2, {width: "0px"}, {width: "30px"}, 1)
          .to(line1, .2, {css:{rotation: 45, transformOrigin: "50% 50%"}}, 1.4)
          .to(line2, .2, {css:{rotation: -45, transformOrigin: "50% 50%"}}, 1.4);

    function showText() {
        elemObject.fadeIn();
    }
};

我意识到我可能应该将$（this）缓存在一个变量中，并在条件语句中引用它，但这肯定不是问题的根源

任何想法都将不胜感激，请随意查看实际的脚本文件并批评其中的任何部分-必须通过批评学习

---

提前谢谢

我认为是背景/旋转（变换）。如果您可以将其更改为css类，则可能会提高速度。根据我的经验，css动画比javascript动画更流畅。除此之外，一些小的调整可能会有所帮助：

// you could change this:
gp.css({"display": "none"});
// to:
gp[0].style.display = 'none';

如果给元素一个

数据位置

值，则可以删除elseif并用开关替换它（跳过

.is（）

检查：

switch( $(this).data('position'){
    case 'first': 
        // stuff
    break;
    case 'second': 
        // stuff
    break;
}

---

结合Martijn和TrueBlueAusie的思想，您可以通过在目标元素上使用数据属性来重构代码：

info.click(function(){
    var gp = $(this).parent().parent(),
        gpInfoBG2 = gp.parent().siblings(".info-bg-close"),
        gpInfoBG = gp.parent().siblings(".info-bg"), 
        position = $(this).data('position'),
        infotext;

    switch (position) {
        case 'first': 
           infotext = '.infotext-one';
           break;
        case 'second': 
           infotext = '.infotext-two';
           break;
        case 'third': 
           infotext = '.infotext-three';
           break;
    }

    gp[0].style.display = 'none';
    backgroundIn(gp.siblings(infotext), gpInfoBG, gpInfoBG2);
    gp.siblings(infotext).addClass('open');
});

编辑

从这篇文章中得到的一个建议修复是“设置一个小的z值，这通常会迫使浏览器将元素推送到GPU，从而在GPU而不是CPU上应用矩阵。不过，这并不是一个灵丹妙药，因为将内容推送到GPU会带来成本（与GSAP无关）而且它只有一定数量的内存，所以不要尝试一次使用1000个元素来完成此操作。”例如：

//if this is your original tween...
tl.to(line1, .2, {rotation:45});

//to force it onto the gpu, you can simply add z:0.1:
tl.to(line1, .2, {rotation:45, z:0.1}); 

---

旁注：我有点担心看到像

if（$（this）.is（'.first'））{

这样的硬连线测试。更好的方法是使用

data-

属性来指定目标值来选择数据驱动器。这可能更适合codereview.stackexchange.com另一个旁注，一点重构（特别是在您的if语句上）我相信这将提高性能，这将更适合codereview.stackexchange.com。非常感谢所有的帮助人员。看到比我做这件事时间长的人对同一问题采取什么方法总是非常好。看来我还有很长的路要走！只需将此输入到网站，不幸的是，它没有看起来这对动画的运行有任何影响。谢谢你教我关于“数据位置”的知识，仔细检查函数

backgroundIn（）

的内部结构将显示它正在进行大量链式css转换，这可能会导致动画运行缓慢，将被迫将每个行为分解为单独的方法调用，希望您能分享关于这件事的正确答案！感谢Martijn，非常感谢！