搜索自動(dòng)提示功能JS優(yōu)化

CloudwiseAPM 發(fā)布于2019-08-21 10:22 / 3155人閱讀

摘要：我的博客原文直奔主題，和百度的搜索框都會(huì)有這種自動(dòng)提示關(guān)聯(lián)詞條的功能，自己最近接觸的項(xiàng)目也有多個(gè)地方要做這個(gè)功能，后臺(tái)開(kāi)發(fā)咱不懂，所以從前端方面來(lái)說(shuō)說(shuō)這個(gè)功能的主要兩點(diǎn)性能優(yōu)化。

我的博客原文：http://arayzou.com/2013/12/18/%E6%90%9C%E7%B4%A2%E8%87%AA%E5%8A%A8%E6%8F%90%E7%A4%BA%E5%8A%9F%E8%83%BDJS%E4%BC%98%E5%8C%96/

直奔主題，google和百度的搜索框都會(huì)有這種自動(dòng)提示關(guān)聯(lián)詞條的功能，自己最近接觸的項(xiàng)目也有多個(gè)地方要做這個(gè)功能，后臺(tái)開(kāi)發(fā)咱不懂，所以從前端JS方面來(lái)說(shuō)說(shuō)這個(gè)功能的主要兩點(diǎn)性能優(yōu)化。

首先這個(gè)搜索框如果要觸發(fā)自動(dòng)提示的詞條，肯定是每次keyup（咱們老大說(shuō)keyup事件在某些瀏覽器里有問(wèn)題，建議用keydown，但是我沒(méi)發(fā)現(xiàn)問(wèn)題，而且我覺(jué)得keyup后觸發(fā)在某些情景下比keydown下要好，所以我用的keyup）事件后根據(jù)現(xiàn)在input里的value值來(lái)遍歷相關(guān)聯(lián)詞條.

所以每次keyup后得到input里的value值，都需要根據(jù)value值請(qǐng)求后臺(tái)來(lái)返回相關(guān)詞條的內(nèi)容，這里的ajax請(qǐng)求是用jsonp來(lái)做的，開(kāi)發(fā)那邊給到我一個(gè)地址格式，大概是這樣:
http://xxx.com/xxx/xxx?X13XJsoncallback=jQuery17109596129641868174_1387338048392&keyword=1
兩個(gè)關(guān)鍵的地方就是Jasoncallback和keyword，Jasoncallback是jsonp的格式，然后keyword后面跟的就是搜索的關(guān)鍵字，ajax代碼大概是這樣：


$.ajax({
     type: "get",
     url: "http://xxx.com/xxx/xxx?",
     dataType: "jsonp",
     data:"Keyword=" + encodeURIComponent(inputvalue),
     jsonp: "Jsoncallback",
     jsonpCallback:"askTag",//任意值，即jasoncallback后的值
     success: function (data) {
          //顯示自動(dòng)提示框，給框里填關(guān)聯(lián)詞條的內(nèi)容
     },
     error: function () {
          //alert("返回失敗!");
     }
});

好了，到這里這個(gè)功能就做好了，用戶在每次keyup之后都會(huì)調(diào)用ajax來(lái)請(qǐng)求后臺(tái)數(shù)據(jù)然后顯示關(guān)聯(lián)詞條。

現(xiàn)在說(shuō)下JS優(yōu)化部分，當(dāng)你做到剛才說(shuō)的那些之后，你會(huì)發(fā)現(xiàn)你每輸入一個(gè)字母都會(huì)調(diào)用一次ajax，這樣的ajax調(diào)用太頻繁了而且沒(méi)有必要，拿最流行的搜狗拼音輸入法來(lái)說(shuō)，你每輸入一個(gè)字母，都已經(jīng)是給input賦值了，這樣都會(huì)調(diào)用一次ajax，但是這時(shí)候的拼音所關(guān)聯(lián)的內(nèi)容基本上不會(huì)是你想要的，你想要的只是打出來(lái)的漢字所關(guān)聯(lián)的內(nèi)容。

1、ajax調(diào)用做下延遲執(zhí)行

我們肯定做不到根據(jù)輸入內(nèi)容來(lái)判斷是否執(zhí)行ajax關(guān)聯(lián)，但是我們可以對(duì)ajax調(diào)用做下延遲執(zhí)行。這樣當(dāng)用戶輸入內(nèi)容時(shí)，如果兩次按鍵的間隔時(shí)間過(guò)小（我認(rèn)為大概在200毫秒，可以根據(jù)自己的服務(wù)器速度和用戶體驗(yàn)來(lái)調(diào)整這個(gè)時(shí)間），就可以當(dāng)做他是在繼續(xù)輸入他想要的內(nèi)容，這時(shí)候沒(méi)有必要來(lái)顯示關(guān)聯(lián)內(nèi)容。代碼如下：


var timeout = 0;
$("input").keyup(function(){
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        $.ajax({
        });
    },200);
});

好了，這樣就可以有效的減少?zèng)]必要的ajax請(qǐng)求了。

2、ajax請(qǐng)求到的內(nèi)容作緩存

第二點(diǎn)優(yōu)化是給ajax請(qǐng)求到的內(nèi)容作緩存，大概意思就是說(shuō)，你輸入了“上海”，這時(shí)候做了一次ajax請(qǐng)求，然后你繼續(xù)輸“上海東方明珠”，這時(shí)候又有一次ajax請(qǐng)求，然后你把“東方明珠”刪掉了，這時(shí)候input里的值是“上海”，前面已經(jīng)請(qǐng)求過(guò)一次“上海”的ajax請(qǐng)求了，現(xiàn)在又要重復(fù)請(qǐng)求一次關(guān)鍵字是“上海”的ajax請(qǐng)求。

這樣的話就有點(diǎn)浪費(fèi)，所以我們可以把每次ajax請(qǐng)求的關(guān)鍵字和請(qǐng)求得到的內(nèi)容先存到一個(gè)變量a中去，然后每次keyup后先判斷變量a里有沒(méi)有這個(gè)關(guān)鍵字所請(qǐng)求到的內(nèi)容，如果有，就讀取現(xiàn)有的內(nèi)容，如果沒(méi)有再請(qǐng)求ajax，這樣又可以有效的減少ajax請(qǐng)求數(shù)了。
代碼如下：


var timeout = 0;
var ajaxCache = {};//定義緩存對(duì)象
$("input").keyup(function(){
    var inputValue = $(this).val();
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        if(!!ajaxCache[inputValue]){
            //顯示自動(dòng)提示框，給框里填關(guān)聯(lián)詞條的內(nèi)容
        }else{
            $.ajax({
                success:function(data){
                    //顯示自動(dòng)提示框，給框里填關(guān)聯(lián)詞條的內(nèi)容
                    ajaxCache[inputValue]=[];
                    ajaxCache[inputValue]=data;//給緩存對(duì)象賦值
                }
            });
        }
    },200);
});

總結(jié)一下兩點(diǎn)優(yōu)化就是給ajax做延遲并給ajax做緩存，有效減少ajax請(qǐng)求來(lái)優(yōu)化前端性能。如有其他優(yōu)化建議歡迎留言討論~~