最近在重构官网,为了支持SEO,整个项目的结构从采用AngularJs的单页面应用结构回归到PHP服务端渲染。问题来了:之前统一调用接口可以保证三端(APP,PC和移动web端)数据同步,现在如果是单独为PC端写一套业务逻辑,需要花费大量的时间精力,且后期维护可能比较困难(需要维护两处)。因此为了最大程度上保证数据同步,决定在通过服务器中转请求原始数据接口,然后渲染页面。经过筛选最终选定了Guzzle框架,随之而来的便是网络请求效率的问题~
这篇文章不是Guzzle的教程,虽然我也是看着文档刚折腾的。
1. 模拟环境
由于首页需要展示很多模块的数据,这意味着需要发送多个请求(大概估算了一下有18个接口)。在开发初期便发现首页打开速度非常慢,当时还以为只是接口效率的问题。后来才发现原因是:Guzzle的默认网络请求是串行的*,这意味着首页打开时间是大于等于等于所有接口请求消耗时间总和的,这是一件完全不能容忍的事情(你能忍受首页打开时间超过8秒?)。
1.1. 接口
下面是为了测试并解决这个问题所搭建的一个接口环境,采用的是node的restify框架。
let Restify = require('restify');
let plugins = require('restify-plugins');
let server = Restify.createServer();
server.use(plugins.acceptParser(server.acceptable));
server.use(plugins.authorizationParser());
server.use(plugins.queryParser());
server.use(plugins.bodyParser({mapParams: true}));
// 等待一段时间后发送响应,模拟接口耗时,根据需要可创建多个接口
server.get("test_2000",(req, res, next)=>{
setTimeout(function (){
res.send("hello after 2s");
}, 2000);
});
server.get("test_1000",(req, res, next)=>{
setTimeout(function (){
res.send("hello after 1s");
}, 1000);
});
// 请求路径 如 localhost:9999/test_100
server.listen(9999, function(){
console.log('%s listening at %s', server.name, server.url);
});
这里的test_1000接口会延迟1s响应,tes