前端菜鳥讓接口提速60%的優(yōu)化技巧案例

小編給大家分享一下前端菜鳥讓接口提速60%的優(yōu)化技巧案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

平均調(diào)用時間在3s以上

導(dǎo)致頁面出現(xiàn)嚴(yán)重的轉(zhuǎn)菊花

經(jīng)過各種深度剖析與專業(yè)人士答疑

最后得出結(jié)論是：放棄醫(yī)療

魯迅在《狂人日記》里曾說過：“能打敗我的，只有女人和酒精，而不是bug”

每當(dāng)身處黑暗之時

這句話總能讓我看到光

所以這次要硬起來

我決定做一個node代理層

用下面三個方法進(jìn)行優(yōu)化：

• 按需加載 -> graphQL

• 數(shù)據(jù)緩存 -> redis

• 輪詢更新 -> schedule

代碼地址：github

按需加載 -> graphQL

天秀老接口存在一個問題，我們每次請求1000條數(shù)據(jù)，返回的數(shù)組中，每一條數(shù)據(jù)都有上百個字段，其實(shí)我們前端只用到其中的10個字段而已。

如何從一百多個字段中，抽取任意n個字段，這就用到graphQL。

graphQL按需加載數(shù)據(jù)只需要三步：

• 定義數(shù)據(jù)池 root
• 描述數(shù)據(jù)池中數(shù)據(jù)結(jié)構(gòu) schema
• 自定義查詢數(shù)據(jù) query

定義數(shù)據(jù)池

我們針對屌絲追求女神的場景，定義一個數(shù)據(jù)池，如下：

// 數(shù)據(jù)池var root = {    girls: [{        id: 1,        name: '女神一',        iphone: 12345678910,        weixin: 'xixixixi',        height: 175,        school: '劍橋大學(xué)',        wheel: [{ name: '備胎1號', money: '24萬元' }, { name: '備胎2號', money: '26萬元' }]
    },
    {        id: 2,        name: '女神二',        iphone: 12345678910,        weixin: 'hahahahah',        height: 168,        school: '哈佛大學(xué)',        wheel: [{ name: '備胎3號', money: '80萬元' }, { name: '備胎4號', money: '200萬元' }]
    }]
}復(fù)制代碼

里面有兩個女神的所有信息，包括女神的名字、手機(jī)、微信、身高、學(xué)校、備胎集合等信息。

接下來我們就要對這些數(shù)據(jù)結(jié)構(gòu)進(jìn)行描述。

描述數(shù)據(jù)池中數(shù)據(jù)結(jié)構(gòu)

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定義了一個對女神信息的查詢，里面包含了很多女孩girls的信息Info，這些信息是一堆數(shù)組，所以是[Info]

我們在type Info中描述了一個女孩的所有信息的維度，包括了名字(name)、手機(jī)(iphone)、微信(weixin)、身高(height)、學(xué)校(school)、備胎集合(wheel)

定義查詢規(guī)則

得到女神的信息描述(schema)后，就可以自定義獲取女神的各種信息組合了。

比如我想和女神認(rèn)識，只需要拿到她的名字(name)和微信號(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é)果如下：

我們通過女神的例子，展現(xiàn)了如何通過graphQL按需加載數(shù)據(jù)。

映射到我們業(yè)務(wù)具體場景中，天秀接口返回的每條數(shù)據(jù)都包含100個字段，我們配置schema，獲取其中的10個字段，這樣就避免了剩下90個不必要字段的傳輸。

graphQL還有另一個好處就是可以靈活配置，這個接口需要10個字段，另一個接口要5個字段，第n個接口需要另外x個字段

按照傳統(tǒng)的做法我們要做出n個接口才能滿足，現(xiàn)在只需要一個接口配置不同schema就能滿足所有情況了。

感悟

在生活中，咱們舔狗真的很缺少graphQL按需加載的思維

渣男渣女，各取所需

你的真情在名媛面前不值一提

我們要學(xué)會投其所好

上來就亮車鑰匙，沒有車就秀才藝

今晚我有一條祖?zhèn)鞯娜旧w想與您分享一下

行就行，不行就換下一個

直奔主題，簡單粗暴

緩存 -> redis

第二個優(yōu)化手段，使用redis緩存

天秀老接口內(nèi)部調(diào)用了另外三個老接口，而且是串行調(diào)用，極其耗時耗資源，秀到你頭皮發(fā)麻

我們用redis來緩存天秀接口的聚合數(shù)據(jù)，下次再調(diào)用天秀接口，直接從緩存中獲取數(shù)據(jù)即可，避免高耗時的復(fù)雜調(diào)用，簡化后代碼如下：

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ù)，沒有緩存就去拉取天秀接口
	let result = await getAsync("緩存");    if (!result) {    	  // 拉接口
    	  const data = await 天秀接口();
          result = data;          // 設(shè)置緩存數(shù)據(jù)
          await setAsync("緩存", data)
    }   	return result;
}

list(); 

復(fù)制代碼

先通過getAsync來讀取redis緩存中的數(shù)據(jù)，如果有數(shù)據(jù)，直接返回，繞過接口調(diào)用，如果沒有數(shù)據(jù)，就會調(diào)用天秀接口，然后setAsync更新到緩存中，以便下次調(diào)用。因?yàn)閞edis存儲的是字符串，所以在設(shè)置緩存的時候，需要加上JSON.stringify(data)，為了便于大家理解，我就不加了，會把具體細(xì)節(jié)代碼放在github中。

將數(shù)據(jù)放在redis緩存里有幾個好處

可以實(shí)現(xiàn)多接口復(fù)用、多機(jī)共享緩存

這就是傳說中的云備胎

追求一個女神的成功率是1%

同時追求100個女神，那你獲取到一個女神的概率就是100%

魯迅《狂人日記》里曾說過：“舔一個是舔狗，舔一百個你就是戰(zhàn)狼”

你是想當(dāng)舔狗還是當(dāng)戰(zhàn)狼？

來吧，緩存用起來，redis用起來

輪詢更新 -> schedule

最后一個優(yōu)化手段：輪詢更新 -> schedule

女神的備胎用久了，會定時換一批備胎，讓新鮮血液進(jìn)來，發(fā)現(xiàn)新的快樂

緩存也一樣，需要定時更新，保持與數(shù)據(jù)源的一致性，代碼如下：

const schedule = require('node-schedule');// 每個小時更新一次緩存schedule.scheduleJob('* * 0 * * *', async () => {    const data = await 天秀接口();    // 設(shè)置redis緩存數(shù)據(jù)
    await setAsync("緩存", data)
});復(fù)制代碼

天秀接口不是一個強(qiáng)實(shí)時性接口，數(shù)據(jù)源一周可能才會變一次

所以我們根據(jù)實(shí)際情況用輪詢來設(shè)置更新緩存頻率

我們用node-schedule這個庫來輪詢更新緩存，* * 0 * * *這個的意思就是設(shè)置每個小時的第0分鐘就開始執(zhí)行緩存更新邏輯，將獲取到的數(shù)據(jù)更新到緩存中，這樣其他接口和機(jī)器在調(diào)用緩存的時候，就能獲取到最新數(shù)據(jù)，這就是共享緩存和輪詢更新的好處。

早年我在當(dāng)舔狗的時候，就將輪詢機(jī)制發(fā)揮到淋漓盡致

每天向白名單里的女神，定時輪詢發(fā)消息

無限循環(huán)云跪舔三件套：

• “啊寶貝，最近有沒有想我”
• “啊寶貝早安安”
• “寶貝晚安，么么噠”

雖然女神依然看不上我

但仍然時刻準(zhǔn)備著為女神服務(wù)

結(jié)尾

經(jīng)過以上三個方法優(yōu)化后

接口請求耗時從3s降到了860ms

這些代碼都是從業(yè)務(wù)中簡化后的邏輯

真實(shí)的業(yè)務(wù)場景遠(yuǎn)比這要復(fù)雜：分段式數(shù)據(jù)存儲、主從同步 讀寫分離、高并發(fā)同步策略等等

每一個模塊都晦澀難懂

就好像每一個女神都高不可攀

屌絲戰(zhàn)勝了所有bug，唯獨(dú)戰(zhàn)勝不了她的心

受傷了只能在深夜里獨(dú)自買醉

但每當(dāng)夢到女神打開我做的頁面

被極致流暢的體驗(yàn)驚艷到

在精神高潮中享受靈魂升華

那一刻

我覺得我又行了

（完）

以上是前端菜鳥讓接口提速60%的優(yōu)化技巧案例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！