## 一、用戶體驗   用戶體驗（UE/UX）是指一個人使用一個特定產品、系統或服務時的行為、情緒與態度，還包含用戶對于系統的功能、易用和效率的感受，因此用戶體驗在本質上可以視為一個人對于系統的主觀感受與主觀想法。   用戶體驗是動態的，由于不斷變化的使用情況、不停變化的各個系統，以及變化發生背后的情境與脈絡，因此它是隨著時間而不斷地變化著。 **1）Loading動畫**   有一份調查指出，用戶能夠忍受加載的最長時間在：6到8秒。8秒是一個臨界值，如果加載時間在8秒以上，大部分訪問者最終會選擇放棄，除非他一定要打開那個頁面。   加載動畫就是為了彌補服務器加載過慢的問題而設計的，如下圖所示。 :-:    一個好的加載動畫可以從兩個層次分析，第一個層次是滿足用戶心理基本需求，緩解用戶煩躁情緒，第二個層次是給予用戶驚喜感，增加用戶對產品的好感度。 **2）過渡動畫**   過渡動畫是為了在結構中插入或者刪除一個視圖時表現的不突兀，讓用戶可以感受到那段過程。 **3）記住用戶習慣**   記住用戶習慣包括在頁面刷新后定位到之前滾動的位置，緩存表單中的輸入信息等，其實就是保留用戶的操作痕跡。 **4）骨架屏**   骨架屏（Skeleton Screen）是一個頁面的空白版本，通過這個空白版本來傳遞一種信息，即頁面正在漸進式的加載中。   骨架屏的布局能與頁面的視覺呈現保持一致，這樣就能引導用戶的關注點聚焦到感興趣的位置，如下圖所示，之前研究過一些制作[骨架屏的原理](https://zhuanlan.zhihu.com/p/102919195)。 :-:  ## 二、工具 **1）Chrome Devtools**   Chrome瀏覽器為開發人員提供了專業的開發者工具。不但能模擬網絡連接，還能查看內存、研究重繪以及資源請求等功能。 　　1. Elements：頁面元素面板，可查看或修改DOM結構，以及元素的樣式。 　　2. Console：控制臺面板，可打印日志，或斷點調試。 　　3. Sources：資源管理面板，包括JavaScript、CSS、圖像、視頻等。 　　4.[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference)：性能監控面板。 　　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](http://www.hmoore.net/pwstrick/fe-questions/1280320)還能實現Tree Shaking剔除未引用的代碼，利用Code Spliting把代碼分離到不同的bundle中。 **3）WebPageTest**   這個[WebPageTest](https://www.cnblogs.com/strick/category/980651.html)是一款綜合類的網站性能優化工具，如下圖所示。 :-:    WebPageTest通過布置一些特定的場景（例如不同的網速、瀏覽器、位置等）進行測試，并且在測試完成后就能獲得優化等級、性能參數、請求瀑布圖、網頁幻燈片快照等。 **4）RUM**   RUM（Real User Monitoring）是一種實時監控用戶的系統（例如自制的簡易的[pineapple](https://github.com/pwstrick/pineapple)，如下圖所示），可以持續評估用戶交互并收集典型用戶設備上的真實數據，為Web應用程序提供完整的性能圖。 :-:    市面上成熟的RUM性能監控系統包括[OneAPM Browser Insight](https://www.oneapm.com/bi/feature.html)、?[DATADOG](https://www.datadoghq.com/dg/apm/ts-comp/)、[阿里云ARMS](https://cn.aliyun.com/product/arms)等。 ***** > 原文出處： [博客園-Web優化躬行記](https://www.cnblogs.com/strick/category/1795726.html) [知乎專欄-Web優化躬行記](https://zhuanlan.zhihu.com/c_1260996761008627712) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。