作為一個前端工程師，我們都知道頁面的速度對產品業務的發展至關重要，在日常工作中我們除了完成業務邏輯之外，也在持續的優化前端頁面的速度。但我們往往從載入速度和渲染速度這兩個方面著手，而忽略了感知速度的提升，本文我們就來探討一下如何從感知速度著手提升前端頁面的感知速度。

1.UI預覽

對於常見的前後端分離專案，一般的工作流程是：

1. 頁面JS請求後端介面
2. 後端介面返回JSON資料
3. 前端模板引擎根據JSON資料和預設模板輸出最終的HTML片段
4. 前端模板引擎將HTML片段插入DOM中，瀏覽器重新區域性渲染，顯示最終結果

而從第1步到第4步之間，我們往往使用一個載入條，來提示使用者繼續等待。本質上，在這期間UI對使用者不可見(UI是阻塞的)，給使用者的感覺就是頁面較慢，而UI預覽就可以從這裡介入從而提升使用者感知速度。

在使用一些知名網站時，我們經常會看到UI預覽，比如新浪微博的文章，在文章主體載入完成之前提前給出頁面的基本佈局：

facebook在資訊流載入完成之前，也會給出UI預覽：

2.UI預覽的實現方式

UI預覽的實現方式主要有兩種，一種就是偽UI預覽，另一種是真實UI預覽。

(1).偽UI預覽

偽UI預覽的應用場景較為有限，需要提前人工寫好需要預覽的UI的佈局和樣式，因此其只能適用於UI較為簡單的場景。facbook的每一條feed的佈局都非常相似，它使用的就是偽UI預覽，在真實feed載入完成之前，先顯示UI預覽，當真實feed載入完成後，隱藏UI預覽，顯示真實feed內容。比如下圖是一條feed的UI預覽：

(2).真實UI預覽

真實UI預覽實現起來較為複雜，但是其適用場景較為也更為廣泛。一種實現真實UI預覽的方案是，通過真實測試資料生成真實UI預覽，當然這裡對測試資料有一定的要求：

(1)文字用空格代替
(2)影像用預設影像代替

真實UI預覽的生成可以通過構建工具完成，比如grunt、gulp、fis等。當真實資料獲取成功時，即可隱藏UI預覽，顯示真實使用者頁面。

UI預覽可以極大的提升使用者的感知速度，使網站留住更多使用者。雖然在網速較好的情況下，其作用有限，但卻不失為錦上添花之舉。

---

參考資料

https://dribbble.com/shots/2138907-Non-Blocking-Settings-Page-UI

http://www.callumhart.com/blog/non-blocking-uis-with-interface-previews

本文同時發表在我的部落格積木村の研究所 ：http://foio.github.io/ui-preview/