ng-if 和 ng-show 的性能对比

最新推荐文章于 2021-05-08 14:23:23 发布
最新推荐文章于 2021-05-08 14:23:23 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 性能优化相关 文章标签： web前端 ng-show ng-if 性能优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yumeirener_/article/details/79602461
版权

ng-if 和 ng-show 的性能对比

当 ng-if 后的表达式为 false 时，该指令会删除它对应的 scope，所以这也就意味着如果 ng-if 之后表达式的值变化的比较频繁的话，那么对应 scope 的创建和销毁也就会比较频繁。

建议：如果你发现在你的的代码中由于使用了大量的 ng-if 而导致应用有时卡顿比较明显的话，不妨考虑一下使用 ng-show / ng-hide 这一指令，它并不会导致频繁的 scope 创建和销毁。

Amber_Ren_
关注
专栏目录
Angular.js中ng-if、ng-show和ng-hide的区别介绍
10-20
在性能方面，ng-if通常更昂贵，因为它涉及到DOM的增删操作，而ng-show和ng-hide只需要改变CSS。然而，在处理大型复杂元素或数据绑定时，ng-if的策略可以减少不必要的计算和渲染，从而提高性能。 为了正确使用这些...
angularjs之ng-if、ng-show、ng-switch那些事
weixin_30265103的博客
10-18 185
一、蓝瘦~香菇   经常在项目中使用ng-if和ng-show来处理一些简单的状态，今天碰到一个复杂的状态判断，不经让我想起ng-switch。第一次接触他的时候，我没怎么注意他，因为我直接把他当作其他语言中的switch了，甚至不知道他和ng-if、ng-show的作用相同，是用来控制元素的显示和隐藏的。    其实有语言基础的，用脚指头都能想到，switch语句在语言中为何会出现...
ng-show和ng-if的区别和使用场景
weixin_30381317的博客
10-11 784
一、ng-show（ng-hide）和ng-if都是控制标签的显示和隐藏，为什么angularjs会定义两个指令来供我们使用呢，不多多说肯定有各自的使用场景，接下来我们看哈实际原理： ng-show实质性就是控制标签的显示和隐藏，内部是display: none； ng-if则是移除标签和插入标签：； 二、实际比较 定义三个div <div ng-show="true">我...
ng-if和ng-show的区别
天马3798
12-14 3906
一、说明 在angularjs中ng-if和ng-show/ng-hide 都能实现Dom元素在界面的显示和隐藏。 但是两者不同，ng-if在表达式为false的情况下删除了Dom元素，ng-show在表达式为false的情况下是隐藏元素并没有删除。 二、实例，在Bootstrap的按钮组中圆角问题 HTML： ng-if和ng-show在bootstrap按钮组中的不同
AngularJs ng-show 和 ng-if的区别
Vision
06-01 9843
相同点： ng-show和ng-if都可以用来控制元素是否显示。当值为true时，表示显示该元素；当值为false时，表示隐藏该元素。不同点： ng-show在页面进行渲染的时候，已经将该元素加载，如果值为false，元素需要隐藏的话，在Chrome浏览器中可以查看出，渲染出来的元素仅仅是加了一个ng-hide的class，以此来控制元素的显示与否。 ng-if 在页面渲染的时候，如果值为false
(十四)ng-if与ng-show、ng-hide指令的区别和注意事项
热门推荐
aty
03-30 7万+
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide是通过改变CSS的display属性值来实现显示或隐藏的。ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。当一个元素被ng-if
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
10-19
在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。在angular性能优化中，我们也常常会用到它。这篇文章主要给大家介绍了在Angular.JS中指令ng-if、ng-show/ng-hide和ng...
Angular.JS中指令ng-if的注意事项小结
12-10
ng-if同ng-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。 当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从...
用*ngIf 代替 hidden
tanglau的专栏
06-29 1万+
在 AngularJS 1 中，如果想切换DOM元素的显示状态，估计你会用 AngularJS 1 内置的指令如： ng-show 或者 ng-hide : AngularJS 1 示例： Hello, there! 而 angular2 里，新的模版语法允许你将表达式绑定到DOM元素的任何原生属性上。 这个绝对牛逼的功能带来了无限的可能。其中一项就是绑定表达式到原生的 h
*ngif 和 显示隐藏的区别
wen_binobject的博客
11-21 1万+
1. 当隐藏子树时，它仍然留在 DOM 中。 子树中的组件及其状态仍然保留着。 即使对于不可见属性，Angular 也会继续检查变更。 子树可能占用相当可观的内存和运算资源。 当NgIf为false时，Angular 从 DOM 中物理地移除了这个元素子树。 它销毁了子树中的组件及其状态，也潜在释放了可观的资源，最终让用户体验到更好的性能。 2. 防范空指针错误 ngIf指令通常会用来防范空指针错...
angular学习笔记
weixin_43161923的博客
12-03 552
1. 作用： 1.1 AngularJS 功能 ng-app定义一个 AngularJS 应用程序，-告诉 AngularJS， 元素是 AngularJS 应用程序 的"所有者"。 ng-model:把元素值（比如输入域的值）绑定到应用程序。–实现动态绑定 ng-bind:指令把应用程序数据绑定到 HTML 视图。基本可以和{{}}等价使用 ​ 此处应用程序变量 ng-bind nam...
AngularJS ng-show 指令
tao_wei162的博客
09-26 145
http://www.runoob.com/angularjs/angularjs-directives.html AngularJS 实例 &lt;divng-app=""ng-init="person={firstName:'John',lastName:'Doe'}"&gt;&lt;p&gt;姓为 {{ person.lastName }}&lt;/p&gt;&lt;/di...
AngularJS之ng-show指令
游海东的技术专栏
11-06 4574
1、问题背景     AngularJS的ng-show指令，当值为true，HTML元素显示；当值为false，HTML元素隐藏2、实现源码 AngularJS之ng-show指令 查询 老鼠 猫 {{flag}} 3、实现源码（1）勾选复选框        勾选复选框，按钮显示，单选框隐藏     （2）取消勾选复选框
Angular应用常见错误
supertor的博客
05-08 873
1.导入所需的角度模块 Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ 此错误表明，尚未将 angular Forms Module导入到您的模块中。 Unhandled Promise rejection: No provider for HttpClient! 此错误告诉您尚未将angular HttpClient 模块导入到您的（根）模块中。 解决方案 要解决此问题，您需要将缺少的模块导入模块中。在大多数情况
angular中的显示与隐藏ng-show/ng-hide/ng-if/ng-switch
...
02-03 6802
angular中用来控制元素是否展示的指令分别有,ng-show/ng-hide/ng-if和ng-switch. ng-show/ng-hide: ng-show是满足条件就展示,ng-hide是满足条件就隐藏. 因为它们用法差不多,所以下面就单纯讲ng-show. ng-show接收的是一个boolean值,当为值true的时候就去展示DOM节点,当值为false的时候,在dom节点上
记一个Angular的问题(ng-if,ng-show)
timeless的博客
12-20 4419
AngularJs button1 button2 var app = angular.module('app', []); app.controller('mainController', ['$scope', function($scope) { $scope.l
AngularJS的ng-show使用
qq_25775675的博客
05-20 696
<li class="third-menu" ng-repeat="thirdMenu in secondMenu.thirdMenus" ng-show="thirdMenuFilter(thirdMenu)"> <a id="thirdMenu{{thirdMenu.id}}" ng-click="clickThirdMenu(thirdMenu)">{{thirdMenu.name}}</a> </li> $scope.thirdMenuFilter
解决ng-show闪现问题
weixin_34110749的博客
01-12 249
2019独角兽企业重金招聘Python工程师标准>>> ...
ng-if contains
最新发布
07-28
- *1* *2* *3* [（四下）ng-class指令，ng-style指令，ng-show/ng-hide指令，ng-if指令等....](https://blog.csdn.net/action_xing/article/details/52447396)[target="_blank" data-report-click={"spm":"1018.2226...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值