Question

当您在纯JavaScript上使用AngularJS时以及在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 resizes的验证已被弃用，其他选项是创建一个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或仅使用AngularJS与纯JS？

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)

您可以找到其他效果详情here。除了库/框架之间的比较之外，这几乎给出了关于本机的性能想法。但您还需要考虑跨浏览器和您使用的环境等规范。 Angular通常会将您绑定到DOM操作上的自己的方法（如指令），并且在角度系统中通过jquery或本机函数编辑DOM可能会导致错误。如果您知道自己在做什么，上面的数字就会显示性能结果

Answer 2

Angularjs附带jqLite

你可以拥有几乎所需的功能，休息时我确实用jQuery + Angular创建了一个应用程序，并且随着应用程序摆脱了角度的范围而多次出现冲突。

Angular广受欢迎

你可以找到jQuery的支持，你可以从angular（jqLite）本身开始。

性能

当然加载两个重型库/框架并保持其均衡会花费更多。

AngularJS vs（AnguarJS + jQuery）

2 个答案: