Web優化躬行記（4）——用戶體驗和工具
一、用戶體驗
用戶體驗（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等。
