一、使用者體驗

　　使用者體驗（UE/UX）是指一個人使用一個特定產品、系統或服務時的行為、情緒與態度，還包含使用者對於系統的功能、易用和效率的感受，因此使用者體驗在本質上可以視為一個人對於系統的主觀感受與主觀想法。

　　使用者體驗是動態的，由於不斷變化的使用情況、不停變化的各個系統，以及變化發生背後的情境與脈絡，因此它是隨著時間而不斷地變化著。

1）Loading動畫

　　有一份調查指出，使用者能夠忍受載入的最長時間在：6到8秒。8秒是一個臨界值，如果載入時間在8秒以上，大部分訪問者最終會選擇放棄，除非他一定要開啟那個頁面。

　　載入動畫就是為了彌補伺服器載入過慢的問題而設計的，如下圖所示。

　　一個好的載入動畫可以從兩個層次分析，第一個層次是滿足使用者心理基本需求，緩解使用者煩躁情緒，第二個層次是給予使用者驚喜感，增加使用者對產品的好感度。

2）過渡動畫

　　過渡動畫是為了在結構中插入或者刪除一個檢視時表現的不突兀，讓使用者可以感受到那段過程。

3）記住使用者習慣

　　記住使用者習慣包括在頁面重新整理後定位到之前滾動的位置，快取表單中的輸入資訊等，其實就是保留使用者的操作痕跡。

4）骨架屏

　　骨架屏（Skeleton Screen）是一個頁面的空白版本，通過這個空白版本來傳遞一種資訊，即頁面正在漸進式的載入中。

　　骨架屏的佈局能與頁面的視覺呈現保持一致，這樣就能引導使用者的關注點聚焦到感興趣的位置，如下圖所示，之前研究過一些製作骨架屏的原理。

二、工具

1）Chrome Devtools

　　Chrome瀏覽器為開發人員提供了專業的開發者工具。不但能模擬網路連線，還能檢視記憶體、研究重繪以及資源請求等功能。

　　1. Elements：頁面元素面板，可檢視或修改DOM結構，以及元素的樣式。

　　2. Console：控制檯面板，可列印日誌，或斷點除錯。

　　3. Sources：資源管理面板，包括JavaScript、CSS、影象、視訊等。

　　4. Performance：效能監控面板。

　　5. Network：網路面板，包括請求列表、請求詳情、網頁載入所需的各項資源，並且還能模擬網路連線（2G、3G等）。

　　6. Application：應用面板，Cookie、LocalStorage、Service Worker等，都可以在這裡處理。

　　7. Security：網路安全性概覽面板，可檢視網站的數字證書資訊。

　　Performance面板可以記錄頁面的載入、指令碼執行、渲染和繪製活動，如下圖所示。

　　底部的Summary選項卡中可檢視到摘要。

　　1. Loading：載入中，網路接收/傳送事件，以及HTML、影象和CSS解析活動。

　　2. Scripting：JavaScript相關活動。

　　3. Rendering：佈局和迴流，包括CSS、HTML變化，以及JavaScript對CSS的修改。

　　4. Painting：將Web頁面繪製和光柵化（輸出轉換為畫素）到螢幕上。

　　5. Other：Chrome不能細分的活動。

　　6. Idle：閒置。

2）webpack

　　webpack是一個靜態模組打包器，此處的模組可以是任意檔案，包括Sass、TypeScript、模板和影象等。

　　webpack可壓縮影象、JavaScript、CSS等檔案，並且能合併JavaScript、預處理Sass並將其合併。

　　藉助webpack還能實現Tree Shaking剔除未引用的程式碼，利用Code Spliting把程式碼分離到不同的bundle中。

3）WebPageTest

　　WebPageTest是一款綜合類的網站效能優化工具，如下圖所示。

　　WebPageTest通過佈置一些特定的場景（例如不同的網速、瀏覽器、位置等）進行測試，並且在測試完成後就能獲得優化等級、效能引數、請求瀑布圖、網頁幻燈片快照等。

4）RUM

　　RUM（Real User Monitoring）是一種實時監控使用者的系統（例如自制的簡易的pineapple，如下圖所示），可以持續評估使用者互動並收集典型使用者裝置上的真實資料，為Web應用程式提供完整的效能圖。

　　市面上成熟的RUM效能監控系統包括OneAPM Browser Insight、 DATADOG、阿里雲ARMS等。

&n