小編給大家分享一下前端菜鳥讓接口提速60%的優(yōu)化技巧案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
平均調(diào)用時(shí)間在3s以上
導(dǎo)致頁(yè)面出現(xiàn)嚴(yán)重的轉(zhuǎn)菊花
經(jīng)過(guò)各種深度剖析與專業(yè)人士答疑
最后得出結(jié)論是：放棄醫(yī)療
魯迅在《狂人日記》里曾說(shuō)過(guò)：“能打敗我的，只有女人和酒精，而不是bug”
每當(dāng)身處黑暗之時(shí)
這句話總能讓我看到光
所以這次要硬起來(lái)
我決定做一個(gè)node代理層
用下面三個(gè)方法進(jìn)行優(yōu)化：
按需加載 -> graphQL
數(shù)據(jù)緩存 -> redis
輪詢更新 -> schedule
代碼地址：github
天秀老接口存在一個(gè)問(wèn)題，我們每次請(qǐng)求1000條數(shù)據(jù)，返回的數(shù)組中，每一條數(shù)據(jù)都有上百個(gè)字段，其實(shí)我們前端只用到其中的10個(gè)字段而已。
如何從一百多個(gè)字段中，抽取任意n個(gè)字段，這就用到graphQL。
graphQL按需加載數(shù)據(jù)只需要三步：
我們針對(duì)屌絲追求女神的場(chǎng)景，定義一個(gè)數(shù)據(jù)池，如下：
重慶分公司
重慶分公司
// 數(shù)據(jù)池var root = { girls: [{ id: 1, name: '女神一', iphone: 12345678910, weixin: 'xixixixi', height: 175, school: '劍橋大學(xué)', wheel: [{ name: '備胎1號(hào)', money: '24萬(wàn)元' }, { name: '備胎2號(hào)', money: '26萬(wàn)元' }]
},
{ id: 2, name: '女神二', iphone: 12345678910, weixin: 'hahahahah', height: 168, school: '哈佛大學(xué)', wheel: [{ name: '備胎3號(hào)', money: '80萬(wàn)元' }, { name: '備胎4號(hào)', money: '200萬(wàn)元' }]
}]
}復(fù)制代碼里面有兩個(gè)女神的所有信息，包括女神的名字、手機(jī)、微信、身高、學(xué)校、備胎集合等信息。
接下來(lái)我們就要對(duì)這些數(shù)據(jù)結(jié)構(gòu)進(jìn)行描述。
const { buildSchema } = require('graphql');// 描述數(shù)據(jù)結(jié)構(gòu) schemavar schema = buildSchema(`
type Wheel {
name: String,
money: String
}
type Info {
id: Int
name: String
iphone: Int
weixin: String
height: Int
school: String
wheel: [Wheel]
}
type Query {
girls: [Info]
}
`);復(fù)制代碼上面這段代碼就是女神信息的schema。
首先我們用type Query定義了一個(gè)對(duì)女神信息的查詢，里面包含了很多女孩girls的信息Info，這些信息是一堆數(shù)組，所以是[Info]
我們?cè)?code>type Info中描述了一個(gè)女孩的所有信息的維度，包括了名字(name)、手機(jī)(iphone)、微信(weixin)、身高(height)、學(xué)校(school)、備胎集合(wheel)
得到女神的信息描述(schema)后，就可以自定義獲取女神的各種信息組合了。
比如我想和女神認(rèn)識(shí)，只需要拿到她的名字(name)和微信號(hào)(weixin)。查詢規(guī)則代碼如下：
const { graphql } = require('graphql');// 定義查詢內(nèi)容const query = `
{
girls {
name
weixin
}
}
`;// 查詢數(shù)據(jù)const result = await graphql(schema, query, root)復(fù)制代碼篩選結(jié)果如下：
又比如我想進(jìn)一步和女神發(fā)展，我需要拿到她備胎信息，查詢一下她備胎們(wheel)的家產(chǎn)(money)分別是多少，分析一下自己能不能獲取優(yōu)先擇偶權(quán)。查詢規(guī)則代碼如下：
const { graphql } = require('graphql');// 定義查詢內(nèi)容const query = `
{
girls {
name
wheel {
money
}
}
}
`;// 查詢數(shù)據(jù)const result = await graphql(schema, query, root)復(fù)制代碼篩選結(jié)果如下：
我們通過(guò)女神的例子，展現(xiàn)了如何通過(guò)graphQL按需加載數(shù)據(jù)。
映射到我們業(yè)務(wù)具體場(chǎng)景中，天秀接口返回的每條數(shù)據(jù)都包含100個(gè)字段，我們配置schema，獲取其中的10個(gè)字段，這樣就避免了剩下90個(gè)不必要字段的傳輸。
graphQL還有另一個(gè)好處就是可以靈活配置，這個(gè)接口需要10個(gè)字段，另一個(gè)接口要5個(gè)字段，第n個(gè)接口需要另外x個(gè)字段
按照傳統(tǒng)的做法我們要做出n個(gè)接口才能滿足，現(xiàn)在只需要一個(gè)接口配置不同schema就能滿足所有情況了。
在生活中，咱們舔狗真的很缺少graphQL按需加載的思維
渣男渣女，各取所需
你的真情在名媛面前不值一提
我們要學(xué)會(huì)投其所好
上來(lái)就亮車鑰匙，沒(méi)有車就秀才藝
今晚我有一條祖?zhèn)鞯娜旧w想與您分享一下
行就行，不行就換下一個(gè)
直奔主題，簡(jiǎn)單粗暴
第二個(gè)優(yōu)化手段，使用redis緩存
天秀老接口內(nèi)部調(diào)用了另外三個(gè)老接口，而且是串行調(diào)用，極其耗時(shí)耗資源，秀到你頭皮發(fā)麻
我們用redis來(lái)緩存天秀接口的聚合數(shù)據(jù)，下次再調(diào)用天秀接口，直接從緩存中獲取數(shù)據(jù)即可，避免高耗時(shí)的復(fù)雜調(diào)用，簡(jiǎn)化后代碼如下：
const redis = require("redis");const { promisify } = require("util");// 鏈接redis服務(wù)const client = redis.createClient(6379, '127.0.0.1');// promise化redis方法，以便用async/awaitconst getAsync = promisify(client.get).bind(client);const setAsync = promisify(client.set).bind(client);async function list() { // 先獲取緩存中數(shù)據(jù)，沒(méi)有緩存就去拉取天秀接口
let result = await getAsync("緩存"); if (!result) { // 拉接口
const data = await 天秀接口();
result = data; // 設(shè)置緩存數(shù)據(jù)
await setAsync("緩存", data)
} return result;
}
list();
復(fù)制代碼先通過(guò)getAsync來(lái)讀取redis緩存中的數(shù)據(jù)，如果有數(shù)據(jù)，直接返回，繞過(guò)接口調(diào)用，如果沒(méi)有數(shù)據(jù)，就會(huì)調(diào)用天秀接口，然后setAsync更新到緩存中，以便下次調(diào)用。因?yàn)閞edis存儲(chǔ)的是字符串，所以在設(shè)置緩存的時(shí)候，需要加上JSON.stringify(data)，為了便于大家理解，我就不加了，會(huì)把具體細(xì)節(jié)代碼放在github中。
將數(shù)據(jù)放在redis緩存里有幾個(gè)好處
可以實(shí)現(xiàn)多接口復(fù)用、多機(jī)共享緩存
這就是傳說(shuō)中的云備胎
追求一個(gè)女神的成功率是1%
同時(shí)追求100個(gè)女神，那你獲取到一個(gè)女神的概率就是100%
魯迅《狂人日記》里曾說(shuō)過(guò)：“舔一個(gè)是舔狗，舔一百個(gè)你就是戰(zhàn)狼”
你是想當(dāng)舔狗還是當(dāng)戰(zhàn)狼？
來(lái)吧，緩存用起來(lái)，redis用起來(lái)
最后一個(gè)優(yōu)化手段：輪詢更新 -> schedule
女神的備胎用久了，會(huì)定時(shí)換一批備胎，讓新鮮血液進(jìn)來(lái)，發(fā)現(xiàn)新的快樂(lè)
緩存也一樣，需要定時(shí)更新，保持與數(shù)據(jù)源的一致性，代碼如下：
const schedule = require('node-schedule');// 每個(gè)小時(shí)更新一次緩存schedule.scheduleJob('* * 0 * * *', async () => { const data = await 天秀接口(); // 設(shè)置redis緩存數(shù)據(jù)
await setAsync("緩存", data)
});復(fù)制代碼天秀接口不是一個(gè)強(qiáng)實(shí)時(shí)性接口，數(shù)據(jù)源一周可能才會(huì)變一次
所以我們根據(jù)實(shí)際情況用輪詢來(lái)設(shè)置更新緩存頻率
我們用node-schedule這個(gè)庫(kù)來(lái)輪詢更新緩存，* * 0 * * *這個(gè)的意思就是設(shè)置每個(gè)小時(shí)的第0分鐘就開(kāi)始執(zhí)行緩存更新邏輯，將獲取到的數(shù)據(jù)更新到緩存中，這樣其他接口和機(jī)器在調(diào)用緩存的時(shí)候，就能獲取到新數(shù)據(jù)，這就是共享緩存和輪詢更新的好處。
早年我在當(dāng)舔狗的時(shí)候，就將輪詢機(jī)制發(fā)揮到淋漓盡致
每天向白名單里的女神，定時(shí)輪詢發(fā)消息
無(wú)限循環(huán)云跪舔三件套：
雖然女神依然看不上我
但仍然時(shí)刻準(zhǔn)備著為女神服務(wù)
經(jīng)過(guò)以上三個(gè)方法優(yōu)化后
接口請(qǐng)求耗時(shí)從3s降到了860ms
這些代碼都是從業(yè)務(wù)中簡(jiǎn)化后的邏輯
真實(shí)的業(yè)務(wù)場(chǎng)景遠(yuǎn)比這要復(fù)雜：分段式數(shù)據(jù)存儲(chǔ)、主從同步 讀寫分離、高并發(fā)同步策略等等
每一個(gè)模塊都晦澀難懂
就好像每一個(gè)女神都高不可攀
屌絲戰(zhàn)勝了所有bug，唯獨(dú)戰(zhàn)勝不了她的心
受傷了只能在深夜里獨(dú)自買醉
但每當(dāng)夢(mèng)到女神打開(kāi)我做的頁(yè)面
被極致流暢的體驗(yàn)驚艷到
在精神高潮中享受靈魂升華
那一刻
我覺(jué)得我又行了
（完）
以上是前端菜鳥讓接口提速60%的優(yōu)化技巧案例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
