前端菜鸟让接口提速60%的优化技巧案例 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下前端菜鸟让接口提速60%的优化技巧案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

平均调用时间在3 s以上

导致页面出现严重的转菊花

经过各种深度剖析与专业人士答疑

最后得出结论是:放弃医疗

鲁迅在《狂人日记》里曾说过:“<代码>能打败我的,只有女人和酒精,而不是错误 "

每当身处黑暗之时

这句话总能让我看到光

所以这次要硬起来

我决定做一个节点代理层

用下面三个方法进行优化:

<代码>按需加载→graphQL

<代码>数据缓存→复述,

<代码>轮询更新→安排

代码地址:github

按需加载→graphQL

天秀老接口存在一个问题,我们每次请求1000条数据,返回的数组中,每一条数据都有上百个字段,其实我们前端只用到其中的10个字段而已。

如何从一百多个字段中,抽取任意n个字段,这就用到graphQL。

graphQL按需加载数据只需要三步:

<李>定义数据池根 <李>描述数据池中数据结构模式李 <>李自定义查询数据查询

定义数据池

我们针对屌丝追求女神的场景,定义一个数据池,如下:

//数据池var根={女孩:[{id: 1、名称:& # 39;女神一& # 39;,手机:12345678910,weixin: & # 39; xixixixi& # 39;,身高:175年,学校:& # 39;剑桥大学& # 39;,轮:[{名称:& # 39;备胎1号& # 39;,金钱:& # 39;24万元& # 39;},{名称:& # 39;备胎2号& # 39;,金钱:& # 39;26万元& # 39;}) 　　}, 　　{id: 2,名字:& # 39;女神二& # 39;,手机:12345678910,weixin: & # 39; hahahahah& # 39;,身高:168年,学校:& # 39;哈佛大学& # 39;,轮:[{名称:& # 39;备胎3号& # 39;,金钱:& # 39;80年万元& # 39;},{名称:& # 39;备胎4号& # 39;,金钱:& # 39;200年万元& # 39;}) 　　}) 　　}复制代码

里面有两个女神的所有信息,包括女神的名字,手机,微信,身高,学校,备胎集合等信息。

接下来我们就要对这些数据结构进行描述。

描述数据池中数据结构

const {buildSchema}=要求(& # 39;graphql& # 39;);//描述数据结构schemavar模式=buildSchema (' 　　轮型{ 　　名称:字符串, 　　金钱:字符串　　} 　　{类型信息　　id: Int 　　名称:字符串　　iphone: Int 　　weixin:字符串　　高度:Int 　　学校:字符串　　轮(轮): 　　} 　　{类型查询　　女孩:[信息] 　　} 　　”);复制代码

上面这段代码就是女神信息的模式。

首先我们用<代码>类型查询定义了一个对女神信息的查询,里面包含了很多女孩女孩的信息<代码>信息> [信息]

我们在<代码> 类型信息中描述了一个女孩的所有信息的维度,包括了名字(名字),手机(iphone),微信(weixin),身高(高度),学校(学校),备胎集合(轮)