摘要：如果我們能在頁面加載完就立即請求首屏數(shù)據(jù)然后再請求等資源的話將接口請求與資源請求并行的話首屏時間就能節(jié)省至少個請求的耗時。

上個Q做了一波web性能優(yōu)化,積累了一點點經(jīng)驗 記錄分享一下。

先分享一個比較常用的接口前置 的優(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ā)布訂閱的一些東西 然后打包的時候 通過模板打到 
 // 標簽內(nèi) 位置在header 最頂部

2: 在html head的里使用 的方式 加載首屏數(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)有了