EBMIDE——延缓显示生成，优化用户响应

<sdt id="89512093" sdtgroup="t" contentlocked="t" sdtlocked="t"><span lang="EN-US" style="font-family:'Calibri','sans-serif';font-size: 1pt; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;"><sdtpr></sdtpr><sdt id="89512082" title="文章标题" storeitemid="X_DDE42735-06F2-4F6F-91E2-8F5669EDF294" text="t" docpart="89512082" xpath="/ns0:BlogPostInfo/ns0:PostTitle"></sdt></span></sdt> 数据量大时，许多用户体现弊端都涌现了。前端界面的显示生成是性能消耗的大户。

就拿一个100多页的月明细账本作为例子。生成一页需要500ms，100页全部生成需要50秒。

时间损耗如下：

数据加载	3秒
前端数据准备	1秒
生成100个页面	50秒

用户查看第一页要等50多秒。

用户查看后续的页面几乎不耗时间。

这种情况的弊端是，第一页显示的等待时间太长了。

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><img src="https://img-my.youkuaiyun.com/uploads/201304/19/1366386633_5388.png" alt=""><stroke joinstyle="miter"><formulas><f eqn="if lineDrawn pixelLineWidth 0"><f eqn="sum @0 1 0"><f eqn="sum 0 0 @1"><f eqn="prod @2 1 2"><f eqn="prod @3 21600 pixelWidth"><f eqn="prod @3 21600 pixelHeight"><f eqn="sum @0 0 1"><f eqn="prod @6 1 2"><f eqn="prod @7 21600 pixelWidth"><f eqn="sum @8 21600 0"><f eqn="prod @7 21600 pixelHeight"><f eqn="sum @10 21600 0"></f></f></f></f></f></f></f></f></f></f></f></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"><lock aspectratio="t" v:ext="edit"></lock></path></stroke></shapetype>

这时，应采取延缓显示生成的策略，用户看到那一页才生成显示，生成后进行缓存。

时间损耗如下：

数据加载	3秒
前端数据准备	1秒
生成1个页面	0.5秒

用户查看第一页要等多4.5秒。

用户查看后续的新页面耗时0.5秒。

用户查看已看过的页面几乎不耗时间。

这种情况大幅度的改善了第一页的响应时间，弊端是，跳转到新页面时要消耗0.5秒，会让用户产生停顿感。

相关文章

EBM专栏

技术交流与合作

广州汇正软件科技有限公司

技术交流QQ：695541918