Improving js efficiency

Question

I have function that I need to run on window load as well as window resize and I was wondering how can I make my code more efficient.

Here is my current code:

jQuery(window).resize(homeSliderAdjust);

var windowWidth = jQuery(window).width();


if (windowWidth < 750) {
    var hmLeft = jQuery('.page-home #slides .left').outerHeight();
    var hmRight = jQuery('.page-home #slides .right img').outerHeight();
    var hmSliderHeight = hmLeft + hmRight;
    jQuery(".page-home #slides").css("height", hmSliderHeight);
    jQuery(".page-home #hero").css("height", hmSliderHeight);

  }

function homeSliderAdjust(){
    var windowWidth = jQuery(window).width();
    if (windowWidth < 750) {
      var hmLeft = jQuery('.page-home #slides .left').outerHeight();
      var hmRight = jQuery('.page-home #slides .right img').outerHeight();
      var hmSliderHeight = hmLeft + hmRight;
      jQuery(".page-home #slides").css("height", hmSliderHeight);
      jQuery(".page-home #hero").css("height", hmSliderHeight);
    }
  }

Matt Ball · Answer 1 · 2014-12-31 20:50:44Z

up vote 4 down vote

Basic, easy 80/20 performance optimizations:

Cache the selected DOM elements, so the code doesn't scour the DOM constantly
Debounce the callback so it does not run every single time the resize event is fired

answered Dec 31 '14 at 20:50

Matt Ball
28817

add a comment |

nanndoj · Answer 2 · 2014-12-31 20:53:39Z

I would split the jQuery selectors into vars. So jQuery doesn't need to look for the elements in DOM every time you resize.

var leftObj = jQuery('.page-home #slides .left');
var rightObj = jQuery('.page-home #slides .right img');
var pageSlides = jQuery(".page-home #slides");
var heroObj = jQuery(".page-home #hero");

var windowWidth = jQuery(window).width();
if (windowWidth < 750) {
   // I would do that as well as soon as it does the same as the code below
   homeSliderAdjust();     
}

function homeSliderAdjust(){
    var windowWidth = jQuery(window).width();
    if (windowWidth < 750) {
      var hmLeft = leftObj.outerHeight();
      var hmRight = rightObj.outerHeight();
      var hmSliderHeight = hmLeft + hmRight;
      pageSlides.css("height", hmSliderHeight);
      heroObj.css("height", hmSliderHeight);
    }
}

jQuery(window).resize(homeSliderAdjust);

This is a good article about jQuery selectors caching

asked	8 months ago
viewed	51 times
active	8 months ago

current community

your communities

more stack exchange communities

Improving js efficiency

migrated from stackoverflow.com Jan 5 at 14:18

2 Answers 2

Your Answer

Hot Network Questions

current community

your communities

more stack exchange communities

Improving js efficiency

migrated from stackoverflow.com Jan 5 at 14:18

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions