- 原文地址：Measure runtime performance in Vue apps
- 原文作者：Alex Jover
- 譯者：程式猿何大叔
特別宣告：本文是作者 Alex Jover 釋出在 VueDose 上的一個系列。
版權歸作者所有。
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，獲得授權的記錄會放在本文的最後。
在上一篇文章中我們談到了如何提高大型列表資料的效能，但是我們沒有測試過這個小技巧到底帶來多少的效能優化。
我們可以通過 Chrome 瀏覽器的 DevTools 工具中的 Performance 標籤頁，來完成我們想要的測量工作。為了能夠獲得準確的資料，我們需要在 Vue 應用中開啟「效能追蹤」模式。
我們可以在 main.js 檔案中進行全域性配置，或者在 Nuxt 的場景下，於外掛中進行設定：
Vue.config.performance = true;
複製程式碼又或者你的環境變數 NODE_NEV 是保持設定準確的話，也可以使用它在非生產環境來開啟「效能追蹤」模式：
const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;
複製程式碼以上操作會讓 Vue 內部啟用 User Timing API 來對元件進行效能追蹤。
在上一篇文章中，我建立了這個 沙箱環境。開啟 Chrome 開發者工具的 Performance 皮膚，並點選如下這個 reload 按鈕。
它會記錄頁面載入過程的效能，並且由於我們之前在 main.js 設定了 Vue.config.performance，你在 profiling 中能夠看到 User Timing 的一段。
在這你能夠找到 3 個度量項：
- Init: 建立元件例項所耗時間
- Render: 建立虛擬 DOM 所耗時間
- Patch: 渲染虛擬 DOM 為真實 DOM 所耗時間
繼續，在上一篇文章《[譯] Vue 的小奇技（第一篇）：提高大型資料列表的效能》中，未經優化的元件初始化耗時 417 ms。
而使用 Object.freeze 方法優化過後的元件耗時 3.9 ms。
當然，每次執行的時候耗時資料會有不同，但是兩種情況下的耗時同樣是相差巨大的。當元件在被建立階段，暴露出來的響應式問題，能讓你看到響應式元件和非響應式元件在初始化階段的差異。
本文結束。
你可以線上閱讀這篇 原文，裡面有可複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！
結語
此係列的其他文章，會同步系列官網的釋出情況，及時地翻譯釋出到掘金。請持續關注「程式猿何大叔」，相信我會給大家帶來更多優質的內容，不要忘了點贊~
如果想要了解我的更多，請查閱如下：
- 個人部落格：blog.hadesz.com
- 個人 github 倉庫：github.com/hadeshe93
- 個人微信公眾號：搜尋「程式猿何大叔」
請求翻譯授權記錄
https://juejin.im/post/5c4aeaf1f265da6158777cbb