万能的Chrome DevTools，记录一次移动端性能诊断

受技术支持同学所托，我帮忙做了一次针对PDA上运行的活字格页面加载速度过慢的诊断。症状有一定代表性，现记录如下，希望对后来者有所帮助。

客户反馈页面加载慢的问题，而我采用的工具有：

• 活字格云，提供测试环境
• SQL Management Studio
• Chrome DevTools（在Chrome页面上按F12弹出来的那个）
  

需要调查的是一个典型的移动端页面，在一个供扫码枪输入的搜索框和简单的文字和按钮的下面，是自动加载数据的图文列表，设定为每页加载3条记录。在服务器上仅有当前一个用户时，从首页跳转到该页面时，耗时6秒。在企业软件的APDEX（这个模型对于评价性能水平很重要，不清楚的话推荐百度搜索来看看）中，通常会将1.5秒作为T值，6秒已经位于“可容忍”的上限，稍有波动就可能落到“烦躁期”。这显然是一个必须要解决的问题。

Step 1：使用Chrome DevTools跟踪“时间都去哪儿了”
如果不清楚如何用DevTools调试HAC的页面，先看这一篇 。打开DevTools的Performance页面，点击录制按钮，等待弹出的对话框中提示“Status：profiling”后，在手机上点击菜单，等到页面加载完成后，点击DevTools的停止录制按钮。你就收获到了该页面加载的全部过程记录。

在Summary（红色框）中，我们看到时间主要花在了Scripting上，Loading和Rendering耗时很少（启用了CDN和HAC的静态资源缓存，加载时间几乎可以忽略；页面确实简单，渲染时间短也是符合预期的）。在绿色框中的脚本执行记录中占大头的是WebAPI请求，WebAPI请求中耗时最长的是GetTableDataWithOffset和GetComboBindingOption。果然，在企业软件中，前端反应速度慢的症结通常在后端。

Step 2：排查执行速度慢的GetTableDataWithOffset
这是活字格内置的WebAPI，顾名思义是用来加载绑定到表格上的数据的API。在设计器上我一眼就就看到页面上隐藏区域的表格。这个表格绑定了一个视图，设置了按需加载，每次加载3行。当我打开了这个视图，发现居然只有11行记录，那，为什么这么慢？！

这时候，我们需要使用数据库的分析工具，检查这个视图背后的查询语句是否有性能风险。因为伙伴用的是MS SQL，我先尝试使用免费SSMS（SQL Server Management Studio）查看SQL语句的执行计划。连接到数据库后，在左侧的Object Explorer中找到这个视图，右键选择“Select Top 1000 Rows”，修改自动生成的脚本，去掉SELECT后面的TOP (1000)；然后，点击Query菜单，选择Display Estimate Execution Plan；右侧就显示出了这个视图查询的实际执行情况了。



新版本的SSMS已经变得“聪明”，它已经帮你找到了这个视图执行慢的原因和影响占比，并将影响最大的因素和解决方案展示到了界面上：Missing Index（84.7771）。所以，我先右键点击绿色的提示，选择“View Missing Index Detail”，执行SQL语句创建索引，再执行一遍查询计划。循环操作，直到没有绿色的提示。

在这个问题上，我们看到了数据库查询性能优化的典型手段：视图或查询语句中作为过滤条件或JOIN连接的字段，需要创建非聚簇索引（NONCLUSTERED INDEX）。随着表中数据量的增长，索引的Seek操作和无索引的Scan操作在性能上差距相当大！

增加索引后，使用DevTools再次录制Performance，发现GetTableDataWithOffset从500ms缩减到了60ms。实测有效！

Step 3：排查执行速度慢的GetComboBindingOption
这也是一个活字格内置的WebAPI，用来加载组合框的候选项目。相比于累计耗时不足1秒的表格数据绑定，这9个请求对性能的影响显然更大一些。不过，诡异的事情是，我在这个页面中，没有找到任何一个组合框！于是，我使用设计器打开了这个页面，终于在图文列表的模板中找到了三个组合框：每页加载3条记录，每条记录上有3个组合框，数目对上了！

然而，这三个组合框是隐藏的，也就是说，在加载页面时，这些组合框并没有被用到。于是，解决这个问题的思路就很清晰了，我们需要将图文列表的模板进行拆解，仅保留页面加载时必须的元素，将其他的元素，如这些组合框和配套的逻辑抽成独立的页面；然后修改模板中的按钮的点击命令，从“设置行列布局”修改为“弹出页面”。

这个问题其实是前端设计的“大坑”：页面加载阶段是用户对性能最敏感的时期，此阶段应仅加载最基础的元素，其他元素放到用户交互中，以避免加载卡顿。

从模板中去掉这些隐藏的组合框，配合前面的索引操作，页面加载时间缩短到了2秒左右，虽然称不上“流畅”，但是足以满足最终用户的期待了。