如何實現(xiàn)web接口前置的性能優(yōu)化

這篇文章給大家分享的是有關(guān)如何實現(xiàn)web接口前置的性能優(yōu)化的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

先分享一個比較常用的接口前置 的優(yōu)化方案吧

優(yōu)化前首屏秒開大約在40%左右 首屏秒開大約提高了25%

先發(fā)一張優(yōu)化成果圖

前置原因
 對于前后端分離的頁面來說,一般的加載方式都是如下:

請求html頁面  -> 瀏覽器解析html ->  請求css js  -> js執(zhí)行請求api接口 -> js根據(jù)數(shù)據(jù)組裝頁面 ->  請求圖片 -> 展示首屏
我們可以看下圖：

接口請求是在頁面加載了 540ms左右的時候發(fā)出的  接口數(shù)據(jù)返回之后再渲染頁面 加載圖片 整個過程都是串行的 這樣整個頁面的首屏時間就比較長了。  如果我們能在html頁面加載完就立即請求首屏數(shù)據(jù) 然后再請求css js等資源的話 將接口請求與 css js資源請求并行的話 首屏時間就能節(jié)省 至少1個請求的耗時。

具體實踐
使用發(fā)布 訂閱模式

1: 首先需要實現(xiàn)一個mini的ajax方法 建議直接使用XMLHttpRequest封裝

 // 這里我們是寫了一個單獨的js庫 包含js請求 和 發(fā)布訂閱的一些東西 然后打包的時候 通過模板打到 
 //<script> </script> 標簽內(nèi) 位置在header 最頂部

2:  在html head的里使用  <script> // 這里調(diào)接口 </script> 的方式 加載首屏數(shù)據(jù)  位置僅在ajax庫下面  這里不建議使用標簽 因為標簽的話 還需要發(fā)http請求 js文件 然后執(zhí)行 才能請求數(shù)據(jù) 。

 var prefetchSuccessful = true;
        try {

            if( window.ytMessager && window.YtPreRequest){
                var params = {
                    itemId: YtPreRequest.getQueryString('itemId')
                };
                YtPreRequest.request(
                    {
                        url: '{{ reqConfig }}1.0.2/mall.item.detail.pc/',
                        data: params,
                        success: function (json) {
                            ytMessager.send('mall.item.detail.pc',json);
                        },
                        error: function () {
                            prefetchSuccessful = false;
                            ytMessager.send('mall.item.detail.pc.error');
                        }
                    })
            }else{
                prefetchSuccessful = false;
            }
        }catch (e){
            prefetchSuccessful = false;
        }

3： 業(yè)務(wù)代碼中使用前置接口數(shù)據(jù) 這時候會出現(xiàn)2種情況

第一種： 首屏接口已經(jīng)請求成功了， 業(yè)務(wù)js代碼未加載好。
第二種： 業(yè)務(wù)js代碼已經(jīng)加載好了，但是 首屏接口數(shù)據(jù)還沒請求成功。

為了兼容第二種情況 我們使用發(fā)布訂閱模式的寫法。 業(yè)務(wù)js 先判斷全局是否有首屏數(shù)據(jù) 有就直接拿過來渲染頁面 ，如果沒有則監(jiān)聽一個首屏接口事件，  首屏接口請求成功后會寫入一個全局的首屏數(shù)據(jù)并且觸發(fā)事件，業(yè)務(wù)代碼被觸發(fā)后則拿返回的數(shù)據(jù)渲染頁面。

  /**
    ** 如果已經(jīng)請求好了數(shù)據(jù) 直接渲染 否則監(jiān)聽事件回調(diào)中渲染
    */

if(window.ytMessager && prefetchSuccessful){
    ytMessager.on('mall.item.detail.pc',(json)=>{
        this.renderData(json); // 渲染頁面
    },true);

    ytMessager.on('mall.item.detail.pc.error',()=>{
        this.getPageData(); // 異常補救
    },true)

}else{
    this.getPageData(); // 異常補救
}

優(yōu)化后    

接口在頁面加載100多ms的時候就發(fā)出請求了。在業(yè)務(wù)代碼執(zhí)行之前 數(shù)據(jù)就已經(jīng)有了

感謝各位的閱讀！關(guān)于“如何實現(xiàn)web接口前置的性能優(yōu)化”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！