haizlin / fe-interview

前端面试每日 3+1,以面试题来驱动学习,提倡每日学习与思考,每天进步一点!每天早上5点纯手工发布面试题(死磕自己,愉悦大家),6000+道前端面试题全面覆盖,HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.04k stars 3.24k forks source link

[angular] 第1869天 请说说在Angular中是如何进行脏检查的? #5831

Open haizhilin2013 opened 1 month ago

haizhilin2013 commented 1 month ago

第1869天 请说说在Angular中是如何进行脏检查的?

3+1官网

我也要出题

llccing commented 5 days ago

AngularJS(1.x)中的脏检查

在AngularJS(1.x)中,脏检查(Dirty Checking)是变更检测的主要机制。AngularJS通过一个称为“digest cycle”(消化周期)的过程来实现脏检查。每当有数据可能发生变化时(例如,用户输入、HTTP请求等),AngularJS会启动消化周期,遍历所有的$scope,检查每个数据绑定是否发生了变化。如果检测到变化,AngularJS会继续执行直到所有数据稳定为止。

Angular(2+)中的变更检测

在Angular 2及之后的版本中,变更检测机制得到了重大的改进,不再依赖传统的脏检查。Angular 2+ 使用了一种更高效的变更检测机制,结合了以下几种技术:

  1. Zone.js:Angular利用Zone.js来捕获异步事件。当这些事件(如用户交互、HTTP请求、定时器等)完成时,Zone.js会触发变更检测。

  2. Change Detection Strategy:Angular提供了两种变更检测策略,开发者可以选择使用:

    • Default:默认策略,遍历整个组件树进行检测。
    • OnPush:仅在输入属性发生变化或显式调用markForCheck()时进行检测,适用于纯函数组件或数据变化较少的组件,能显著提升性能。
  3. Incremental DOM:Angular的视图更新机制使用增量DOM技术,只更新发生变化的部分,而不是重新渲染整个视图。

  4. RxJS和Observable:Angular充分利用RxJS和Observable来处理异步数据流,有效减少不必要的变更检测。

总结

因此,在Angular 2及其后续版本中,“脏检查”这个词已经不再被使用,因为变更检测机制已经进行了优化和改进,不再依赖于脏检查的方式。

变更检测详细见这里 https://github.com/haizlin/fe-interview/issues/5835