推薦幾個 React 性能優化工具

時間 2020-06-22

標籤推薦幾個 react 性能優化工具欄目 React 简体版

原文原文鏈接

本文翻譯自 5 Recommended Tools for Optimizing Performance in ReactJS，做者 Chidume Nnamdi，有較大的刪改。css

Profiler

能夠前往 codesandbox.io/s/react-pro… 在線編輯效果。前端

Profiler 是 React 中的一個組件，由 B. Vaughn 開發，它能夠測量 React 應用渲染的頻率和渲染所花費的時間資源。Profiler 提供一個函數屬性 onRender，當組件 mount 或者 update 的時候，這個函數會接受到一些時間指標。用這些時間指標你就能夠發現效率低下的代碼了。java

import React, { Profiler } from 'react';

...
<Profiler id="Counter1" onRender={this.callback1(this)}>
  <Counter1 /> </Profiler>
複製代碼

id 用來標識對應的 Profiler 組件，onRender 函數會在組件 mount 或者 update 的時候執行，它的參數結構以下：python

function onRenderCallback( id, phase, actualDuration, baseDuration, startTime, commitTime, ) {
  console.log('onRenderCallback', {
    id,
    phase,
    actualDuration, 
    baseDuration,
    startTime,
    commitTime,
  })
}
複製代碼

id 組件 id；
phase 執行階段，mount 或者 update；
actualDuration Profiler 和子組件渲染當前的更新所花費的時間，這個值在首次 mount 的時候比 update 階段的值大；
baseDuration 子組件最近一次渲染所持續的時長
startTime 開始渲染當前的更新的時間戳
commitTime React 提交當前更新的時間戳

這些數據能夠幫助咱們分析組件運行的效率，找到性能瓶頸。react

React Developer tools

React Developer tools 是 React 官方團隊發佈的一個瀏覽器插件，功能十分強大。我要介紹的是 Highlight Update 這個功能。這個工具用來檢測組件重複渲染很是有效。他能夠用不一樣的顏色來標識組件的邊框，顏色越黃表示這個組件重複渲染的次數越多。android

若是你有一個組件樹像下面這樣：ios

若是 Main 組件重複渲染了，那麼封裝 Counter 和 Count 組件的邊界就會出現一個邊框表示重複渲染。git

咱們激活這個特性以後,在 ReactJS 官網開啓關閉右側的菜單，會出現邊框提示：github

如何激活這個特性呢？找到調試工具的 Components 一欄，點擊右上角的小齒輪，再選中彈窗中的 Highlight updates when components render.web

邊框的類型取決於重複渲染的程度，重複渲染越多，顏色越深。

|    綠色 - 低頻次更新
|    藍色 - 通常頻次更新
v    紅色 - 高頻次更新
複製代碼

經過使用這個工具，咱們能夠經過邊框顏色來輕易找到有性能問題的組件，並對它作針對性的優化。

why-did-you-render

github.com/welldone-so…,這個工具是由 Welldone Software 開發的，用來對組件重複渲染給出反饋。

它會對組件的 props 作 diff，若是組件從新渲染了，可是 props 並沒改變，它會在命令行提醒你 props 並無變化。

重複渲染在小型應用中影響可能不大，可是在大型項目中將確定會有影響。

這個工具嵌入到了 React 組件的生命週期中，因此他能在組件從新渲染時比對 props 是否變化。

使用方法很簡單，先安裝

npm install @welldone-software/why-did-you-render --save
複製代碼

而後註冊一次：

whyDidYouRender(React, {
  trackAllPureComponents: true
});
複製代碼

而後對 class component：

class Counter extends React.Component {
  static whyDidYouRender = true;
  render() {
   //...
  }
}
複製代碼

對函數組件：

function Counter() {
  return(
   // ...
  )
}
Counter.whyDidYouRender = true;
複製代碼

下面是一個完整的例子，每次 setState 時候，style={{ width: "100%" }} 都是一個新的值，因此會觸發比對。

import React from "react";
import "./styles.css";
const whyDidYouRender = require("@welldone-software/why-did-you-render");
whyDidYouRender(React, {
  trackAllPureComponents: true
});
export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 1
    };
  }
  render() {
    return (
      <div className="App"> <button onClick={() => this.setState({ count: this.state.count + 1 })}> add </button> <p>{this.state.count}</p> <Comp style={{ width: "100%" }} /> </div> ); } } function Comp(props) { return <div>100</div>; } Comp.whyDidYouRender = true; 複製代碼

前往 Code SandBox 測試 codesandbox.io/s/distracte…。

Performance timeline (Browser profiling)

這個工具是 Chrome 自帶的調試工具，在 Performance 一欄中。

它能夠很是有效地查看嚴重重複渲染的組件，它也能夠很方便地查看 UI 沒必要要的更新及其出現的頻次。

在使用工具以前，先以開發模式把你的 React app 啓動起來。

而後，打開開發者工具，切換到 Performance 面板。

點擊中間的圓點或者用快捷鍵 command + e，開發者工具就開始錄製了，而後你能夠在你的應用中作一些交互動做。

建議錄製時間在 20 秒以上，時間到了以後，點擊中間的 stop，或者左上角紅點。

而後咱們就能夠看到時間線了。

咱們能夠滑動選擇一片區域，而後經過 W 放大或者經過 S 縮小。選中一片區域，經過 W 鍵一直放大。

每一個橙色的條表明一個執行過程，在這個條中你能夠看到組件名、組件執行的階段、以及執行時間。在上面這張圖片中，App 的執行階段是 update 階段，這表示 App 組件這段時間是在執行更新操做，執行所耗費的時間是 1.71 ms。

組件每次渲染的時候一個新的黃條就會生成，若是一個組件屢次渲染，經過這個 Timings 圖表可讓你更容易追因。每一個黃條的長度表示組件的執行時間，黃條越長，執行時間也越長。你可使用這個工具來診斷頁面。

若是你以爲文章不錯，請點上一個贊👍，若是你有疑惑，能夠在評論區提問，創做不易，您的點贊和評論是對我最大的鼓勵~~

歡迎關注公衆號 雲影sky，分享的不只僅是技術，還有成長~~

神策數據招人啦

神策數據(sensorsdata.cn) 招人啦~~

公司在北京、上海、武漢、成都、合肥、深圳招人中，待遇優厚~

零食、肥宅快樂水、免費午飯晚餐、晚上下班免費坐車...

神策數據（Sensors Data）隸屬於神策網絡科技 (北京) 有限公司，是專業的大數據分析平臺服務提供商，致力於幫助客戶實現數據驅動。公司圍繞用戶級大數據分析和管理需求，推出神策分析、神策智能運營、神策智能推薦、神策用戶畫像、神策客景等產品。

目前，神策已積累中國銀聯、中國電信、小米、中郵消費金融、海通證券、廣發證券、東方證券、中原銀行、百信銀行、中青旅、平安壽險、四川航空、翼支付、好將來、VIPKID、華潤、有贊、百姓網、貨拉拉、閃送、驢媽媽、Keep、36氪、拉勾、VUE、春雨醫生、聚美優品、撈月狗、紛享銷客、媽媽幫等 1000 餘家付費企業用戶的服務和客戶成功經驗，爲客戶全面提供指標梳理、數據模型搭建等專業的諮詢、實施和技術支持服務。

創始團隊

創始人、CEO 桑文鋒：在百度任職 8 年，構建了百度用戶日誌大數據平臺。歷任軟件工程師、高級軟件工程師、項目經理、高級項目經理、技術經理，2015 年離職建立神策數據，針對企業級用戶推出用戶行爲分析產品神策分析，幫助企業實現數據驅動。

聯合創始⼈、CTO 曹犟：清華⼤學計算機碩⼠，2008 年⾄ 2014 年就任於百度⼤數據部，擔任百度⽤戶數據倉庫（BUDW）技術負責⼈，2015 年 4 ⽉成爲神策數據聯合創始⼈並擔任神策數據 CTO 職務。

聯合創始⼈、COO 劉耀洲：中國地質⼤學計算機應⽤技術碩⼠。曾供職於新浪、阿⾥巴巴、百度等公司，2015 年 4 ⽉離開百度，做爲聯合創始⼈創⽴神策數據並任 COO。

聯合創始⼈、技術 VP 付⼒⼒：畢業於北京理⼯⼤學軟件⼯程專業，2008 年⾄ 2013 年期間歷任百度新產品研發部、⽹頁搜索部、基礎架構部⼯程師。現任神策數據聯合創始⼈及技術VP。

融資日曆

公司於 2015 年成立，天使輪融資 600w 人民幣
2016 年得到 400w 美圓 A 輪融資
2017 年得到 1100w 美圓 B 輪融資
2018 年得到 4400w 美圓 C 輪融資
2020 年 5 月得到 3000w 美圓 C+ 輪融資

紅杉資本、華平投資、DCM 中國、襄禾資本持續跟投，公司技術有挑戰，待遇也很是好，誠邀各位大牛加入~~

社招 JD

前端研發、前端架構師(北京、成都、武漢)

工做職責：

負責數據可視化分析業務的 Web 前端研發；
與產品設計師一塊兒，優化整個產品的使用流程，爲使用者提供更好的數據可視化效果；
負責前端新技術的探索與實踐；

咱們的挑戰：

單頁面複雜 Web 應用，須要管理 10 萬行業務代碼，代碼量還在快速增加中；
與大量數據打交道，須要對數據業務有深層次的理解；
服務大量客戶，產品快速迭代的同時，要讓系統在健康的軌道上發展；

對工程師的要求：

熟練掌握 HTML/CSS/JavaScript 等前端基礎技術；
能寫出高質量的代碼，有良好的代碼風格、瞭解各類設計模式；
React/Vue/Angular 技術棧至少掌握其中一種，對背後的設計思路應該比較瞭解，讀源碼應該沒什麼困難；
10 萬行代碼在瀏覽器裏運行，性能方面是個挑戰，怎麼分析、優化性能應該有必定的瞭解；
很好的業務理解能力，與大數據打交道，須要理解的不僅是頁面上有哪些 UI 組件；
有可視化相關經驗優先（掌握Canvas/SVG/WebGL等Web渲染技術及標準，熟悉D三、ECharts、Highcharts、AntV、THREEJS等開源庫）