AngularJS与（AngularJS + jQuery）的比较

Question

我有一个关于使用纯JavaScript和使用jQuery与AngularJS一起使用时的性能问题。

例如：

app.directive('fitHeight', function($window) {
    return {
        restrict: 'A',
        link: function(s){
            s.contentminHeight = $window.innerHeight - 40 + 'px';
            var h = $window.innerHeight;
            $(window).resize(function() {
                if ( h !== $window.innerHeight ) {
                    h = $window.innerHeight;   
                    s.contentminHeight = ( h - 40 ) + 'px';
                    s.$apply();
                }
            });
        }
    };
});

我看到使用AngularJS对$window的大小进行验证已被弃用，其他选项是创建一个Interval来检查，我发现jquery.resize更可接受。

或者

app.directive('leftmenuDropdown', function() {
    return {
        restrict: 'C',
        link: function(s, e){    
            e.click(function(){
                var m = $(e.parent().find("ul")[0]);
                if ( m.hasClass('dd-open') ) { m.removeClass('dd-open') } else { m.addClass('dd-open') }
            });
        }
    };
});

我在Google上搜索了一下，理解为.hasClass比纯JavaScript更快。

关于性能问题，应该怎么做？是保留jQuery和AngularJS还是只使用纯JS的AngularJS?

- user3032469

Answer 1

我正在搜索关于库的DOM查询性能，并看到以下结果：

vanilla - document.getElementById('test-table') => 12,137,211 (ops/sec)
Dojo - dojo.byId('test-table') => 5,443,343 (ops/sec)
Prototype - $('test-table') => 2,940,734 (ops/sec)
jQuery - $('#test-table') => 350,557 (ops/sec)
YUI - YAHOO.util.Dom.get('test-table') =>   326,534 (ops/sec)
MooTools - document.id('test-table') => 78,802 (ops/sec)

在这里查看其他性能细节。 这基本上是关于原生性能的概念，而不是库/框架之间的比较。但您还需要考虑跨浏览器和使用的环境等规格。Angular通常将您绑定到其自己的DOM操作方法（如指令）上，并且在angular系统中通过jquery或本地函数编辑DOM可能会导致功能失效。如果您知道自己在做什么，则上述数字显示了性能结果。

- erdysson

---

如果您对VanillaJS感到困惑，它是一个玩笑，提醒开发人员编程仍然可以在不需要额外的JavaScript库的情况下完成 :)。 - sjokkogutten

确切地说 :) 而且更有趣 - erdysson

Answer 2

AngularJS自带jqLite

• 你可以在其中获得几乎所有所需的功能，但是如果使用jQuery + Angular创建应用程序，则可能会因为应用程序超出Angular范围而发生冲突。

Angular非常受欢迎

• 您将像使用jQuery一样获得对它的支持，您可以从angular（jqLite）开始。

性能

• 当然，加载两个较重的库/框架并维护它们的平衡将会花费更多的代价。

- anshulix