道招

web新开窗口场景降低加载耗时实战

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

web新开窗口场景降低加载耗时实战

背景

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

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

操作场景

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

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

优化过程

现状

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

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

优化思路

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

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

技术实现
  1. 尽量避免在各个业务逻辑中加入切换存取的代码侵入,决定将该切换过程放至ajax调用层
  2. 在主窗口发送ajax时直接对特定接口数据进行本地缓存
  3. 启动独立窗口时发送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%

总结

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

更新时间:
上一篇:记录CKEditor4删除文本引起文本分割而升级版本的经历下一篇:axios请求https网站报错Unable to verify the first certificate

相关文章

关注道招网公众帐号
联系博主