-
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...…
-
RxJS入门和概览
RxJS 是Reactive Extensions For JavaScript的简写,它是一个强大的 JavaScript Reactive 编程库。Reactive 是指响应式编程(Reactive Programming)。什么是响应式编程(Reactive Programming)?任何异步事件(比如页面鼠标 click 事件),在响应式编程都是异步事件流。不仅仅是 click、hover 这种事件,任何变量、用户输入、属性、缓存、数据结构等,响应式编程把所有事物都看成是数据流。数...…
-
HTTP/3 新特性
这篇文章主要会介绍以下内容: HTTP/2 的缺陷 QUIC 协议介绍 HTTP/3 新特性HTTP/2 的缺陷在上一篇文章 【HTTP/2 新特性】 里介绍了 HTTP/2 是基于 TCP 传输,但是 TCP 协议还是有两个个致命的缺陷: 建立连接时间长 队头阻塞问题相较于 HTTP/1.1 更严重1. 建立连接时间长目前是用 RTT(Round-Trip Time)来定义建立时间,RTT 指的是往返时间,表示从发送端发送数据开始,到发送端收到来自接受端的确认(接收端收到数据后...…
-
HTTP/2 新特性
本文主要会介绍以下内容: HTTP/1.x 协议的性能缺陷 为了优化 HTTP/1.x 的网络性能问题,前端用到的黑魔法 HTTP/2 新特性 HTTP/1.x 的 keep-alive 与 HTTP/2 多路复用的区别 HTTP/2 缺陷HTTP/1.x 协议的性能缺陷1. TCP 连接导致的性能瓶颈从上图可以看出,HTTP 的传输协议主要依赖于 TCP 来提供从客户端到服务器端之间的连接。TCP 建立连接有三次握手,加上 TCP 慢启动导致的传输速度低,打开和保持 TCP 连...…
-
Angular:ngDoCheck执行时机
在 Angular官方文档 对ngDoCheck执行时机是这么描述的:Detect and act upon changes that Angular can't or won't detect on its own.Called during every change detection run, immediately after ngOnChanges() and ngOnInit().直译过来就是: 在状态发生变化,Angular 自己本身不能捕获这个变化时会触发NgDo...…
-
Angular Change Detection:变化检测策略
在【Angular Change Detection:变化检测机制】这篇文章里介绍了 Angular 的变化检测机制,也提到了异步事件都会触发整个 Angular 应用的变化检测。Angular 默认的变化检测机制是ChangeDetectionStrategy.Default:异步事件 callback 结束后,NgZone 会触发整个组件树至上而下做变化检测,如下所示:但是在实际应用里,并不是每个异步操作需要变化检测,某些组件也可以完全不用做变化检测,应用越大页面越复杂,过多的变化检测...…
-
Angular Change Detection:变化检测机制
Angular 中的变化检测机制是当 component 状态有变化的时候,Angular 都能检测到这些变化,并且能够将这些变化反应到页面上。比如有这样一个 component,代码如下:@Component({ template:`<h1>I am <span [textContent]="data.name"></span><h1>`})export class CDParentComponent { data : any = { ...…