jquery存储变量类（性能）

我想知道在性能方面，为类存储变量的最佳方法是什么。 我的意思是，由于children（）函数，存储一个div id比查找所有其他类名更好。还是在变量中写入类名更好

例如：

var $innerDiv = $('#inner-container'),
    $customSlider = $('#custom-slider'),
    $customSliderInner = $customSlider.children().first(),
    $customSliderTimer = $customSliderInner.next().next().next().next(),
    $customSliderButtonLeft = $customSliderInner.next(), 
    $customSliderButtonRight = $customSliderInner.next().next(), 
    $customSliderLeft = $customSliderButtonLeft.children().first(), 
    $customSliderRight = $customSliderButtonRight.children().first(), 
    $customSliderPrevSlide = $customSliderLeft.children().next().next().children().first(),
    $customSliderNextSlide = $customSliderRight.children().next().next().children().first(), 
    $customSliderPage = $customSliderInner.next().next().next(),
    $customSliderTotalSlide = $customSlider.children().not($customSliderTimer,$customSliderInner,$customSliderPage).children().children().children().next().next(), 
    $customSlide = $customSliderInner.children(), 
    $customSlideContent = $customSlide.children().next().next(), 
    $customSlideContentInner = $customSlideContent.children(),
    $customSlideImage = $customSlide.children(':nth-child(1)'), 
    $customSlideVideo = $customSlideImage.children(), 
    $customSlidePlayer = $customSlideVideo.children(), 
    customSlideVideo = $customSlideVideo.attr('class'), 

var $innerDiv = $('#inner-container'),
    $customSlider = $('#custom-slider'),
    $customSliderInner = $('#custom-slider-inner'),
    $customSliderTimer = $('#custom-slider-timer'),
    $customSliderButtonLeft = $('.custom-slider-buttons-left'),
    $customSliderButtonRight = $('.custom-slider-buttons-right'),
    $customSliderLeft = $('.custom-slider-left'),
    $customSliderRight = $('.custom-slider-right'),
    $customSliderPrevSlide = $('.custom-slider-prevSlide'),
    $customSliderNextSlide = $('.custom-slider-nextSlide'),
    $customSliderPage = $('#custom-slider-pages'),
    $customSliderTotalSlide = $('.custom-slider-totalSlide'),
    $customSlide = $('.custom-slide'),
    $customSlideContent = $('.custom-slide-content'),
    $customSlideContentInner = $('.custom-slide-content-inner'),
    $customSlideImage = $('.custom-slide-image'),
    $customSlideVideo = $('.custom-slide-video'),
    $customSlidePlayer = $('.slidePlayer'),
    customSlideVideo = '.custom-slide-video',

或者像这样：

var $innerDiv = $('#inner-container'),
    $customSlider = $('#custom-slider'),
    $customSliderInner = $customSlider.children().first(),
    $customSliderTimer = $customSliderInner.next().next().next().next(),
    $customSliderButtonLeft = $customSliderInner.next(), 
    $customSliderButtonRight = $customSliderInner.next().next(), 
    $customSliderLeft = $customSliderButtonLeft.children().first(), 
    $customSliderRight = $customSliderButtonRight.children().first(), 
    $customSliderPrevSlide = $customSliderLeft.children().next().next().children().first(),
    $customSliderNextSlide = $customSliderRight.children().next().next().children().first(), 
    $customSliderPage = $customSliderInner.next().next().next(),
    $customSliderTotalSlide = $customSlider.children().not($customSliderTimer,$customSliderInner,$customSliderPage).children().children().children().next().next(), 
    $customSlide = $customSliderInner.children(), 
    $customSlideContent = $customSlide.children().next().next(), 
    $customSlideContentInner = $customSlideContent.children(),
    $customSlideImage = $customSlide.children(':nth-child(1)'), 
    $customSlideVideo = $customSlideImage.children(), 
    $customSlidePlayer = $customSlideVideo.children(), 
    customSlideVideo = $customSlideVideo.attr('class'), 

var $innerDiv = $('#inner-container'),
    $customSlider = $('#custom-slider'),
    $customSliderInner = $('#custom-slider-inner'),
    $customSliderTimer = $('#custom-slider-timer'),
    $customSliderButtonLeft = $('.custom-slider-buttons-left'),
    $customSliderButtonRight = $('.custom-slider-buttons-right'),
    $customSliderLeft = $('.custom-slider-left'),
    $customSliderRight = $('.custom-slider-right'),
    $customSliderPrevSlide = $('.custom-slider-prevSlide'),
    $customSliderNextSlide = $('.custom-slider-nextSlide'),
    $customSliderPage = $('#custom-slider-pages'),
    $customSliderTotalSlide = $('.custom-slider-totalSlide'),
    $customSlide = $('.custom-slide'),
    $customSlideContent = $('.custom-slide-content'),
    $customSlideContentInner = $('.custom-slide-content-inner'),
    $customSlideImage = $('.custom-slide-image'),
    $customSlideVideo = $('.custom-slide-video'),
    $customSlidePlayer = $('.slidePlayer'),
    customSlideVideo = '.custom-slide-video',

以及html结构：

<div id="custom-slider">
        <div id="custom-slider-inner">      
            <div class="custom-slide">
                <div class="custom-slide-image" style="background-image:url(./sintel.png)">
                    <div class="custom-slide-video">
                        <video controls class="slidePlayer">
                        <source type="video/mp4" src="./sintel2.mp4" />
                        </video>
                    </div>                   
                </div>
                <div class="custom-slider-overlay" style="background-image:url(./images/pattern.png)"></div> 
                <div class="custom-slide-content">
                    <div class="custom-slide-content-inner left"></div>
                </div>
            </div>
            <div class="custom-slide">
                <div class="custom-slide-image" style="background-image:url(./slide-5.png)">
                    <div class="custom-slide-video">
                        <video controls class="slidePlayer">
                        <source type="video/mp4" src="" />
                        </video>
                    </div>
                </div>
                <div class="custom-slider-overlay" style="background-image:url(./images/pattern.png)"></div> 
                <div class="custom-slide-content">
                    <div class="custom-slide-content-inner left"></div>
                </div>
            </div>
            <div class="custom-slide">
                <div class="custom-slide-image" style="background-image:url(./slide-4.jpg)"></div>
                <div class="custom-slider-overlay" style="background-image:url(./images/pattern.png)"></div> 
                <div class="custom-slide-content" style="color:#FFF">
                    <div class="custom-slide-content-inner right"></div>
                </div>     
            </div> 
        </div>  
        <div class="custom-slider-buttons-left">
            <div class="custom-slider-left">
                <div class="custom-slider-pagenb-overlay"></div>
                <i class="icon-angle-left"></i>
                <div class="custom-slider-left-pagenb">
                    <div class="custom-slider-prevSlide">1</div>
                    <div class="custom-slider-separator">/</div>
                    <div class="custom-slider-totalSlide">12</div>
                </div>
            </div>
        </div>
        <div class="custom-slider-buttons-right">
            <div class="custom-slider-right">
                <div class="custom-slider-pagenb-overlay"></div>
                <i class="icon-angle-right"></i>
                <div class="custom-slider-right-pagenb">
                    <div class="custom-slider-nextSlide">10</div>
                    <div class="custom-slider-separator">/</div>
                    <div class="custom-slider-totalSlide">12</div>
                </div>
            </div>
        </div>
        <div id="custom-slider-pages"></div>
        <div id="custom-slider-timer"></div> 
    </div> 

1.
/
12
10
/
12

我建议两者结合使用。
第一个更快，因为它只访问DOM两次。第二个访问每个变量上的DOM。

但我会使用类似于：

...
$customSlider = $('#custom-slider'),
$customSliderInner = $customSlider.find('.custom-slider-inner'),
$customSliderTimer = $customSlider.find('.custom-slider-timer')
...

---

如果您决定更改

#自定义滑块中元素的内部结构，它看起来更优雅，也更优化。请发布您的HTML，以便我们了解如何最好地遍历它。第一个例子会更快。您可以使用
同级
，
查找
等来删除丑陋的链式函数调用。“第一个更快，因为它只访问DOM两次。”-事实并非如此：
.children（）
和
.next（）
方法也访问DOM。但是我同意你关于在类中使用
.find（）
的建议，因为
.children（）.next（）.next（）.children（）
内容是完全不可读的。我试图测量感谢
控制台.time（'timerName'）
。第二种方法似乎更快（1ms），而第一种方法（3ms）更慢。但使用第一个，我可以很容易地更改滑块的所有类名，但我同意这很难看而且令人困惑。所以，我应该使用.find（）？在我的例子中，它很容易使用，因为所有东西都是
$（“#自定义滑块”）