Question

我正在建立一个主要面向手机的网站。我有以下jQuery代码

$(".reg_action").click(function () {
    var action = $(this).attr("id");
    var ele = $(".reg_line.selected");
    var icon = $(this).html();

    if (action == "deepsleep") {
        var color = "#33bb45";
    } else if (action == "sleep") {
        var color = "#99ef96";
    } else if (action == "awake") {
        var color = "#e1f648";
    } else if (action == "up") {
        var color = "#fb0707";
    }

    ele.find(".reg_segment").val(action);
    ele.find(".reg_color").css("background-color", color);
    ele.find(".reg_icon").html(icon);

    // Move on
    ele.removeClass("selected");
    ele.next().addClass("selected");

})

我知道它可能不是最好的方式，但无论如何它在iPhone上非常慢 - 没有经过全面测试，但似乎这是一个普遍的问题，即使在较新的问题上也是如此。我尝试在JS indstead中制作它（再次，可能不完美）：

function lineAction(action) {

    if (action == "deepsleep") {
        var color = "#33bb45";
    } else if (action == "sleep") {
        var color = "#99ef96";
    } else if (action == "awake") {
        var color = "#e1f648";
    } else if (action == "up") {
        var color = "#fb0707";
    }

    var ele = document.getElementsByClassName("selected");
    ele[0].childNodes[1].value = action;
    ele[0].childNodes[3].style.backgroundColor = color;

    var classes = document.getElementsByClassName("selected");
    classes[0].nextSibling.classList.add("selected");
    classes[0].className = classes[0].className.replace(/\bselected\b/, '');
}

但即便如此也没有帮助。有什么建议如何加快这个速度？我一直在谷歌搜索，似乎在iPhone上DOM操作速度很慢。有解决方案吗？例如，它是否有助于使每行的5个状态（默认，深度睡眠，睡眠，清醒，向上）然后隐藏/显示所需的状态？ Pageload根本不是问题。

Answer 1

使用带有键的对象进行匹配，并将相应的值设置为键的值。然后可以使用密钥访问该值。例如color[action]
重用DOM元素的缓存引用
使用remove classList方法从元素中删除类，不需要ragex
使用click事件

touchstart

这是VanillaJS更新的代码。

＆＃13;

var color = {
  'deepsleep': '#33bb45',
  'sleep': '#99ef96',
  'awake': '#e1f648',
  'up': '#fb0707
};

function lineAction(action) {
  var ele = document.getElementsByClassName("selected");
  ele[0].childNodes[1].value = action;
  ele[0].childNodes[3].style.backgroundColor = color[action];

  ele[0].nextSibling.classList.add("selected");
  ele[0].className.remove('selected');
}

＆＃13;

优化iPhone浏览器的Javascript / jQuery代码

1 个答案: