javascript - angular.js - 解析 html 函数需要 2000 毫秒甚至更多

标签 javascript angularjs angular-material

<分区>

我正在尝试加速我的网站。这是我在 Timeline/Profile JS 内的 chrome 开发人员工具中找到的。其中包含大约 150 个蓝色的 Parse HTML(在屏幕中)。

enter image description here

这是加载时间的 50%。我使用平板电脑对其进行了测试,该功能甚至花费了 15000 毫秒!我正在这样设置路线提供者:

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

怎么了?网站的完整大小为 500kb。它有 97 个作用域。

编辑:如果我在平板电脑上不使用 Angular 测试网站,加载时间为 2.5 秒(正如我在上面用 Angular 指出的那样超过 18 秒)。我愿意为解决方案付费。

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

编辑 2:我正在使用 angular-material ,我认为这可能是问题所在,这可能是所有解析 html 的原因,因为例如有很多按钮。

最佳答案

你没有发布你的代码,而是在缓慢的制造者下面:

  • 回流、重绘、解析 HTML 过多
  • 脏检查慢
  • DOM 操作过多

以下是简短的解决方案:

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

哪里出错了?

使用除 Chrome 开发人员栏之外的工具 Batarang 来调试和分析您的 angularjs 应用程序。从以下网址下载: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

在这里阅读更多:

关于javascript - angular.js - 解析 html 函数需要 2000 毫秒甚至更多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31817699/

相关文章:

javascript - 使用 waypoints.js 和 Anime.js 分别对具有相同类的元素进行动画处理

javascript - 带有 jquery.chosen 的 Angularjs - ngModel 没有得到更新

javascript - 修改ng表

Angular Material mat-tab-label

javascript - 如何在 Ajax 中使用同位素?

javascript - 比较日期和时间 Javascript

javascript - 使用 jquery 添加的按钮上的 ng-click() 不起作用

html - Md卡填充

Angular Material : error "No provider for MatChip"

javascript - 请求 JS 时未发送 cookie