1

子コンビネータ:

#main-navigation-wrapper > .main-navigation > .top-nav > .top-menu > .in {
    /* some styling */
}

同じことを、より具体的でない方法で次のように表すことができます ( Cascading、または別の名前で呼ばれますか??):

#main-navigation-wrapper .main-navigation .in {
    /* some styling */
}

理論的には、与えられた例に従って、2 つのうちどちらがパフォーマンスと効率が向上しますか? （無視できるとは言わないでください。）

私のユースケース

コミュニティのメンバーは、私の質問で私が達成しようとしていることを説明するように常にアドバイスしてきたので、ここに行きます。

私はいくつかの JavaScript 効果にTwitter Bootstrapを使用しています。使用するスニペットは次のとおりです。

!function ($) {

  "use strict"; // jshint ;_;


 /* COLLAPSE PUBLIC CLASS DEFINITION
  * ================================ */

  var Collapse = function (element, options) {
     this.$element = $(element)
     this.options = $.extend({}, $.fn.collapse.defaults, options)

     if (this.options.parent) {
       this.$parent = $(this.options.parent)
     }

     this.options.toggle && this.toggle()
  }

  Collapse.prototype = {

     constructor: Collapse

  , dimension: function () {
       var hasWidth = this.$element.hasClass('width')
       return hasWidth ? 'width' : 'height'
     }

  , show: function () {
       var dimension
         , scroll
         , actives
         , hasData

       if (this.transitioning) return

       dimension = this.dimension()
       scroll = $.camelCase(['scroll', dimension].join('-'))
       actives = this.$parent && this.$parent.find('> .main-navigation > .top-nav > .top-menu > .in')

       if (actives && actives.length) {
         hasData = actives.data('collapse')
         if (hasData && hasData.transitioning) return
         actives.collapse('hide')
         hasData || actives.data('collapse', null)
       }

  /* and the code goes on... */

}(window.jQuery);

コードでこれを探します -- > .main-navigation > .top-nav > .top-menu > .in。

さて、それを使うべきですか、それともこれを使うべき> .main-navigation .inですか？それが私の質問です。推論は、どちらがより優れたパフォーマンスを提供し、どちらがより効率的であるかに基づいている必要があります。

よくわからない場合はお知らせください。

私の推測？

これ ( #main-navigation-wrapper > .main-navigation > .top-nav > .top-menu > .in) は、ブラウザが要素をすばやく識別するのに役立つと信じているため、より効率的でパフォーマンスが高いと思います。私は間違っているかもしれませんが、それが私が尋ねている理由です。

4

1 に答える 1

0

すべてのコメントは正しく、効果はごくわずかです。

また、2 つのルールが同じではないことも重要です。場合によっては、まったく異なる結果になることがあります。したがって、どちらを選択するかはパフォーマンスの問題ではなく、本当に欲しいものを手に入れることの問題です。

以上のことをすべて言いましたが、その通りです。子ルールが正しければ、より効率的です。

ルールを作成していて、DOM を知っていて、ルールが過度に具体的でない場合は、より効率的です。過度に具体的なルールを記述することは、DOM を知っているため回避できる問題ですが、フレームワークの作成者は回避できません。

本当に違いを生むのは、内部に多くのコンテンツがある場合です

#main-navegation-wrapper not(.main-navigation)

最初のルールは処理さえせず、2 番目のルールは処理する必要があります。

于 2013-02-01T22:10:45.677 に答える