angular js指令使用量在几十个至上百个时页面解析卡顿的问题

咸鱼boris 2015-08-28 09:47:25
接触angularjs不久,对于如何规范使用指令没有经验,在设计完指令后,页面中如果包含50个甚至上百个指令后,页面初始化性能就会比较差,跟原生html标签实现的界面解析性能差距有点大
举个例子:

app.directive('test', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<p ng-transclude></p>'
};
});


<test>hello world</test><test>hello world</test><test>hello world</test><test>hello world</test><test>hello world</test>
<test>hello world</test><test>hello world</test><test>hello world</test><test>hello world</test><test>hello world</test>
...50个以上


页面初始化就会开始有点顿挫感

当然这个和angular本身的解析机制有关,毕竟这种模式设计指令,每次解析时都会动态生成dom

在这个前提下,我们如果要大量的封装指令,有什么比较节省性能消耗的办法不

...全文
817 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
顾小林 2015-08-29
  • 打赏
  • 举报
回复
通过 scroll 事件,刷新当前在界面内的<test>
顾小林 2015-08-29
  • 打赏
  • 举报
回复
不知道能否做到
  • 打赏
  • 举报
回复
人家桌面上的 UI 组件,有着20多年研发历史,有很多优化措施。比如说人家会在绘制前先关闭 UI 显示,绘制完毕之后才重新恢复显示;比如说人家会把占用内存需要初始化的对象缩减到只有百分之一大小的动态数组中去动态按需(延迟加载);比如说人家会使用GPU、显卡的高性能驱动以及成熟的汇编语言开发的类库...... 而在javascript上的这些东西,比人家小20多岁,还是出生婴儿的水平,性能也低好几十倍。所以使用时就要悠着点。
  • 打赏
  • 举报
回复
不适合细粒度、递归地使用前端框架。 而粗粒度的大的组件,你能有2、3个也就可以了,又何必加载50个?
咸鱼boris 2015-08-28
  • 打赏
  • 举报
回复
自己站楼先,使用指令解析性能差的现象在移动端的web功能上表现更加明显
咸鱼boris 2015-08-28
  • 打赏
  • 举报
回复
求大神解答~~~

87,955

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧