具有指令性能的Angular 1.4组件

Question

Background

We have a old project which is developed with Angular 1.4.8. For example:

// controller  
$scope.nameOpts = {
    ...
};
$scope.type = {
    ...
};


// view
<my-form label-width="labelWidth">
    <my-item >
        <my-item-label>
            <span class="form-title-txt fs-txt" ng-bind="i18n.name"></span>
        </my-item-label>
        <div class="clearfix">
            <div class="f-left">
                <input class="w311"
                    ng-style="{width: 2 * i18n.btn_width}"
                    ng-model="nameOpts.name"
                    ng-change="nameOpts.change(nameOpts.name)">
            </div>
        </div>
    </my-item>
    <my-item>
        <my-item-label>
            <span class="form-title-txt cmn-fs-txt" ng-bind="i18n.list_index"></span>
        </my-item-label>
        <div class="f-left" >
            <my-btn-radio-group
                items="type.items"
                selected-id="type.selectedId"
                change="type.change">
            </my-btn-radio-group>
        </div>
    </my-item>
    ...
</my-form>

We want to refactor the project with custom components using directives. The following is the code of our component.

// myNameInput component
define([], function () {
    function ctrl($scope) {
        $scope.nameOpts = {...};
        ...
    }

    return {
        templateUrl: 'name.html',
        replace: true,
        scope: {},
        controller: ctrl
    };
});

// name.html
<div>
   <my-item>
        <my-item-label>
            <span class="form-title-txt fs-txt" ng-bind="i18n.name"></span>
        </my-item-label>
        <div class="clearfix">
            <div class="f-left">
                <input class="w311"
                    ng-style="{width: 2 * i18n.btn_width}"
                    ng-model="nameOpts.name"
                    ng-change="nameOpts.change(nameOpts.name)">
            </div>
        </div>
    </my-item>
</div>

We require the component in the controller and use it in the view:

// controller
define([
    'app/components/insCharSet/charSet'
], function () {...});

// view
<my-form label-width="labelWidth">
    <my-name-input></my-name-input>
    ...
</my-form>

Problem

We can develop components with directives. But the performance is not good. Compare with the view in the previous way, the components render is slower.

I have a few questions:
1) why the custom components render slower?
2) Although the position of component my-name-input is before, actually it is rendered after my-btn-radio-group , why?
3) Is it a good practice using custom components with Angular 1.4?
4) Or what is the best practice?

Answer 1

Each time you divide your app in slices of components, it will take longer to render. AngularJS has a bunch of hidden behavior in addition of the watchers (digestion cycles, scopes inheritance etc.).

With your new directive, angularjs has to create a new scope, binding it to the virtual DOM etc. The more your create directive components, the more it will render slowly, the more you gain in consistence and maintainability.

The best practice I can advice is to upgrade your app to angular 1.5 at least, to have the real "component" features instead of using directives that are not meant to be used this way.

If you can't, depending on your app scale, it is a good idea to refactor it into components. You will gain in visibility, maintainability. Even if you have to loose some render time.

I suppose you did not lose a huge rendering time between the two versions?