Optimising the Javascript/jQuery code for iPhone browsers

Question

I'm building a website, primarily for mobiles. I had the following jQuery code

$(".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");

})

I know it might not be the best way all of it, but anyways it is EXTREMELY slow on iPhones - not fully tested, but seems like it is a general problem, even on the newer. I tried making it in JS indstead (again, might not be perfect):

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/, '');
}

But even that does not seem to help. Any suggestions how to speed this up a lot? I've been googling, and it seems like DOM manipulation is just slow on iPhone. Is there a solution? Would it for example help to make the 5 states of each line (default, deepsleep, sleep, awake, up) and then just hide/show the one needed? Pageload is not an issue at all.

Tushar · Accepted Answer · 2015-10-02T09:33:57.370

0

Use object with keys to match and the corresponding value to be set as the value of the key. Then the value can be accessed by using the key. e.g. color[action]
Reuse the cached reference of the DOM element
Use remove method of classList to remove a class from a element, no need of ragex here
Instead of using the click event, use touchstart event

Here is the VanillaJS updated code.

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

edited Oct 02 '15 at 09:33

answered Oct 02 '15 at 09:23

Tushar

85,780
21
159
179

Thanks, it might have helped a little bit. But it should be able to be called quickly (by tapping multiple times in a row). It works quite well on ex my HTC One M7, but apparently iOS slows it down. – Christian Bundgaard Oct 02 '15 at 09:31
1

@ChristianBundgaard The issue can be of using the `click` event, try binding the `touchstart` event instead of `click`, this will run faster – Tushar Oct 02 '15 at 09:33
At the moment I use ex
. How would I make it with touchStart and click on desktops - and should I then go back to jQuery?
– Christian Bundgaard Oct 02 '15 at 09:36
1

@ChristianBundgaard Yes, yo've to go with jQuery in this case, `if (iPhone) { event = 'touchStart'; } else { event = 'click'; } $('selector').on(event, function() { ...` This is how you can use different event for iPhone broswers and other browsers. Please don't use the code as it is, this is just the algorithm – Tushar Oct 02 '15 at 09:39
1

Thank you, thank you, thank you! This works like a dream! – Christian Bundgaard Oct 02 '15 at 09:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/91165/discussion-between-tushar-and-christian-bundgaard). – Tushar Oct 02 '15 at 09:59

Optimising the Javascript/jQuery code for iPhone browsers

1 Answers1