ajax,BigPipe

當首屏看到的內容較多時候,如果等待服務器查詢結束后,渲染頁面輸出,用戶會看到白屏時間較長,這是相當影響體驗的。
注意這里說的是首屏,那么好的辦法考慮至少有2種,后端渲染最重要的一部分直出,然后用ajax加載其他小部分,但是缺點是ajax有請求和相應的時間,那么各小部分loading的時間會比較長,同時瀏覽器對于同一域名并發連接數是有限制的,(所以說盡量將資源分不到多個域名服務器,比如靜態資源,cdn啥的,或者合并請求)那么當你的ajax請求較多的時候,勢必會出現排隊情況。那么這樣還是等的比較久。

好,有沒有辦法讓基本頁面先出來,又不用ajax請求增加時間成本?有,那就是服務器端用流的形式輸出。BigPipe:
注意,服務器拿到請求,開始輸出啦:

html
header  
必須的css js 
/header
body
div#1
div#2
...
注意,幾個部分必須要輸出全過去,因為接下來的異步查詢不知道哪個會先返回哦。而且這樣用戶已經看到了部分頁面了哦。
好,這里開始異步去查數據,好幾個方法可以異步去拿,不好意思,2好像快一點,拿到2的數據了,好,拼接成script的形式,繼續輸出給前端,
script  render('#2',data)......這里就把拿到的數據搞進去了
1的數據又拿到了
script  render('#1',data)  對了 這個render方法,在前端必須的js里已經定義好了,就是把數據處理進對應的dom塊。
/body  閉合下啊
/html  繼續閉合
好了結束了。。。

在Node.js中,只要使用res.write()方法,響應頭就會自動帶上 Transfer-Encoding: chunked 這個header。

 -> 接收HTTP請求
 <- 返回header,開始分塊傳輸
         |- 異步調用1
             <- 返回分塊數據1
         |- 異步調用2
             <- 返回分塊數據2
         |- 所有異步調用都已完成
             <- 返回空塊,完成分塊傳輸

可以看下 http://ju.outofmemory.cn/entry/193593 簡單介紹。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容