原文出处 脏数据检查 != 轮询检查更新 谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为: ng是定时轮询去检查model是否变更.其实,ng只有在指定事件触发后,才进入$digest cycle: DOM事件,譬如用户输入文本,点击按钮等.(ng-click) XHR响应事件 ($http) 浏览器Location变更事件 ($location) Timer事件($timeout, $interval) 执行$digest()或$apply() 参考<ma…

应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和使用Angular,本文将以我司客户中最为典型的业务场景--在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能. 环境准备 全局安装Angular CLI:npm install -g @angular/cli 使用Angular…

脏数据检查 != 轮询检查更新 谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为: ng是定时轮询去检查model是否变更.其实,ng只有在指定事件触发后,才进入$digest cycle: DOM事件,譬如用户输入文本,点击按钮等.(ng-click) XHR响应事件 ($http) 浏览器Location变更事件 ($location) Timer事件($timeout, $interval) 执行$digest()或$apply() 参考<masteri…

概述 今天产品反映有个5000条数据的页面的保存按钮很慢,查看代码看到是因为点击保存按钮之后,进行了查重操作,而查重操作是用2个for循环完成了,时间复杂度是O(n^2).没办法,只能想办法优化一下了. 主要参考了这篇文章:JavaScript 高性能数组去重 源码 简单来说,这个页面的要求是查找一个数组中的重复项,并且返回重复项的行号.源码简化后如下: checkData(tableData) { // console.time('数组检查重复项时间'); // 检查重复项,检查空值(全局)…

TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面上绑定表达式的个数(单次绑定和ng-if) 给 ng-repeat 添加 track by 让 angular 复用已有元素 什么是脏数据检查(Dirty checking) Angular 是一个 MVVM 前端框架,提供了双向数据绑定.所谓双向数据绑定(Two-way data binding)…

目录 序言 变更检查机制 性能优化原理 性能优化方案 小结 参考 序言 本文将谈一谈 Angular 的性能优化,并且主要介绍与运行时相关的优化.在谈如何优化之前,首先我们需要明确什么样的页面是存在性能问题?好的性能的衡量指标是什么?性能优化背后的原理又是如何的?如果你对这些问题感兴趣,那么就请继续读下去. 变更检测机制 不同于网络传输优化,运行时优化更加关注于 Angular 的运行机制以及如何编码才能有效地避免性能问题(最佳实践).而要弄明白 Angular 的运行机制,首先需要理解它的变更…

隔了很久没写东西了,主要是最近比较忙,更主要的是最近比较懒...... 其实这篇很早就想写了 工作和生活中经常可以看到一些程序猿,写代码的时候只关注代码的逻辑性,而不考虑运行效率 其实这对大多数程序猿来说都是没有问题的 不过作为一只有理想的CodeMonkey,我还是希望给大家分享一些性能优化心得 曾经在网上听过这样一句话 程序的可读性和性能是成反比的 我非常赞同这句话,所以对于那些极度影响阅读的性能优化我就不在这里赘述了 今天主要说的就是一些举手之劳即可完成的性能优化 减少重复代码 这是最基本…

转载一个别人的文章 隔了很久没写东西了,主要是最近比较忙,更主要的是最近比较懒…… 其实这篇很早就想写了 工作和生活中经常可以看到一些程序猿,写代码的时候只关注代码的逻辑性,而不考虑运行效率 其实这对大多数程序猿来说都是没有问题的 不过作为一只有理想的CodeMonkey,我还是希望给大家分享一些性能优化心得 曾经在网上听过这样一句话 程序的可读性和性能是成反比的 我非常赞同这句话,所以对于那些极度影响阅读的性能优化我就不在这里赘述了 今天主要说的就是一些举手之劳即可完成的性能优化 减少重复代码…

一个web项目后期的维护主要在于性能方面.数据吞吐量一旦增大各种bug都出来了.那些通过硬件<数据库分表,数据库主从分离,读写分离>等的一些手段此处就不多说了.本文主要在编码方面做一个性能的比较.如果项目必须在毫秒的基础上在做性能的提升,那编码也是调优的重中之重了. 一,比较耗费性能的关键代码和替代方案: 1,字符串的拼接,特别在一个循环中做字符串的拼接比比较耗费性能的.替代方案可以通过 类stringbuilder来替代.效率更高.这一点相信大家都知道的. 2,序列化和反序列化也是比较耗费性…

计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重…