推荐几个 React 性能优化工具

Profiler

可以前往 codesandbox.io/s/react-pro… 在线编辑效果。

Profiler 是 React 中的一个组件，由 B. Vaughn 开发，它可以测量 React 应用渲染的频率和渲染所花费的时间资源。Profiler 提供一个函数属性 onRender，当组件 mount 或者 update 的时候，这个函数会接受到一些时间指标。用这些时间指标你就可以发现效率低下的代码了。

import React, { Profiler } from 'react';

...
<Profiler id="Counter1" onRender={this.callback1(this)}>
  <Counter1 />
</Profiler>
复制代码

id 用来标识对应的 Profiler 组件，onRender 函数会在组件 mount 或者 update 的时候执行，它的参数结构如下：

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 Developer tools

React Developer tools 是 React 官方团队发布的一个浏览器插件，功能十分强大。我要介绍的是 Highlight Update 这个功能。这个工具用来检测组件重复渲染非常有效。他可以用不同的颜色来标识组件的边框，颜色越黄表示这个组件重复渲染的次数越多。

如果你有一个组件树像下面这样：

如果 Main 组件重复渲染了，那么封装 Counter 和 Count 组件的边界就会出现一个边框表示重复渲染。

我们激活这个特性之后,在 ReactJS 官网开启关闭右侧的菜单，会出现边框提示：

如何激活这个特性呢？找到调试工具的 Components 一栏，点击右上角的小齿轮，再选中弹窗中的 Highlight updates when components render.

边框的类型取决于重复渲染的程度，重复渲染越多，颜色越深。

|    绿色 - 低频次更新
|    蓝色 - 一般频次更新
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渲染技术及标准，熟悉D3、ECharts、Highcharts、AntV、THREEJS等开源库）

Java 研发工程师、Java架构师(北京、武汉)

工作职责:

负责神策大数据产品 Web 后端的架构设计和开发工作；
维护和升级现有技术框架，保证系统的稳定性和性能；
理解大数据分析产品业务需求，负责新功能的技术开发；
团队合作，参与大数据导入、存储与查询方向的技术调研和技术攻关；

职位要求:

计算机或相关专业毕业，本科及以上学历；
精通 Java 语言，具有扎实的计算机技术基础和良好的编程习惯；
熟悉 Spring/MyBatis/Netty/Nginx 等 Web 开源技术和框架；
精通数据库设计（MySQL优先），优秀的SQL编写及调优能力，熟悉常见NoSQL存储，如Hbase/Kudu/Redis/Mongodb等；
了解 Hadoop/Hive/Spark/Impala 等开源大数据技术优先；
善于学习新知识，主动性强；
良好的团队合作精神，较强的沟通能力；

测试开发工程师(北京、武汉、合肥)(合肥是 ios android SDK 测试)

工作职责：

负责数据应用产品的测试开发工作，协同产品经理、研发团队交付高质量的产品；
对产品质量问题进行跟踪分析和报告，推动测试中发现问题及时合理的解决；
完善研发过程中质量问题的发现机制，提升测试效率；

岗位要求：

计算机相关专业，本科及以上学历；
具有3年以上大型项目系统级测试经验，熟悉软件研发流程；
熟悉至少一种 BUG 追踪及持续集成工具的使用；
熟悉前端测试自动化框架，有前端自动化测试经验者优先；
至少熟悉python、shell、java等一门脚本语言；
具有较强的业务分析能力，较好的沟通表达和综合协调能力；
做事积极主动，责任心强，有快速学习能力，对大数据方向感兴趣。

运维工程师、架构师(北京、合肥)

岗位职责：

负责神策分析 SaaS 集群环境的运维；
负责神策分析私有部署环境的产品安装及运维工作；
参与产品安装程序及运维系统的改进；
向客户提供其它运维相关的技术支持；

任职要求：

本科或本科以上学历，计算机相关专业；
有两年以上互联网行业的运维经验；
熟悉Linux系统，有 Hadoop 等分布式系统的运维经验；
熟悉 Shell、Python 等至少一种脚本语言；
具有良好的语言表达能力和客户沟通能力，有较强的压力承受能力；

ios、android、web JS SDK 研发工程师(合肥)

工作职责：

负责神策 SDK 的设计、开发、优化。

岗位要求：

本科及以上学历，计算机或相关专业；
三年及以上相关平台（ios、android、web）开发经验；

ios sdk

IOS sdk 精通 Object-C、RunTime 等 iOS 主流开发技术；
熟悉各个不同版本 iOS 的特点；
精通多线程和网络编程，对高性能程序设计、架构有较多的工程经验；
具有较强的分析问题和解决问题的能力；
具备良好的团队协作能力、沟通能力和学习能力，有责任感。

android sdk

有扎实的 Java 语言基础、精通 Android 体系结构，熟悉 Framework 层；
精通多线程和网络编程，对高性能程序设计、架构有较多的工程经验；
有完整的 Android 项目经验；

web js sdk

负责神策前端 SDK 相关的调研，开发，维护，客户支持；
前端 SDK 包括，Web ，微信小程序，支付宝小程序，其他小程序，快应用等。
熟练并且全面的掌握 JavaScript 各种基础知识及技术细节，比如作用域，Cookie 等；
时刻关注前沿的 JS 技术，包括 ES6，React，Vue 等；

产品设计师(北京)

职位描述：

负责神策数据系列产品的界面设计工作；
根据产品需求寻找合适的设计方案，输出交互和 UI 细节；
对上线后效果和用户体验负责，推动产品持续改进；
与产品经理，工程师紧密沟通协作，共同达成目标；

职位要求：

2 年以上设计经验，有完整的 PC 端、移动端产品设计经验；
有 B 端设计经验优先；
具备优秀的视觉和一定的交互设计能力，熟练掌握设计工具，重视设计细节同时具备整体意识；
有较强的逻辑思维能力和沟通能力，准确理解信息，清晰表达想法，在团队合作中促成共识；
优秀的学习能力，自我驱动，追求效率，好奇心强，不自我设限；
提供完整的作品集；

产品经理、产品 Leader(北京)

工作职责：

负责用户行为分析产品线的需求分析、设计、交付；
对上线后效果负责，推动产品持续改进；
参与智能化营销、标签、画像、推荐、慧报等产品的探索与验证。

职位要求：

三年以上产品经验，有数据产品经验；
优秀的产品需求设计能力，能产出高质量原型与文档，热爱数据分析领域；
系统思考能力、自我驱动、迭代思维，对数据产品有见解和实践；
计算机、数学等理工科背景优先。

数据分析师(北京、上海、深圳)

工作职责：

协助客户梳理数据应用需求，从客户业务需求场景出发，指导客户完成多维度指标体系搭建，协助客户在神策数据平台上完成数据采集、分析与应用全流程工作；
以解决客户业务问题为目标，结合行业经验与方法论，提供咨询服务和专题分析报告；
梳理客户成功案例，形成行业解决方案，沉淀各业务领域的知识库；
与产品部门、技术部门配合，基于项目实践，产出产品改进需求，推动产品持续优化与完善；

岗位要求：

2年以上互联网或咨询行业数据关联工作经验，数据产品、数据分析、数据运营岗优先；
熟悉数据平台的整体搭建，具备可视化数据或者营销平台搭建项目经验优先；
熟练使用统计分析工具，逻辑严谨，能够独立分析和解决问题；
具备优秀的沟通及服务意识，良好的现场表达能力，能够独立负责和推进项目；
具备极强的学习能力和自我驱动意识，能够发现问题并解决问题；
对大数据行业感兴趣；

校招 JD

前端工程师(北京)

工作职责：

负责神策核心数据产品的 Web 前端的开发
与产品设计师一起，优化整个产品的使用流程，为使用者提供更好的数据可视化效果
与团队伙伴一起进行前端新技术的探索与实践

岗位要求：

计算机相关专业，本科及以上学历
熟悉 HTML/CSS/JavaScript 等前端相关技术，了解前沿的 JS 技术更加分，包括 ES6，React，Vue 等
对写代码之外的事情能熟练运用各种工程工具处理，对工具背后的工作原理应该有一些了解
对大数据方向感兴趣，对接触各种互联网产品感兴趣，乐于培养自身的产品意识
快速学习能力，主动性强

后端研发工程师(北京)

工作职责：

负责大数据产品的后端研发工作；
负责存储、查询、导入等相关模块的具体开发与维护；
提升产品整体的运行效率与稳定性。

岗位要求：

本科及以上学历，计算机相关专业；
对大数据方向感兴趣，乐于帮助客户实现数据驱动；
计算机基础知识扎实，熟悉主流开发语言及操作系统原理，对分布式系统具有浓厚兴趣；
对接触各种互联网产品感兴趣，乐于培养自身的产品意识；
快速学习能力；主动性强。

机器学习算法工程师(北京)

工作职责：

分析金融、新闻、短视频等互联网行业的业务问题，调研适合客户需求的机器学习算法，确定评估目标；
处理业务数据，完成离线与在线的特征工程；
负责机器学习算法研发与调优；

岗位要求：

本科或本科以上学历，计算机相关专业者优先；
熟悉数据挖掘、机器学习等相关知识；
能快速学习、研发适用于多种业务场景的机器学习算法；
快速学习能力；主动性强。

把你的简历砸过来吧~~

Sensors Data - 给客户带来价值

简历投递：liu3248184446@outlook.com

这篇关于推荐几个 React 性能优化工具的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript