前端菜鳥讓接口提速60%的優(yōu)化技巧案例-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司專注于洪江管理區(qū)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供洪江管理區(qū)營銷型網(wǎng)站建設(shè)，洪江管理區(qū)網(wǎng)站制作、洪江管理區(qū)網(wǎng)頁設(shè)計(jì)、洪江管理區(qū)網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造洪江管理區(qū)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供洪江管理區(qū)網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

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

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

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

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

這句話總能讓我看到光

所以這次要硬起來

我決定做一個(gè)node代理層

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

• 按需加載 -> graphQL

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

• 輪詢更新 -> schedule

代碼地址：github

按需加載 -> graphQL

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

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

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

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

定義數(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萬元' }, { name: '備胎2號(hào)', money: '26萬元' }]
    },
    {        id: 2,        name: '女神二',        iphone: 12345678910,        weixin: 'hahahahah',        height: 168,        school: '哈佛大學(xué)',        wheel: [{ name: '備胎3號(hào)', money: '80萬元' }, { name: '備胎4號(hào)', money: '200萬元' }]
    }]
}復(fù)制代碼

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

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

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

定義查詢規(guī)則

得到女神的信息描述(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é)果如下：

我們通過女神的例子，展現(xiàn)了如何通過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ì)投其所好

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

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

行就行，不行就換下一個(gè)

直奔主題，簡(jiǎn)單粗暴

緩存 -> redis

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

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

我們用redis來緩存天秀接口的聚合數(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ù)，沒有緩存就去拉取天秀接口
	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ù)，就會(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ī)共享緩存

這就是傳說中的云備胎

追求一個(gè)女神的成功率是1%

同時(shí)追求100個(gè)女神，那你獲取到一個(gè)女神的概率就是100%

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

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

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

輪詢更新 -> schedule

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

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

緩存也一樣，需要定時(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í)際情況用輪詢來設(shè)置更新緩存頻率

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

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

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

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

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

雖然女神依然看不上我

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

結(jié)尾

經(jīng)過以上三個(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)到女神打開我做的頁面

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

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

那一刻

我覺得我又行了

（完）

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

文章標(biāo)題：前端菜鳥讓接口提速60%的優(yōu)化技巧案例-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.muchs.cn/article12/dsosdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站營銷、營銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)