来源:在生产中运行AngularJS应用程序

1.禁用DOM节点的调试数据

默认情况下,AngularJS将关于绑定和作用域的信息附加到DOM节点,并将CSS类添加到数据绑定元素

  • 作为结果ngBindngBindHtml{{...}}插值,结合数据和CSS类 附连到相应的元件。ng-binding
  • 如果编译器创建了一个新的作用域,那么作用域和 CSS 或者CSS类都被附加到相应的元素上。这些范围参考可以通过和访问 。ng-scopeng-isolated-scopeelement.scope()element.isolateScope()
  • 结构指令的占位符注释将包含有关占位符引起的指令和绑定的信息。例如<!-- ngIf: shouldShow() -->

ProtractorBatarang这样的工具需要运行这些信息,但是你可以在生产中禁用这个工具来显着提升性能:

myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

如果您希望使用此信息调试应用程序,则应在浏览器中打开调试控制台,然后在此控制台中直接调用此方法:

angular.reloadWithDebugInfo();

重新加载页面,DOM节点显示调试信息。

2.禁用注释和CSS类指令

默认情况下,AngularJS编译并执行注释和CSS类名中的所有指令。为了执行此任务,AngularJS编译器必须通过以下方式查找指令:

  • 解析所有的应用程序class类名
  • 解析所有的应用程序html注释

现在大部分AngularJS项目只使用元素和属性指令,在这样的项目中不需要编译注释和CSS类名

如果你的项目仅使用元素和属性指令,并且没有使用任何在元素CSS类或html注释中使用指令的第三方库,则可以禁用对整个应用程序的元素class类和注释的编译指令。这会导致编译性能的提高,因为编译器不需要检查注释和元素class类来查找指令。

要禁用注释和CSS类名指令使用$compileProvider

$compileProvider.commentDirectivesEnabled(false);   //禁用注释指令
$compileProvider.cssClassDirectivesEnabled(false);  //禁用CSS类名指令