RXJS Observable互相阻塞问题：侧边栏选中状态延迟求助

页面左侧为可点击的文档列表（点击后选中文档），右侧是占比更大的文档内容展示区。点击大文档时，内容加载延迟1-2秒可接受，但左侧侧边栏的选中菜单项无法立即高亮，需等待右侧文档内容加载完成后才更新。

状态存储中的关键Observable #

currentDocumentId$: Observable<number> = this.select(
    state => state.currentUser.currentDocumentId
);

// 简化逻辑：点击文档ID在0-3间切换，switcher用作索引
switcher = 0;

selectedDocument$: Observable<EvahubDocument> = this.currentDocumentId$.pipe(
    combineLatestWith(this.currentPageIndex$, this.userLogs$),
    map(([docId, cpi, ls]) => {
        return ls[this.switcher++ % 3];
    })
);

App组件与模板 #

组件内代码：

currentDocumentId$ = this.store.currentDocumentId$;

模板app.component.html：

<div *ngIf="{
    currentDocumentId: currentDocumentId$ | async,
    ...
    } as asyncData"
>
    <evahub-sidenav
        ...
        [selectedDocumentId]="asyncData.currentDocumentId"
        ...
    ></evahub-sidenav>
</div>
<router-outlet></router-outlet>

路由加载的EvahubDocumentsComponent #

组件内代码：

selectedDocument$ = this.store.selectedDocument$;

模板：

<div
    *ngIf="{
        selectedDocument: selectedDocument$ | async,
        currentPageIndex: currentPageIndex$ | async
    } as asyncData"
>
{{ asyncData.selectedDocument.getDocumentContent() }}
</div>

尝试过的写法（仍存在延迟） #

selectedDocument$: Observable<any> = this.currentDocumentId$.pipe(
        mergeMap(cdi =>
            this.currentPageIndex$.pipe(
                combineLatestWith(this.userLogs$),
                map(uls => {
                    return uls[1].find(l => l.logId == cdi);
                })
            )
        )
    );

核心原因是大文档的同步加载/解析阻塞了主线程：

1. selectedDocument$发出值后，模板中调用的getDocumentContent()是同步读取10MB文本的阻塞操作，会占用主线程资源。
2. Angular的变更检测在同一主线程执行，侧边栏依赖的currentDocumentId$更新触发的变更检测，会被阻塞操作延迟，直到文档加载完成。

1. 异步化文档内容处理，释放主线程 #

使用RxJS的observeOn(asyncScheduler)，让文档内容的处理脱离当前同步执行流，不影响侧边栏的高亮更新：

import { asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';

selectedDocument$: Observable<EvahubDocument> = this.currentDocumentId$.pipe(
    combineLatestWith(this.currentPageIndex$, this.userLogs$),
    map(([docId, cpi, ls]) => {
        return ls[this.switcher++ % 3];
    }),
    // 将后续操作调度到异步队列，不阻塞主线程
    observeOn(asyncScheduler)
);

2. 给侧边栏组件启用OnPush变更检测 #

让侧边栏只在输入属性变化时触发变更检测，避免全局变更检测的延迟：

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
    selector: 'evahub-sidenav',
    templateUrl: './evahub-sidenav.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class EvahubSidenavComponent {
    @Input() selectedDocumentId: number;
    // 其他组件逻辑
}

3. 异步化文档内容读取方法 #

将getDocumentContent()改为异步方法，避免同步阻塞：

// EvahubDocument类修改
async getDocumentContent(): Promise<string> {
    // 模拟异步加载大文档（实际可替换为文件读取/缓存获取逻辑）
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(this.largeTextContent);
        }, 0); // 放到下一个事件循环执行
    });
}

模板中配合async管道使用：

<div
    *ngIf="{
        selectedDocument: selectedDocument$ | async,
        currentPageIndex: currentPageIndex$ | async
    } as asyncData"
>
    {{ asyncData.selectedDocument?.getDocumentContent() | async }}
</div>

• observeOn(asyncScheduler)将Observable的通知调度到异步队列，让currentDocumentId$的更新能立即触发侧边栏的高亮，文档加载在后台执行。
• OnPush变更检测策略确保侧边栏组件仅在输入属性变化时更新，提升响应速度。
• 异步化文档读取释放主线程，避免UI交互（如菜单项高亮）被阻塞。

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker