jquery存储变量类(性能)

Question

我想知道在性能方面存储类变量的最佳方式是什么。我的意思是，由于 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',

和 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> 

Answer 1

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

但我会使用类似的东西:

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

如果您决定更改#custom-slider内元素的内部结构，它看起来会更优雅，并且会得到更好的优化