web新开窗口场景降低加载耗时实战在PC端web项目中经常会出现要开新窗口打开某个页面的场景，一般来说这个新窗口（窗口B

背景

在PC端web项目中经常会出现要开新窗口打开某个页面的场景，一般来说这个新窗口（窗口B）很可能跟之前的窗口（窗口A）功能基本一致，只不过之前的窗口A打开的是a页面，新窗口B打开的B页面，其实两个窗口的内容是同一个应用，它们都是可以打开a页面和b页面的，既然是同一个应用的话，新开窗口B是不是就不必全部调用相同的接口了，我们是不是可以优化一下。

我这边的邮件项目就有类似的需求，它一个套着electron壳的web mpa项目，主窗口打开邮件页面，需要像outlook类似，能够将列表中的邮件以独立窗口形式打开，打开的这个新窗口也具备完整的邮件功能，所以它也会重新调用一系列的权限、配置接口，然后开始打开对应的邮件。

操作场景

客服在主窗口编辑邮件时可以点击切换至独立窗口，然后在独立窗口中继续进行内容编辑。

切换至独立窗口继续编辑过程请求链路示意图 file

优化过程

现状

客服点击切换后主窗口调用接口保存当前编辑内容为草稿，待接口保存成功后再打开独立窗口调用接口读取该草稿并加载至编辑器中，也就是借助服务端完成窗口切换过程中编辑内容的存取。

独立窗口同时还需要完成处理邮件流程必要的配置信息相关接口调用。

优化思路

客服点击切换后主窗口直接存储编辑内容至本地即可打开独立窗口，独立窗口直接加载本地存储内容至编辑器中，也就是直接通过本地完成窗口切换过程中编辑内容的存取。

主窗口处理邮件需要的配置信息接口数据之前在调用后完成本地存储，独立窗口加载时也直接从本地读取对应内容。

技术实现

尽量避免在各个业务逻辑中加入切换存取的代码侵入，决定将该切换过程放至ajax调用层
在主窗口发送ajax时直接对特定接口数据进行本地缓存
启动独立窗口时发送ajax时判断是直接返回上次的缓存数据，还是http请求数据

优化后接口请求流程示意图 file

数据统计

从主窗口编辑切换至独立窗口编辑主要经历以下流程

主窗口保存草稿启动独立窗口独立窗口读取配置、读取内容目前第2点启动独立窗口不可控，仅对本地存储优化的第1和第3个节点进行耗时统计

阶段对比	主窗口	独立窗口	总耗时	FCP	TTFB	LCP	FID	CLS
优化前第一次采样	194.174	1907.0	2101.2	899.65	34.945	3041.814	0.37	0.000211
优化前第二次采样	209.383	1989.0	2198.4	892.2	36.875	1832.875	0.965	0.000111
优化前第三次采样	218.134	1718.0	1936.1	842.99	31.255	2639.909	0.355	0.000211
优化前第四次采样	190.691	1659.0	1849.7	472.035	22.94	2394.439	0.395	0.000211
优化前第五次采样	208.831	1695.0	1903.8	934.26	44.26	1839.6	0.39	0.000115
总计	1021.213	8968.0	9989.2	4041.135	170.275	11748.64	2.475	0.000858
平均值	204.2	1793.6	1997.8	808.227	34.055	2349.727	0.495	0.000172
优化后第一次采样	2.0	732.0	734.0	531.03	33.055	1223.78	0.45	0.000211
优化后第二次采样	2.4	694.0	696.4	846.825	32.57	1463.194	0.43	0.000211
优化后第三次采样	2.2	806.0	808.2	568.1	36.735	1294.104	0.64	0.000211
优化后第四次采样	2.5	750.0	752.5	534.725	36.54	1099.304	0.515	0.000211
优化后第五次采样	2.7	727.0	729.7	479.25	23.65	1134.714	0.48	0.000211
总计	11.8	3709.0	3720.8	2959.93	162.55	6215.096	2.515	0.001053
平均值	2.4	741.8	744.2	591.986	32.51	1243.019	0.503	0.000211
效果对比	-201.8	-1051.8	-1253.6	-216.241		-1106.708

优化后主窗口保存草稿至独立窗口完整加载草稿的全过程平均耗时从1997.8下降至744.2，减少1253.6，下降62.7% 。

总结

上述优化属于典型的通过空间换时间，增加了少量的本地存储，却对整体耗优化效果明显。