angular的优化
https://github.com/atian25/blog/issues/5
更快地执行digest:
优化watch
$scope.$watch(watchExpression, modelChangeCallback)
不在watchExpression中做耗时的操作(dom操作),因为watchExpression在digest中可能会执行多次
避免深度watch(第三个参数为true),巧用watchCollection
减少watch
当一个dom不需要时,使用ng-if把它移除,这样会把这个dom中的所有watch都移除的,而ng-show仅仅是隐藏了dom,对应的watcher会保留
对于不会发生变化的数据,使用bindonce库来做单次绑定,避免添加watcher,以减少watcher的数量
当不再需要的时候,手动解除watch
var listener = $scope.$watch("quartz", function () {});
// ...
listener(); // Would clear the watch
更少地执行digest
可以的话使用digest而不是apply,补充$applt的源码:
function $apply(expr) {
try {
return $eval(expr);
} catch(e) {
$exceptionHandler(e);
} finally {
$root.$digest();
}
}
$setTimeout中延迟执行的代码中如果不涉及到界面更新,设置第三个参数为false,不执行apply。
dom优化
使用track by,参考:http://www.cnblogs.com/hellohello/p/8068008.html
要修改大量的dom,在指令的compile阶段进行
angular的优化的更多相关文章
- Angular前端优化思路
简单总结接下我这边angular前端优化步骤都是满满的干货,各位客官有好的改进欢迎留言~ 1. 动静分离 项目里面前端比较占用带宽的一般都是加载静态资源,请求后台接口一般占用带宽都是1kb左右,但是在 ...
- angular性能优化心得
原文出处 脏数据检查 != 轮询检查更新 谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为: ng是定时轮询去检查model是否变更.其实,ng只有在指定事件触发后 ...
- Angular性能优化实践——巧用第三方组件和懒加载技术
应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...
- Angular 1 深度解析:脏数据检查与 angular 性能优化
TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...
- Angular4--提速--提升Angular项目的首页打开速度(包含微信登录优化)
Angular项目的首页打开速度很慢,有时候会有几秒的加载时间.如果在手机端访问的话,怕是要等待十多秒,这对用户体验很差.下面参考http://www.cnblogs.com/feiyu159/p/8 ...
- Angular 的性能优化
目录 序言 变更检查机制 性能优化原理 性能优化方案 小结 参考 序言 本文将谈一谈 Angular 的性能优化,并且主要介绍与运行时相关的优化.在谈如何优化之前,首先我们需要明确什么样的页面是存在性 ...
- angular input标签只能单向传递数据的问题
angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...
- 史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
- angular常见问题总结
本文引自:https://www.cnblogs.com/zhoulujun/p/8881414.html 这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理 ...
随机推荐
- gcd(2018.10.24)
良心题,暴力枚举即可. 代码: #include<cstdio> #include<cmath> #include<algorithm> using namespa ...
- LocalBroadcastManager
LocalBroadcastManager mLocalBroadcastManager; BroadcastReceiver mReceiver; //注册通知 mLocalBroadcastMan ...
- python使用C扩展
CPython还为开发者实现了一个有趣的特性,使用Python可以轻松调用C代码 开发者有三种方法可以在自己的Python代码中来调用C编写的函数-ctypes,SWIG,Python/C API.每 ...
- AKOJ-1695-找素数
题意: 给定区间L,R. 计算区间中素数个数. 2 <= L,R <= 2147483647, R-L <= 1000000. 思路: 素数区间筛 先筛(2-sqrt(r)). 再用 ...
- Codeforces 1136E(转化+线段树维护)
题目传送 虽然线段树比较显然但是发现a数组并不好维护.考虑将a转化为好维护的数组b. 方法 这里我将k[1]设为0,对应着\[a[1] + k[1] <= a[2]\]不难得出\[a[i] + ...
- java如果去除中间空格,就不能用trim()这个方法了
public class Hello { public static void main(String[] args){ String text = "12v 4 6 5 55"; ...
- Vue 简单实用---代码可以直接用
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- vue cli 脚手架上多页面开发 支持webpack2.x
A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: ...
- phpstorm类似sublime ctrl + alt +down多光标下移
http://blog.jetbrains.com/phpstorm/2014/03/working-with-multiple-selection-in-phpstorm-8-eap/ 评论有一条回 ...
- Linux if 命令判断条件总结
Linux if 命令判断条件总结Linux if命令 关于文件属性的判断式 -a 如果文件存在 -b 如果文件存在,且该文件是区域设备文件 -c 当file存在并且是字符设备文件时返回真 -d 当p ...