angular.js - 解析html函数需要花费2000ms甚至更多

Question

我正在努力加速我的网站.这是我在Timeline/Profile JS中的chrome开发人员工具中发现的.在包含150那些蓝色Parse HTML(在屏幕上).

这是50%的加载时间.我用平板电脑测试了它,这个功能甚至花了15000ms!我正在设置这样的路由提供商:

var start = '<div class="important">';
var end = '</div>';
$routeProvider.when('/test', {
   template: start + 'some short text' + end
});

怎么了？网站的完整大小是500kb.它有97个范围.

编辑:如果我在平板电脑上不使用角度测试网站,加载时间是2.5秒(正如我上面指出的角度超过18秒).我愿意为解决方案买单.

我还添加了我调试的时间线数据(在平板电脑上).您可以在Chrome上查看时间表.打开开发人员控制台(F12).单击选项卡时间轴.右键单击此选项卡,然后选择加载时间轴数据.

编辑2:我正在使用角度材料,我认为这可能是问题,这可能是所有那些解析HTML的,因为有很多按钮.

Answer 1

您没有发布代码，但在慢速制造商下方：

• 太多的回流、重绘、parseHTML
• 慢脏检查
• DOM 操作过多

简而言之，解决方案如下：

• 将指令与内联模板一起使用
• 使用$templateCache
• 重用内存而不是分配新内存
• 少用手表
• 推迟元素创建
• 防止大型且复杂的 ng 重复（例如应用分页）
• 防止来自页面的多个（初始）请求

哪里出错了？

使用 Chrome 开发者栏之外的工具（例如 Batarang）来调试和分析您的 angularjs 应用程序。从以下位置下载： https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

在这里阅读更多内容：

• http://tech.small-improvements.com/2013/11/28/analysing-performance-of-angularjs-screens/
• http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html