站长资讯网Angular如何进行优化？下面本篇文章给大家了解一下Angular中的性能优化，希望对大家有所帮助！
本文将谈一谈 Angular 的性能优化，并且主要介绍与运行时相关的优化。在谈如何优化之前，首先我们需要明确什么样的页面是存在性能问题？好的性能的衡量指标是什么？性能优化背后的原理又是如何的？如果你对这些问题感兴趣，那么就请继续读下去。【相关教程推荐：《angular教程》】
变更检测机制
不同于网络传输优化，运行时优化更加关注于 Angular 的运行机制以及如何编码才能有效地避免性能问题（最佳实践）。而要弄明白 Angular 的运行机制，首先需要理解它的变更检测机制（也被称为脏检查）——如何将状态的变更重新渲染到视图之中。而如何将组件状态的变化反应到视图中，也是前端三大框架都需要解决的一个问题。不同框架的解决方案既有类似的思路也有各自的特色。
首先，Vue 和 React 都是采用虚拟 DOM 来实现视图更新，不过具体实现上还是有所区别：
对于 React：
-
通过使用
setState或forceUpdate来触发render方法更新视图 -
父组件更新视图时，也会判断是否需要
re-render子组件
对于 Vue：
-
Vue 会遍历
data对象的所有属性，并使用Object.defineProperty把这些属性全部转为经过包装的getter和setter -
每个组件实例都有相应的
watcher实例对象，它会在组件渲染的过程中把属性记录为依赖 -
当依赖项的
setter被调用时，会通知watcher重新计算，从而使它关联的组件得以更新
而 Angular 则是通过引入 Zone.js 对异步操作的 API 打补丁，监听其触发来进行变更检测。关于 Zone.js 的原理在之前的一篇文章中有详细的介绍。简单来说，Zone.js 通过 Monkey patch （猴补丁）的方式，暴力地将浏览器或 Node 中的所有异步 API 进行了封装替换。
比如浏览器中的 setTimeout：
let originalSetTimeout = window.setTimeout; window.setTimeout = function(callback, delay) { return originalSetTimeout(Zone.current.wrap(callback), delay); } Zone.prototype.wrap = function(callback) { // 获取当前的 Zone let capturedZone = this; return function() { return capturedZone.runGuarded(callback, this, arguments); }; };
或者 Promise.then方法：
let originalPromiseThen = Promise.prototype.then; // NOTE: 这里做了简化，实际上 then 可以接受
