前端性能优化原因和思路

原因

由于业务需求，加了多站点多时区功能后，进入菜单初始化时经常会卡的动不了，表现为点什么都没用，因此做了性能优化。

过程

1. 首先分析后端接口，发现最久的接口请求了2.51秒，但是在前端加载了明显不止2.51秒
2. 继续排查，用浏览器的性能工具录制，发现长任务执行占用8秒，线程在执行脚本从而阻塞了渲染

3. 排查前端代码，联想到在多站点需求中，前端在拦截器中加入了数据遍历，用来处理后端传回来的日期格式时间，打印时间定位到问题确实出在这

优化

既然是数据处理方面的原因，我们不妨想到用webworker来单独处理这部分数据，从而把主线程资源腾出来让浏览器进行渲染

map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    if (event.body && event.body.code === 0 && !!event.body.data && !!environment.dataUnzip) {
                        const worker = new Worker(new URL('./timeProcessor-worker.js', import.meta.url));
                        const data = this.unzip(event.body.data, request.url);
                        const clonedResponse = event.clone();
                        
                        return new Promise((resolve) => {
                            worker.postMessage({ input: data, defaultStation: this.defaultStation });
                            
                            worker.onmessage = (e: MessageEvent) => {
                                worker.terminate();
                                resolve(event.clone({
                                    body: {
                                        ...event.body,
                                        data: e.data
                                    }
                                }));
                            };
                            
                            worker.onerror = (error) => {
                                worker.terminate();
                                resolve(clonedResponse);
                            };
                        });
                    }

                    if (event.body && event.body.code !== 0) {
                        if (event.body.code === -2) {
                            this.notification.create(
                                'error',
                                this.translateService.instant('登录信息过期'),
                                this.translateService.instant('请重新登录'));
                            this.modalService.closeAll();
                            setTimeout(() => {
                                this.router.navigate(['/login']);
                            }, 3000);
                            return event;
                        }

                        if (event.body.message) {
                            this.notification.create(
                                'error',
                                this.processErrorMsg(event.body.message),
                                '');
                        }
                    }
                }
                return event;
            }),
 switchMap((eventPromise: any) => {
                return eventPromise instanceof Promise ? from(eventPromise) : from([eventPromise]);
            }),