【譯】Vue 的小奇技（第二篇）：衡量 Vue 應用的執行時效能

程式猿何大叔發表於2019-01-25
Vue

特別宣告：本文是作者 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 按鈕。

【譯】Vue 的小奇技（第二篇）：衡量 Vue 應用的執行時效能

它會記錄頁面載入過程的效能，並且由於我們之前在 main.js 設定了 Vue.config.performance，你在 profiling 中能夠看到 User Timing 的一段。

在這你能夠找到 3 個度量項：

  • Init: 建立元件例項所耗時間
  • Render: 建立虛擬 DOM 所耗時間
  • Patch: 渲染虛擬 DOM 為真實 DOM 所耗時間

繼續，在上一篇文章《[譯] Vue 的小奇技（第一篇）：提高大型資料列表的效能》中，未經優化的元件初始化耗時 417 ms。

【譯】Vue 的小奇技（第二篇）：衡量 Vue 應用的執行時效能

而使用 Object.freeze 方法優化過後的元件耗時 3.9 ms。

【譯】Vue 的小奇技（第二篇）：衡量 Vue 應用的執行時效能

當然，每次執行的時候耗時資料會有不同，但是兩種情況下的耗時同樣是相差巨大的。當元件在被建立階段，暴露出來的響應式問題，能讓你看到響應式元件和非響應式元件在初始化階段的差異。

本文結束。

你可以線上閱讀這篇 原文，裡面有可複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！

結語

此係列的其他文章，會同步系列官網的釋出情況，及時地翻譯釋出到掘金。請持續關注「程式猿何大叔」，相信我會給大家帶來更多優質的內容，不要忘了點贊~

如果想要了解我的更多，請查閱如下：

請求翻譯授權記錄

請求翻譯授權記錄https://juejin.im/post/5c4aeaf1f265da6158777cbb

相關文章