记一次微信小程序页面加载慢的排查过程

公司新上线了一个微信小程序，在测试环境以及小程序体验版上测试一切正常，但上线之后，页面加载尤其慢。

经过运维排查，所有的请求到达服务器后均在1s内处理完成并响应，偶尔有2-3s的请求，极少。

既然服务端处理请求没有问题，那么，加载可能出现在小程序本身或网络延迟，但后者可能性较低。于是，使用fiddler抓包，其中一个加载较慢的请求结果如下：

关键时间节点如下：

· 客户端与服务器完成tcp链接时间是11:31:35（时分秒）

· 客户端开始向服务端发送请求的时间是11:31:36（时分秒）

· 服务端接收到请求的时间是11:31：36（时分秒）

· 服务端开始响应的时间是11:31:46（时分秒）

也就是说，从服务器接收到请求到开始响应耗时10s，可这跟运维查看的日志结果不符！

鉴于上面的抓包结果和生产日志结果相悖，决定使用curl对耗时较长的http请求进行分析。

运行结果如下

对应的结果含义如下：

· time_namelookup ：DNS 域名解析的时候，就是把 https://zhihu.com 转换成 ip 地址的过程

· time_connect ：TCP 连接建立的时间，就是三次握手的时间

· time_appconnect ：SSL/SSH 等上层协议建立连接的时间，比如 connect/handshake 的时间

· time_redirect ：从开始到最后一个请求事务的时间

· time_pretransfer ：从请求开始到响应开始传输的时间

· time_starttransfer ：从请求开始到第一个字节将要传输的时间

· time_total ：这次请求花费的全部时间

那么对应的时间点应该敬者是：

· DNS解析耗时：0.005s

· TCP建立连接的耗时：0.035-0.005=0.03s

· SSL握手完成耗时：3.8-0.034=3.7s

· server处理数据的时间：3.8402-3.8401=0.0001s

· 总体的耗时：14.5s

emmm，按照这个结果来看，从服务器开始响应到传输完成一共耗时14.5-3.8=10.7s。

那么这里问题又来了，这结果跟fiddler的结果完全相反，到底是在哪个环节出了问题？

fiddler的结果显示从服务器接收到请求到开始响应耗时10s，是服务器处理请求消耗了10s；而curl显示服务器处理请求只用了0.0001s，响应开始到结束耗时10.7s。到底哪个是对的，难道是根据本身有问题？

于是在跟运维同事一波交流之后，得到请求流转过程如下：

客户端<---------->CDN服务器<---------->Nginx代理<---------->应用服务器<---------->DB

弄清请求流转过程之后，手动发送请求，实时查看Nginx和应用服务器日志，发现请求发出后，间隔一段时间（10s左右）Nginx日志才有输出，接着很快App Server日志也有输出（包括卜梁请求和响应）。事实就摆在眼前，是CDN服务器<---------->Nginx代理之间出现了问题，具体是为什么目前还不清楚。

那么fiddler和curl抓包的结果如何解释？

fiddler：从服务器接收到请求到开始响应耗时10s，是正确的。

curl：服务器处理请求只用了0.0001s，响应开始到结束耗时10.7s。这里就有问题了，要想解释得通，只能说time_pretransfer和time_starttransfer是CDN服务器的响应时间，由于配置了CND，在向小程序应用服务器发送请求时，会先请求到CDN服务型稿运器此时CDN服务器很快就响应了客户端的请求，但CDN服务器在转发请求到Nginx代理时出现了延迟，因此在curl的请求结果中才会看起来像是响应开始到响应结束耗时较长。

至于为什么请求从CND服务器到应用服务器会出现延迟，目前还没有结论。待更新

http://blog.51cto.com/h2ofly/1957171

http://developer.51cto.com/art/201704/536923.htm?foxhandler=RssReadRenderProcessHandler

开发一个微信小程序商城大概30分钟。

小程序开发流程分三步：

1.注册小程序

2.制作小程序

3.发布

注册小程序可以通过官方渠道，也可以免300元的认证费注册。

需要准备的材料：营业执照一张

也就是说，开通一个小程序商城可以完全免费，自主设计。官方和第三方教程都有，没有代码部分，适合小白。

第一步：注册小程序

自主注册小程序商城：

搜微信公众平台

点击立即注册

小程序注册类型选企业/机构枯缺如/组织，选择“个人”无法开通小程序商城。大概20分钟，（这里省略很多步骤，根据指引一步步 *** 作即可）信息登记完，小程序就注册成功了。通过这种方式开通小程序微信平台会收取300元的认证费。

如果有已经通过企业认证的公众号，可以快速注册小程序。

通过这种方式开通小程序商城，不需要再交300元，因为你认证公众号时已交过。

如果没有公众号，完全是第扮早一次开通，又想免去300元的认证费，可以通过轻栈注册。

免认证费“绿色通道”注册小程序商城

轻栈热衷于为商家简化开店步骤

先主体认证，这里选择企业，上传营业执照

微信小程序注册需要认证法人资料

然后回到首页>>智慧链接>>微信小程序>>绿色通道开通

法人在自己手机微信刷脸认证，审核通过，小程序即注册完成。

记得填写小程序信息：

没有省略任何步骤，在轻栈，免认证费注册小程序商城就是这么简单，甚至不需要邮箱。

第二步：开发小程序商城

这一步对小白来说很难很难，因为需要写代码。小程序都注册下来了，不要一听到写代码就说溜了溜了，因为根本不用写。

如果你的小程序是自主注册的，授权绑定，如果是通过“没启绿色通道”注册，直接去开发小程序商城。

先去电商系统上架商品，再进入Design Lab 拖拽设计，上传图片，打打文字就能完成

发布商品在这里【电商系统】

进入电商系统之后，新建分类，发布商品

浅蓝色的地方是必填，标题，选分类，价格和库存单位。

完善商品描述和商品图片，勾选蓝色店铺小图标就可以发布了。

2.然后去【Design Lab】设计页面

点选组件，按住鼠标不放拖拽到合适位置，松开，右键编辑自由发挥。

可以都试试，选择自己喜欢的效果

编辑好记得保存。

第三步：一键发布

点击右下角立即开启，回到管理微信小程序的页面，一键发布

整个开发流程三步走，耗时约30分钟。

造成这种现象的原因可能是微信程序繁忙了。

这属于正常现象，只要微信自动重启一次就好了。

资料扩展

小程序是一种不需要下载安装即可使用的档迟应用，它实现了应用“启拿触手可及”的梦想行旁李，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

---