检查DOM"旅行的数量"当使用jQuery函数时

时间:2016-08-27 21:08:06

标签: javascript jquery performance dom

我想计算并测试jQuery在使用某些功能时所做的点击次数(阅读文档没有多大帮助)。

例如:

var $e = $('#someId');
var result = $e.is('div');

我们两次击中dom吗?或者我们使用"缓存"对象并在我们的对象中得到了答案?

我的问题是如何计算针对DOM的点击次数?

3 个答案:

答案 0 :(得分:2)

您可以尝试使用自己的方法对文档方法进行修补,这些方法会计算它们被调用的次数,即

  function watchDom() {
    var originals = {};
    var domHitsCnt = 0;
    for (var method in document) { 
      if (typeof document[method] !== 'function') {
        // skip all non-function members of document object
        continue;
      }
      (function(method) {
        originals[method] = document[method]; // save original doc. method
        document[method] = function() { // replace original doc. method with the one that count calls
          domHitsCnt++;
          return originals[method].apply(document, arguments);
        };
      })(method);
    }

    // below goes the code you want to test
    var $el = $('#d');
    $el.is('div');
    console.log(domHitsCnt);
  }

  watchDom();

A fiddler example

答案 1 :(得分:1)

可能是旧答案,我阅读了开源代码here并找到了以下内容

var $e = $('#someId');

执行JQuery.fn.init它返回JQuery对象变形选定的DOM元素

// HANDLE: $("#id")
                } else {
                    elem = document.getElementById( match[2] );

                    // Check parentNode to catch when Blackberry 4.6 returns
                    // nodes that are no longer in the document #6963
                    if ( elem && elem.parentNode ) {
                        // Handle the case where IE and Opera return items
                        // by name instead of ID
                        if ( elem.id !== match[2] ) {
                            return rootjQuery.find( selector );
                        }

                        // Otherwise, we inject the element directly into the jQuery object
                        this.length = 1;
                        this[0] = elem;
                    }

                    this.context = document;
                    this.selector = selector;
                    return this;
                }

$e.is('div');正在对象通知this

上运行
    is: function( selector ) {
    return !!selector && ( 
        typeof selector === "string" ?
            // If this is a positional selector, check membership in the returned set
            // so $("p:first").is("p:last") won't return true for a doc with two "p".
            POS.test( selector ) ? 
                jQuery( selector, this.context ).index( this[0] ) >= 0 :
                jQuery.filter( selector, this ).length > 0 :
            this.filter( selector ).length > 0 );
}

答案 2 :(得分:0)

jQuery函数,通常别名为$,是一种包含document.getElementByX的便捷方法,因此您可以搜索#的ID和.等的类所以要回答你的问题,每次调用$('#somediv')时,都会调用document.getElementById一次,并且你会得到包装为jQuery对象的元素。除非需要找到要与之比较的其他元素或执行某些操作,否则此对象的操作不会再次命中DOM。

jQuery-3.1.0.js的jQuery函数从第2897行开始,如果你想自己看一下。