-
Angular：性能优化清单
性能优化主要是从两方面入手，一个是网络性能，另一个是页面渲染。在具体介绍性能优化方式之前，先来解释下为什么网络性能和页面渲染会影响性能。在这里讨论的网络带宽的性能问题都是基于 HTTP/1.X，在 HTTP/2 中很多性能问题都解决了。在 HTTP/1.X 连接有三种方式：短连接，长连接和 HTTP 流水线。短连接是 HTTP/1.0 的默认模型，它每发一个请求时都会创建见一个新的 TCP 连接，收到 response 的时候就立马关闭连接，每次创建一个 TCP 连接都相当耗费资源，可想而...…
-
Angular：深入理解Angular编译机制
在这篇文章中会介绍以下内容： 为什么 Angular 需要编译。 Angular 编译机制：JiT vs AoT。 AoT 的工作原理（ngc）。 AoT 对性能的影响。为什么 Angular 需要编译Angular 是基于 TypeScript，编译打包的时候会用 tsc 将 TypeScript 编译成 es5 文件，这样在浏览器 JavaScript Virtual Machines (VM) 可以直接运行 es5 代码。那么 Angular 为什么还需要编译呢？在 Angu...…
-
RxJS：如何用 RxJS 实现高效的 HTTP 请求
在项目中，经常会碰到这样的需求：用户在输入框输入数据，需要实时调用后端 API，拿到结果显示在页面上。如果用传统方式一般实现方式是在输入框上绑定一个 keydown 或者 keyup 事件，然后每次输入值以后都调用一次后端 API，拿到返回数据。这样会有一个问题，比如我输入’limei’，l li lim lime limei这五次 keydown/keyup 分别会调用一次 API。这五个 API有五个 Response，我最后想要’limei’的结果，由于这五个 API 的 respo...…
-
Angular性能优化：Tree Shaking
在这篇文章中会介绍以下内容： 什么是 Tree Shaking，以及它对性能的影响。 如何让 Angular(6.0+) 的 Service 实现 Tree Shaking。 在 webpack4 的项目中，怎么实现 Tree Shaking。 在文章【Angular：如何在Angular(8.0)中配置Webpack】提到了 Angular 内置的编译打包方式会执行 Tree Shaking，可以提高 Angular 应用的性能。那我们先看下什么是...…
-
Angular：如何在 Angular(8.0) 中配置 Webpack
在文章【Angular：如何用Angular(<6.0)和Webpack搭建项目】中介绍了如果在 Angular 项目中想要自己配置 webpack，那么必须用命令‘ng eject’把 Angular 内置的 webpack.config 文件暴露出来，然后根据项目需求自己重写整个 webpack.config 文件。但是 Angular6.0 以上的版本，Angular 官方去掉‘ng eject’这个命令。那么 Angular6.0+ 项目中，想要根据项目需求添加或者更改 we...…
-
RxJS：所有订阅都需要调用 unsubscribe 取消订阅？
最开始用 RxJS 的时候，看官方文档对 Subscription 的介绍如下：What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an Observable. A Subscription has one important method,unsubscribe, that takes no argument ...…
-
RxJS：如何通过 RxJS 实现简单的消息通知机制
在上一篇文章【RxJS：如何通过RxJS实现缓存】里介绍了如何在 Anuglar2+ 中结合 HttpClient 和 ReplaySubject 缓存 API Response 数据，减少重复调用 API 从而提高性能，这种方法适用于每次返回的 Response 数据都不变的常量 API。在实际开发过程中，还有一种 API 返回的值随着时间会有变化，这个时候就需要去更新 RxJS缓存里的值，从用户体检的角度出发，先在页面显示一个消息通知用户数据有更新，让用户选择是否需要更新页面内容，而不...…
-
RxJS：如何通过 RxJS 实现缓存
在这篇文章中会介绍以下内容： Angular 中通过 HttpClient 执行 Http Request 返回的 Observables 是 Cold Observable。 HttpClient Observable 每次被订阅都需要调用 http request，对于公用的 API 返回同样的值，在不同页面重复调用会浪费 http 资源降低性能。 如何通过 ReplaySubject 实现缓存效果，提高性能。 HttpClient 返回的 Ob...…
-
RxJS：四种 Subject 的用法和区别
在 RxJS 中有四种 Subject 分别是：Subject，BehaviorSubject，AsyncSubject，ReplaySubject；这四种 Subject 都是特殊的 Observable。在介绍它们之前，我们先来看下这四种 Subject 与普通 Observable 的区别： Observable Subject BehaviorSubject AsyncSubject ReplaySubject ...…
-
RxJS：Cold vs Hot Observables
RxJS 中 Observables 分为两种：Cold Observables 和 Hot Observables，这两个到底有什么区别呢？我们先来看下【RxJS官方】给出的解释：Cold observables start running upon subscription, i.e., the observable sequence only starts pushing values to the observers when Subscribe is called. (…) Th...…