vue性能優(yōu)化

原文作者：vue中文社區(qū) 公眾號 / 我是你的超級英雄

前言

Vue 框架通過數(shù)據(jù)雙向綁定和虛擬 DOM 技術(shù)，幫我們處理了前端開發(fā)中最臟最累的 DOM 操作部分， 我們不再需要去考慮如何操作 DOM 以及如何最高效地操作 DOM许起；但 Vue 項目中仍然存在項目首屏優(yōu)化、Webpack 編譯配置優(yōu)化等問題，所以我們?nèi)匀恍枰リP(guān)注 Vue 項目性能方面的優(yōu)化弄痹，使項目具有更高效的性能、更好的用戶體驗嵌器。本文是作者通過實際項目的優(yōu)化實踐進(jìn)行總結(jié)而來肛真，希望讀者讀完本文，有一定的啟發(fā)思考爽航，從而對自己的項目進(jìn)行優(yōu)化起到幫助蚓让。本文內(nèi)容分為以下三部分組成：

  • Vue 代碼層面的優(yōu)化；
  • webpack 配置層面的優(yōu)化讥珍；
  • 基礎(chǔ)的 Web 技術(shù)層面的優(yōu)化历极。

一、代碼層面的優(yōu)化

1.1衷佃、v-if 和 v-show 區(qū)分使用場景

v-if 是 真正 的條件渲染趟卸，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r锄列，才會開始渲染條件塊图云。

v-show 就簡單得多， 不管初始條件是什么邻邮，元素總是會被渲染竣况，并且只是簡單地基于 CSS 的 display 屬性進(jìn)行切換。

所以饶囚，v-if 適用于在運行時很少改變條件帕翻，不需要頻繁切換條件的場景；v-show 則適用于需要非常頻繁切換條件的場景萝风。

1.2嘀掸、computed 和 watch 區(qū)分使用場景

computed： 是計算屬性，依賴其它屬性值规惰，并且 computed 的值有緩存睬塌，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計算 computed 的值歇万；

watch： 更多的是「觀察」的作用揩晴，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進(jìn)行后續(xù)操作贪磺；

運用場景：

  • 當(dāng)我們需要進(jìn)行數(shù)值計算硫兰，并且依賴于其它數(shù)據(jù)時，應(yīng)該使用 computed寒锚，因為可以利用 computed 的緩存特性劫映，避免每次獲取值時，都要重新計算刹前；

  • 當(dāng)我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時泳赋，應(yīng)該使用 watch，使用 watch 選項允許我們執(zhí)行異步操作 ( 訪問一個 API )喇喉，限制我們執(zhí)行該操作的頻率祖今，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)拣技。這些都是計算屬性無法做到的千诬。

1.3、v-for 遍歷必須為 item 添加 key膏斤，且避免同時使用 v-if

（1）v-for 遍歷必須為 item 添加 key

在列表數(shù)據(jù)進(jìn)行遍歷渲染時徐绑，需要為每一項 item 設(shè)置唯一 key 值，方便 Vue.js 內(nèi)部機(jī)制精準(zhǔn)找到該條列表數(shù)據(jù)掸绞。當(dāng) state 更新時泵三，新的狀態(tài)值和舊的狀態(tài)值對比，較快地定位到 diff 衔掸。

（2）v-for 遍歷避免同時使用 v-if

v-for 比 v-if 優(yōu)先級高烫幕，如果每一次都需要遍歷整個數(shù)組，將會影響速度敞映，尤其是當(dāng)之需要渲染很小一部分的時候较曼，必要情況下應(yīng)該替換成 computed 屬性。

推薦：

<ul>  
  <li v-for="user in activeUsers" :key="user.id">   
      {{ user.name }} 
   </li>
</ul>
computed: {  
  activeUsers: function () {    
    return this.users.filter(function (user) { 
      return user.isActive    
    })  
  }
}

不推薦：

<ul>  
   <li v-for="user in users" v-if="user.isActive" :key="user.id">    
      {{ user.name }}  
  </li>
</ul>

1.4振愿、長列表性能優(yōu)化

Vue 會通過 Object.defineProperty 對數(shù)據(jù)進(jìn)行劫持捷犹，來實現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化，然而有些時候我們的組件就是純粹的數(shù)據(jù)展示冕末，不會有任何改變萍歉，我們就不需要 Vue 來劫持我們的數(shù)據(jù)，在大量數(shù)據(jù)展示的情況下档桃，這能夠很明顯的減少組件初始化的時間枪孩，那如何禁止 Vue 劫持我們的數(shù)據(jù)呢？可以通過 Object.freeze 方法來凍結(jié)一個對象藻肄，一旦被凍結(jié)的對象就再也不能被修改了蔑舞。

export default {  
data: () => ({    
  users: {}
}),  
async created() {    
  const users = await axios.get("/api/users");    
  this.users = Object.freeze(users);  
}
};

1.5、事件的銷毀

Vue 組件銷毀時嘹屯，會自動清理它與其它實例的連接攻询，解綁它的全部指令及事件監(jiān)聽器，但是僅限于組件本身的事件州弟。如果在 js 內(nèi)使用 addEventListene 等方式是不會自動銷毀的钧栖，我們需要在組件銷毀時手動移除這些事件的監(jiān)聽，以免造成內(nèi)存泄露呆馁，如：

created() {  
  addEventListener('click', this.click, false)
},
beforeDestroy() { 
  removeEventListener('click', this.click, false)
}

1.6桐经、圖片資源懶加載

對于圖片過多的頁面，為了加速頁面加載速度浙滤，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載阴挣， 等到滾動到可視區(qū)域后再去加載。這樣對于頁面加載性能上會有很大的提升纺腊，也提高了用戶體驗畔咧。我們在項目中使用 Vue 的 vue-lazyload 插件：

（1）安裝插件

npm install vue-lazyload --save-dev

（2）在入口文件 man.js 中引入并使用

import VueLazyload from 'vue-lazyload'

然后再 vue 中直接使用

Vue.use(VueLazyload)

或者添加自定義選項

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

（3）在 vue 文件中將 img 標(biāo)簽的 src 屬性直接改為 v-lazy ，從而將圖片顯示方式更改為懶加載顯示：

<img v-lazy="/static/img/1.png">

以上為 vue-lazyload 插件的簡單使用揖膜，如果要看插件的更多參數(shù)選項誓沸，可以查看 vue-lazyload 的 github 地址。

1.7壹粟、路由懶加載

Vue 是單頁面應(yīng)用拜隧，可能會有很多的路由引入 宿百，這樣使用 webpcak 打包后的文件很大，當(dāng)進(jìn)入首頁時洪添，加載的資源過多垦页，頁面會出現(xiàn)白屏的情況，不利于用戶體驗干奢。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊痊焊，然后當(dāng)路由被訪問的時候才加載對應(yīng)的組件，這樣就更加高效了忿峻。這樣會大大提高首屏顯示的速度薄啥，但是可能其他的頁面的速度就會降下來。

路由懶加載：

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

1.8逛尚、第三方插件的按需引入

我們在項目中經(jīng)常會需要引入第三方插件垄惧，如果我們直接引入整個插件，會導(dǎo)致項目的體積太大绰寞，我們可以借助 babel-plugin-component 赘艳，然后可以只引入需要的組件，以達(dá)到減小項目體積的目的克握。以下為項目中引入 element-ui 組件庫為例：

（1）首先蕾管，安裝 babel-plugin-component ：

npm install babel-plugin-component -D

（2）然后，將 .babelrc 修改為：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]}

（3）在 main.js 中引入部分組件：

import Vue from 'vue';
import { Button, Select } from 'element-ui'; 
Vue.use(Button) 
Vue.use(Select)

1.9菩暗、優(yōu)化無限列表性能

如果你的應(yīng)用存在非常長或者無限滾動的列表掰曾，那么需要采用 窗口化 的技術(shù)來優(yōu)化性能，只需要渲染少部分區(qū)域的內(nèi)容停团，減少重新渲染組件和創(chuàng)建 dom 節(jié)點的時間旷坦。你可以參考以下開源項目 vue-virtual-scroll-list 和 vue-virtual-scroller 來優(yōu)化這種無限列表的場景的。

1.10佑稠、服務(wù)端渲染 SSR or 預(yù)渲染

服務(wù)端渲染是指 Vue 在客戶端將標(biāo)簽渲染成的整個 html 片段的工作在服務(wù)端完成秒梅，服務(wù)端形成的 html 片段直接返回給客戶端這個過程就叫做服務(wù)端渲染。

（1）服務(wù)端渲染的優(yōu)點：

  • 更好的 SEO：因為 SPA 頁面的內(nèi)容是通過 Ajax 獲取舌胶，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內(nèi)容捆蜀，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內(nèi)容；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中）幔嫂，所以搜索引擎爬取工具可以抓取渲染好的頁面辆它；

  • 更快的內(nèi)容到達(dá)時間（首屏加載更快）：SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進(jìn)行頁面的渲染履恩，文件下載等需要一定的時間等锰茉，所以首屏渲染需要一定的時間；SSR 直接由服務(wù)端渲染好頁面直接返回顯示切心，無需等待下載 js 文件及再去渲染等飒筑，所以 SSR 有更快的內(nèi)容到達(dá)時間片吊；

（2）服務(wù)端渲染的缺點：

  • 更多的開發(fā)條件限制：例如服務(wù)端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)，這會導(dǎo)致一些外部擴(kuò)展庫需要特殊處理协屡，才能在服務(wù)端渲染應(yīng)用程序中運行定鸟；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 SPA 不同，服務(wù)端渲染應(yīng)用程序著瓶，需要處于 Node.js server 運行環(huán)境；

  • 更多的服務(wù)器負(fù)載：在 Node.js 中渲染完整的應(yīng)用程序啼县，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源材原，因此如果你預(yù)料在高流量環(huán)境下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載季眷，并明智地采用緩存策略余蟹。

如果你的項目的 SEO 和 首屏渲染是評價項目的關(guān)鍵指標(biāo)，那么你的項目就需要服務(wù)端渲染來幫助你實現(xiàn)最佳的初始加載性能和 SEO子刮，具體的 Vue SSR 如何實現(xiàn)威酒，可以參考作者的另一篇文章《Vue SSR 踩坑之旅》。如果你的 Vue 項目只需改善少數(shù)營銷頁面（例如 /挺峡， /about葵孤， /contact 等）的 SEO，那么你可能需要預(yù)渲染橱赠，在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件尤仍。優(yōu)點是設(shè)置預(yù)渲染更簡單，并可以將你的前端作為一個完全靜態(tài)的站點狭姨，具體你可以使用 prerender-spa-plugin 就可以輕松地添加預(yù)渲染 宰啦。

二、Webpack 層面的優(yōu)化

2.1饼拍、Webpack 對圖片進(jìn)行壓縮

在 vue 項目中除了可以在 webpack.base.conf.js 中 url-loader 中設(shè)置 limit 大小來對圖片處理赡模，對小于 limit 的圖片轉(zhuǎn)化為 base64 格式，其余的不做操作师抄。所以對有些較大的圖片資源漓柑，在請求資源的時候，加載會很慢叨吮，我們可以用 image-webpack-loader來壓縮圖片：

（1）首先欺缘，安裝 image-webpack-loader ：

npm install image-webpack-loader --save-dev

（2）然后，在 webpack.base.conf.js 中進(jìn)行配置：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

2.2挤安、減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼

Babel 插件會在將 ES6 代碼轉(zhuǎn)換成 ES5 代碼時會注入一些輔助函數(shù)谚殊，例如下面的 ES6 代碼：

class HelloWebpack extends Component{...}

這段代碼再被轉(zhuǎn)換成能正常運行的 ES5 代碼時需要以下兩個輔助函數(shù)：

babel-runtime/helpers/createClass  // 用于實現(xiàn) class 語法
babel-runtime/helpers/inherits  // 用于實現(xiàn) extends 語法

在默認(rèn)情況下， Babel 會在每個輸出文件中內(nèi)嵌這些依賴的輔助函數(shù)代碼蛤铜，如果多個源代碼文件都依賴這些輔助函數(shù)嫩絮，那么這些輔助函數(shù)的代碼將會出現(xiàn)很多次丛肢，造成代碼冗余。為了不讓這些輔助函數(shù)的代碼重復(fù)出現(xiàn)剿干，可以在依賴它們時通過 require('babel-runtime/helpers/createClass') 的方式導(dǎo)入蜂怎，這樣就能做到只讓它們出現(xiàn)一次。babel-plugin-transform-runtime 插件就是用來實現(xiàn)這個作用的置尔，將相關(guān)輔助函數(shù)進(jìn)行替換成導(dǎo)入語句杠步，從而減小 babel 編譯出來的代碼的文件大小。

（1）首先榜轿，安裝 babel-plugin-transform-runtime ：

npm install babel-plugin-transform-runtime --save-dev

（2）然后幽歼，修改 .babelrc 配置文件為：

"plugins": [    "transform-runtime"]

如果要看插件的更多詳細(xì)內(nèi)容，可以查看babel-plugin-transform-runtime 的 詳細(xì)介紹谬盐。

2.3甸私、提取公共代碼

如果項目中沒有去將每個頁面的第三方庫和公共模塊提取出來，則項目會存在以下問題：

  • 相同的資源被重復(fù)加載飞傀，浪費用戶的流量和服務(wù)器的成本皇型。
  • 每個頁面需要加載的資源太大，導(dǎo)致網(wǎng)頁首屏加載緩慢砸烦，影響用戶體驗弃鸦。

所以我們需要將多個頁面的公共代碼抽離成單獨的文件，來優(yōu)化以上問題 幢痘。Webpack 內(nèi)置了專門用于提取多個Chunk 中的公共部分的插件 CommonsChunkPlugin寡键，我們在項目中 CommonsChunkPlugin 的配置如下：

// 所有在 package.json 里面依賴的包，都會被打包進(jìn) vendor.js 這個文件中雪隧。
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
    return (
      module.resource && 
     /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    );
  }}),// 抽取出代碼模塊的映射關(guān)系new 
webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

如果要看插件的更多詳細(xì)內(nèi)容西轩，可以查看 CommonsChunkPlugin 的 詳細(xì)介紹。

2.4脑沿、模板預(yù)編譯

當(dāng)使用 DOM 內(nèi)模板或 JavaScript 內(nèi)的字符串模板時藕畔，模板會在運行時被編譯為渲染函數(shù)。通常情況下這個過程已經(jīng)足夠快了庄拇，但對性能敏感的應(yīng)用還是最好避免這種用法注服。

預(yù)編譯模板最簡單的方式就是使用單文件組件——相關(guān)的構(gòu)建設(shè)置會自動把預(yù)編譯處理好，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來的渲染函數(shù)而不是原始的模板字符串措近。

如果你使用 webpack溶弟，并且喜歡分離 JavaScript 和模板文件，你可以使用 vue-template-loader瞭郑，它也可以在構(gòu)建過程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)辜御。

2.5、提取組件的 CSS

當(dāng)使用單文件組件時屈张，組件內(nèi)的 CSS 會以 style 標(biāo)簽的方式通過 JavaScript 動態(tài)注入擒权。這有一些小小的運行時開銷袱巨，如果你使用服務(wù)端渲染，這會導(dǎo)致一段 “無樣式內(nèi)容閃爍 (fouc) ” 碳抄。將所有組件的 CSS 提取到同一個文件可以避免這個問題愉老，也會讓 CSS 更好地進(jìn)行壓縮和緩存。

查閱這個構(gòu)建工具各自的文檔來了解更多：

  • webpack + vue-loader ( vue-cli 的 webpack 模板已經(jīng)預(yù)先配置好)
  • Browserify + vueify
  • Rollup + rollup-plugin-vue

2.6剖效、優(yōu)化 SourceMap

我們在項目進(jìn)行打包后辙纬，會將開發(fā)中的多個文件代碼打包到一個文件中外驱，并且經(jīng)過壓縮祖屏、去掉多余的空格潮罪、babel編譯化后，最終將編譯得到的代碼會用于線上環(huán)境逗宁，那么這樣處理后的代碼和源代碼會有很大的差別，當(dāng)有 bug的時候梦湘，我們只能定位到壓縮處理后的代碼位置瞎颗，無法定位到開發(fā)環(huán)境中的代碼，對于開發(fā)來說不好調(diào)式定位問題捌议，因此 sourceMap 出現(xiàn)了哼拔，它就是為了解決不好調(diào)式代碼問題的。

SourceMap 的可選值如下（+ 號越多瓣颅，代表速度越快倦逐，- 號越多，代表速度越慢, o 代表中等速度 ）

圖片

開發(fā)環(huán)境推薦：cheap-module-eval-source-map

生產(chǎn)環(huán)境推薦：cheap-module-source-map

原因如下：

  • cheap：源代碼中的列信息是沒有任何作用宫补，因此我們打包后的文件不希望包含列相關(guān)信息檬姥，只有行信息能建立打包前后的依賴關(guān)系。因此不管是開發(fā)環(huán)境或生產(chǎn)環(huán)境粉怕，我們都希望添加 cheap 的基本類型來忽略打包前后的列信息健民；

  • module ：不管是開發(fā)環(huán)境還是正式環(huán)境，我們都希望能定位到bug的源代碼具體的位置贫贝，比如說某個 Vue 文件報錯了秉犹，我們希望能定位到具體的 Vue 文件，因此我們也需要 module 配置稚晚；

  • soure-map ：source-map 會為每一個打包后的模塊生成獨立的 soucemap 文件 崇堵，因此我們需要增加source-map 屬性；

  • eval-source-map：eval 打包代碼的速度非晨脱啵快鸳劳，因為它不生成 map 文件，但是可以對 eval 組合使用 eval-source-map 使用會將 map 文件以 DataURL 的形式存在打包后的 js 文件中也搓。在正式環(huán)境中不要使用 eval-source-map, 因為它會增加文件的大小棍辕，但是在開發(fā)環(huán)境中暮现，可以試用下，因為他們打包的速度很快楚昭。

2.7栖袋、構(gòu)建結(jié)果輸出分析

Webpack 輸出的代碼可讀性非常差而且文件非常大，讓我們非常頭疼抚太。為了更簡單塘幅、直觀地分析輸出結(jié)果，社區(qū)中出現(xiàn)了許多可視化分析工具尿贫。這些工具以圖形的方式將結(jié)果更直觀地展示出來电媳，讓我們快速了解問題所在。接下來講解我們在 Vue 項目中用到的分析工具：webpack-bundle-analyzer 庆亡。

我們在項目中 webpack.prod.conf.js 進(jìn)行配置：

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

執(zhí)行 $ npm run build \--report 后生成分析報告如下：

圖片

2.8匾乓、Vue 項目的編譯優(yōu)化

如果你的 Vue 項目使用 Webpack 編譯，需要你喝一杯咖啡的時間又谋，那么也許你需要對項目的 Webpack 配置進(jìn)行優(yōu)化拼缝，提高 Webpack 的構(gòu)建效率。具體如何進(jìn)行 Vue 項目的 Webpack 構(gòu)建優(yōu)化彰亥，可以參考作者的另一篇文章《 Vue 項目 Webpack 優(yōu)化實踐》

三咧七、基礎(chǔ)的 Web 技術(shù)優(yōu)化

3.1、開啟 gzip 壓縮

gzip 是 GNUzip 的縮寫任斋，最早用于 UNIX 系統(tǒng)的文件壓縮继阻。HTTP 協(xié)議上的 gzip 編碼是一種用來改進(jìn) web 應(yīng)用程序性能的技術(shù)，web 服務(wù)器和客戶端（瀏覽器）必須共同支持 gzip废酷。目前主流的瀏覽器瘟檩，Chrome，firefox澈蟆，IE等都支持該協(xié)議芒帕。常見的服務(wù)器如 Apache，Nginx丰介，IIS 同樣支持背蟆，gzip 壓縮效率非常高，通诚保可以達(dá)到 70% 的壓縮率带膀，也就是說，如果你的網(wǎng)頁有 30K橙垢，壓縮之后就變成了 9K 左右

以下我們以服務(wù)端使用我們熟悉的 express 為例垛叨，開啟 gzip 非常簡單，相關(guān)步驟如下：

  • 安裝：
npm install compression --save
  • 添加代碼邏輯：
var compression = require('compression');
var app = express();app.use(compression())

  • 重啟服務(wù)，觀察網(wǎng)絡(luò)面板里面的 response header嗽元，如果看到如下紅圈里的字段則表明 gzip 開啟成功 ：

    圖片

3.2敛纲、瀏覽器緩存

為了提高用戶加載頁面的速度，對靜態(tài)資源進(jìn)行緩存是非常必要的剂癌，根據(jù)是否需要重新向服務(wù)器發(fā)起請求來分類淤翔，將 HTTP 緩存規(guī)則分為兩大類（強(qiáng)制緩存，對比緩存）佩谷，如果對緩存機(jī)制還不是了解很清楚的旁壮，可以參考作者寫的關(guān)于 HTTP 緩存的文章《深入理解HTTP緩存機(jī)制及原理》，這里不再贅述谐檀。

3.3抡谐、CDN 的使用

瀏覽器從服務(wù)器上下載 CSS、js 和圖片等文件時都要和服務(wù)器連接桐猬，而大部分服務(wù)器的帶寬有限麦撵，如果超過限制，網(wǎng)頁就半天反應(yīng)不過來溃肪。而 CDN 可以通過不同的域名來加載文件免胃，從而使下載文件的并發(fā)連接數(shù)大大增加，且CDN 具有更好的可用性乍惊，更低的網(wǎng)絡(luò)延遲和丟包率 杜秸。

3.4放仗、使用 Chrome Performance 查找性能瓶頸

Chrome 的 Performance 面板可以錄制一段時間內(nèi)的 js 執(zhí)行細(xì)節(jié)及時間润绎。使用 Chrome 開發(fā)者工具分析頁面性能的步驟如下。

  1. 打開 Chrome 開發(fā)者工具诞挨，切換到 Performance 面板
  2. 點擊 Record 開始錄制
  3. 刷新頁面或展開某個節(jié)點
  4. 點擊 Stop 停止錄制
圖片
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末莉撇，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子惶傻，更是在濱河造成了極大的恐慌棍郎，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,084評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件银室，死亡現(xiàn)場離奇詭異涂佃，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)蜈敢，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門辜荠，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人抓狭，你說我怎么就攤上這事伯病。” “怎么了否过？”我有些...
    開封第一講書人閱讀 163,450評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵午笛，是天一觀的道長惭蟋。 經(jīng)常有香客問我，道長药磺，這世上最難降的妖魔是什么告组？ 我笑而不...
    開封第一講書人閱讀 58,322評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮与涡，結(jié)果婚禮上惹谐，老公的妹妹穿的比我還像新娘。我一直安慰自己驼卖，他們只是感情好氨肌，可當(dāng)我...
    茶點故事閱讀 67,370評論 6贊 390
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著酌畜，像睡著了一般怎囚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上桥胞，一...
    開封第一講書人閱讀 51,274評論 1贊 300
  • 城市分裂傳說
    那天恳守，我揣著相機(jī)與錄音，去河邊找鬼贩虾。 笑死催烘，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的缎罢。 我是一名探鬼主播伊群，決...
    沈念sama閱讀 40,126評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼策精！你這毒婦竟也來了舰始？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,980評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤咽袜，失蹤者是張志新（化名）和其女友劉穎丸卷，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體询刹，經(jīng)...
    沈念sama閱讀 45,414評論 1贊 313
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡谜嫉，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了凹联。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沐兰。...
    茶點故事閱讀 39,773評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖匕垫，靈堂內(nèi)的尸體忽然破棺而出僧鲁，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 35,470評論 5贊 344
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布寞秃，位于F島的核電站斟叼，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏春寿。R本人自食惡果不足惜朗涩，卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3贊 327
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绑改。 院中可真熱鬧谢床，春花似錦、人聲如沸厘线。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽造壮。三九已至渡讼，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間耳璧，已是汗流浹背成箫。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留旨枯，地道東北人蹬昌。 一個月前我還...
    沈念sama閱讀 47,865評論 2贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像攀隔，于是被迫代替她去往敵國和親皂贩。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2贊 354

推薦閱讀更多精彩內(nèi)容

  • 一.Vue代碼層面優(yōu)化 1.1竞慢、v-if 和 v-show 區(qū)分使用場景 v-if 是 真正 的條件渲染先紫，因為它會...
    love_peaches閱讀 163評論 0贊 1
  • 得益于 Vue 的響應(yīng)式系統(tǒng)和虛擬 DOM 系統(tǒng)治泥，Vue 在渲染組件的過程中能自動追蹤數(shù)據(jù)的依賴筹煮，并精確知曉數(shù)據(jù)更...
    grain先森閱讀 18,067評論 0贊 129
  • 前端路漫漫，優(yōu)化無極限居夹。本文主要從代碼層面對vue項目性能優(yōu)化進(jìn)行總結(jié)败潦， 1.v-if 和 v-show 區(qū)分場景...
    LazyCat404閱讀 1,547評論 0贊 2
  • 一、template v-show准脂，v-if 用哪個劫扒？第一個維度是權(quán)限問題，只要涉及到權(quán)限相關(guān)的展示無疑要用 v-...
    Vicky丶Amor閱讀 1,990評論 6贊 33
  • 今天感恩節(jié)哎狸膏，感謝一直在我身邊的親朋好友沟饥。感恩相遇！感恩不離不棄。 中午開了第一次的黨會贤旷，身份的轉(zhuǎn)變要...
    迷月閃星情閱讀 10,564評論 0贊 11