在DOM角纳克级的性能问题，当太多的元素 [英] Angular ng-class performance issue when too many elements in DOM

查看：114
本文介绍了在DOM角纳克级的性能问题，当太多的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在努力已导致性能问题，一个复杂的角度页面上。为了突出我创建了一个小提琴 http://jsfiddle.net/4ex2xgL1/3/ 在这里。问题

本质性能问题是由具有的功能在里面NG-class语句引起的。 

 ＆LT;跨度类=完成 -  {{todo.done}}NG-CLASS =MyFunction的（）＆GT; {{todo.text}}＆LT; / SPAN＆GT ;

跨度是在NG-重复。在运行小提琴可以看出，纳克级被执行多次在页面加载时，并在每个键上了它被称为很多时间在TODO列表中的项目数量。

这是很多简单的情况下，在我来说，我有我的网页上780项目和功能，最终aroung 3000次被评价！

其中我们看到了解决的就是分手的范围，但它会引起我的应用程序几乎是重写。

我们也试过 https://github.com/Pasvaz/bindonce 但它似乎并不具有高度合作动态内容。

有什么想法？


解决方案

我终于找到了解决办法，这将帮助很多需要提高的角度JS性能。

如果你的模型是动态变化的，如果你有大量的数据，然后它也提高AngularJS网页渲染高达1000％以上 - ！没有开玩笑

富勒更多信息，您可以访问：的http：// orangevolt .blogspot.in / 2013/08 /超-您-angularjs-apps.html

按照以下步骤：


  1. 从下载的链接库：库

2.example无库（请检查您的控制台）

\r
\r

函数myController的（$范围）{\r
    VAR项= [\r
        {标签：'一'，值：第一项}，\r
        {标签：两节，值：'第二个条目}，\r
        {标号：'三'，值：'第三条'}\r
    ];\r
    \r
    $ scope.label =;\r
    $ scope.value =;\r
    $ scope.order =标签;\r
    \r
    $ scope.add =功能（）{\r
        entries.push（{\r
            标签：$ scope.label，\r
            价值：$ scope.value\r
        }）;\r
    };\r
        \r
    $ scope.getEntries =功能（）{\r
        控制台和放大器;＆安培;的console.log（getEntries（）叫做）;\r
        返回条目;\r
    };\r
}

\r

＆LT;脚本SRC =htt​​ps://raw.githubusercontent.com/lodash /lodash/2.4.1/dist/lodash.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;表格名称=MyForm的NG-NG应用程序控制器=myController的＆GT;\r
    标签/值：\r
    ＆LT;输入类型=文本要求NG-模式=标签＆GT;\r
    ＆LT;输入类型=文本要求NG-模式=值＆GT;\r
    ＆LT;按钮\r
        NG-禁用=！MyForm的$有效\r
        NG-点击=增加（）\r
    ＆gt;添加＆LT; /按钮＆GT;\r
        \r
    ＆LT;＆字段集GT;\r
        ＆LT;传奇＆GT;\r
            参赛作品由排序\r
            ＆LT;选择\r
                NG-模式=秩序\r
                NG-选项=属性为['标签'，'值']属性＆GT;\r
            ＆LT; /选择＆GT;\r
        ＆LT; /传说＆GT;\r
        ＆LT; D​​IV NG重复=在getEntries（）入口|排序依据：为了＆GT;\r
            {{entry.label}} ={{entry.value}}\r
        ＆LT; / DIV＆GT;\r
    ＆LT; /字段集＆GT;\r
＆LT; /形式为GT;

\r

\r
\r

3.example与库（请检查您的控制台）

\r
\r

函数myController的（$范围）{\r
    VAR项= [\r
        {标签：'一'，值：第一项}，\r
        {标签：两节，值：'第二个条目}，\r
        {标号：'三'，值：'第三条'}\r
    ];\r
    \r
    $ scope.label =;\r
    $ scope.value =;\r
    $ scope.order =标签;\r
    \r
    $ scope.add =功能（）{\r
        entries.push（{\r
            标签：$ scope.label，\r
            价值：$ scope.value\r
        }）;\r
            // 清除缓存\r
        $ scope.getEntries.cache = {};\r
    };\r
        \r
    $ scope.getEntries = _.memoize（\r
        功能（）{\r
            控制台和放大器;＆安培;的console.log（getEntries（）排序'+ $ scope.order +'称为）;\r
                //返回由$ scope.order的值排序项\r
            返回_.sortBy（条目，$ scope.order）;\r
        }，\r
        功能（）{\r
                //返回缓存键当前结果存储\r
            返回$ scope.order;\r
        }\r
    ）;\r
}

\r

＆LT;脚本SRC =htt​​ps://raw.githubusercontent.com/lodash /lodash/2.4.1/dist/lodash.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;表格名称=MyForm的NG-NG应用程序控制器=myController的＆GT;\r
    标签/值：\r
    ＆LT;输入类型=文本要求NG-模式=标签＆GT;\r
    ＆LT;输入类型=文本要求NG-模式=值＆GT;\r
    ＆LT;按钮\r
        NG-禁用=！MyForm的$有效\r
        NG-点击=增加（）\r
    ＆gt;添加＆LT; /按钮＆GT;\r
        \r
    ＆LT;＆字段集GT;\r
        ＆LT;传奇＆GT;\r
            参赛作品由排序\r
            ＆LT;选择\r
                NG-模式=秩序\r
                NG-选项=属性为['标签'，'值']属性＆GT;\r
            ＆LT; /选择＆GT;\r
        ＆LT; /传说＆GT;\r
        ＆LT; D​​IV NG重复=在getEntries条目（）＆GT;\r
            {{entry.label}} ={{entry.value}}\r
        ＆LT; / DIV＆GT;\r
    ＆LT; /字段集＆GT;\r
＆LT; /形式为GT;

\r

\r
\r

I have been working on a complex angular page which has been causing performance issue. To highlight the problem I have created a fiddle http://jsfiddle.net/4ex2xgL1/3/ here.

Essentially the performance issue is being caused by ng-class statement which has a function in it. 

<span class="done-{{todo.done}}" ng-class="myfunction()">{{todo.text}}</span>

The span is in an ng-repeat. On running the fiddle one can see that ng-class gets executed several times when the page loads and on each key up it gets called as many time as number of items in the TODO list.

This is a lot simpler case, in my case I have 780 items on my page and the function ends up being evaluated aroung 3000 times!

One of the solution we saw is to break up the scope but it will cause almost a rewrite of my app.

We also tried https://github.com/Pasvaz/bindonce but it doesn't seem to be working with highly dynamic content.

Any thoughts?

解决方案

Finally I found the solution and it will helps lot to improve performance in angular js.

If your model changes dynamically and if you have lots of data and then also it improve AngularJS pages rendering up to 1000% and more - no kidding !.

Fore more information you can visit : http://orangevolt.blogspot.in/2013/08/superspeed-your-angularjs-apps.html

Follow the steps:

  1. download the library from the link:library

2.example without library:(check your console)

function MyController( $scope) {
    var entries = [ 
        { label : 'one', value : 'first entry'}, 
        { label : 'two', value : 'second entry'}, 
        { label : 'three', value : 'third entry'}
    ];
    
    $scope.label ="";
    $scope.value ="";
    $scope.order = 'label';
    
    $scope.add = function() {
        entries.push({ 
            label : $scope.label, 
            value : $scope.value
        });
    };
        
    $scope.getEntries = function() {
        console && console.log( "getEntries() called");
        return entries;
    };
}

<script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<form name="myform" ng-app ng-controller="MyController">
    Label/Value :
    <input type="text" required ng-model="label">
    <input type="text" required ng-model="value">
    <button 
        ng-disabled="!myform.$valid" 
        ng-click="add()"
    >Add</button>
        
    <fieldset>    
        <legend>
            Entries sorted by 
            <select 
                ng-model="order" 
                ng-options="property for property in [ 'label', 'value']">
            </select>
        </legend>
        <div ng-repeat="entry in getEntries() | orderBy:order">
            {{entry.label}} = "{{entry.value}}"
        </div>
    </fieldset>
</form>

3.example with library:(check your console)

function MyController( $scope) {
    var entries = [ 
        { label : 'one', value : 'first entry'}, 
        { label : 'two', value : 'second entry'}, 
        { label : 'three', value : 'third entry'}
    ];
    
    $scope.label ="";
    $scope.value ="";
    $scope.order = 'label';
    
    $scope.add = function() {
        entries.push({ 
            label : $scope.label, 
            value : $scope.value
        });
            // clear cache
        $scope.getEntries.cache = {};
    };
        
    $scope.getEntries = _.memoize( 
        function() {
            console && console.log( "getEntries() sorted by '" + $scope.order + " 'called");
                // return entries sorted by value of $scope.order
            return _.sortBy( entries, $scope.order);
        }, 
        function() { 
                // return the cache key for the current result to store 
            return $scope.order;
        }
    );
}

<script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<form name="myform" ng-app ng-controller="MyController">
    Label/Value :
    <input type="text" required ng-model="label">
    <input type="text" required ng-model="value">
    <button 
        ng-disabled="!myform.$valid" 
        ng-click="add()"
    >Add</button>
        
    <fieldset>    
        <legend>
            Entries sorted by 
            <select 
                ng-model="order" 
                ng-options="property for property in [ 'label', 'value']">
            </select>
        </legend>
        <div ng-repeat="entry in getEntries()">
            {{entry.label}} = "{{entry.value}}"
        </div>
    </fieldset>
</form>

这篇关于在DOM角纳克级的性能问题，当太多的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆