累死累活干不过一个写PPT的

不管是身处什么行业什么领域,数据分析愈来愈成为一贯必不可少的技能, 而运用数据思惟进行决策更能产生造成高质量的决策结果。前端

随着互联网的不断发展和物联网设备的不断普及,咱们平常生活中的各类数据被存储下来,让咱们能够经过定量分析数据,利用数据实现更好的决策制定。node

如今愈来愈多的公司开始注重这一块,一方面自建数据体系,一方面去买一些数据。而对于咱们我的彷佛尚未意识到或者开始挖掘数据对咱们的价值。git

笔者最近的工做大都是作一些基础设施搭建和流程优化相关的工做。 这部分工做对不少人来讲都是“隐形”的,对上层使用者来讲很难有很大的感知。 对于领导来讲,若是你只是闷头去作事情,他们也是很难知道你干的怎么样,若是这之间再加上 你没有什么反馈,就会给同事和领导一种“不靠谱”的感受。程序员

所以给予反馈和直观展现本身劳动成果的能力就显得很是重要。 然而若是你能很好展现本身的劳动成果,那么只须要将这个给老板看就是一种很好很直观的反馈。github

这篇文章,咱们来谈一下,如何量化咱们的工做,如何将咱们的工做成果展现出来。 如何让同事,让领导体会到咱们工做的成果。我会经过几个例子来帮助你们快速理解,以及掌握这门“技术” 。面试

《让数据开口说话》是我给这篇文章的标题,让数据开口说话,你就能够少说一点,而且摆数据就是摆事实, 数据带来的说服力要比你说的话强不少。前端工程化

关于我

我是一个对技术充满兴趣的程序员, 擅长前端工程化,前端性能优化,前端标准化等。api

作过.net, 搞过Java,如今是一名前端工程师。浏览器

除了个人本职工做外,我会在开源社区进行一些输出和分享,GitHub 共计得到1.5W star。比较受欢迎的项目有leetcode题解 , 宇宙最强的前端面试指南个人第一本小书性能优化

收集数据

若是让数据开头说话,那么首先第一步你要有数据。

所以咱们的第一步就是收集数据,那么在这以前你须要知道你须要什么数据。 这部分的内容随着每一个人任务不一样确定是不同的。所以有着很大的灵活性,

有一个指导思想就是对关键指标分解。 好比我如今要作打包时间进行优化,那么打包时间由哪些时间决定。

打包时间 =  阶段1 时间 + 阶段2 时间 + 阶段3 时间
复制代码

咱们减小打包时间确定要减小其中一个或多个。

有时候咱们没法找到这种简单的分解,那就教你们另一个技巧:运用对比。

一方面能够基于时间进行对比,好比环比增加,同比增加等数据都是这么来的。

另外一方面咱们能够基于用户属性进行对比,好比用户年龄,性别,偏好,操做系统类型, 地域属性等。

下面我举几个例子。

打包优化

假如你被分配了一个任务。让你对项目的打包过程进行优化。

  • 你须要对打包时间进行优化,减小打包的时间

  • 你须要对打包的最终产物进行优化,减小打出的包的包体大小。

  • 将打包变得尽量的简单,也就说尽可能减小人为的操做过程。

你接到了这样一个任务,你会如何去作?

这里咱们不考虑具体的具体思路和细节。 假设你的架构思路,方案规划,各类fallback已经想好了。 咱们如何经过上面提到的让数听说话的角度来收集数据呢? 换句话说,咱们须要收集哪些数据?

打包时间

对于打包时间的数据,最简单的咱们计算一下整体的打包时间。

最后咱们只须要对比优化先后的整体打包时间差别便可。

这对于老板来讲可能已经够了,可是这缺少一些精确性,咱们没法知道经过优化了哪一个环节进行 减小了打包时间。 所以一种简单的改进是将打包划分为多个阶段,每一个阶段分别进行统计计时⌛️ 。

包的大小

包的大小的数据其实和上面讲的打包时间思路相似。

咱们固然能够只统计整体包大小。

可是为了得到更加灵活的定制和更加精确的范围咱们能够对包进行必定的划分。 这个划分能够是业务纬度,也能够是纯技术纬度。

打包命令

这部分比较简单,咱们只须要简单地统计手动操做的次数便可。

经过收集以上的数据,咱们就能够用数据来表示咱们的成果,让数听说话,关于如何 使用这些数据,咱们稍后讨论。

页面加载性能优化

假如你被分配了一个任务。让你对项目的页面加载速度进行优化。 你会怎么作?

这个任务有点太宽泛了,更多的时候会有一些更精确的指标, 好比将网络状态为fast 3G中端机型的白屏时间下降到3s之内

timing

性能优化的第一步就是测量,没有测量就没有优化。咱们不能为了优化而优化, 而是看到了某些点须要优化才去优化的。 而发现这个点一个重要的方式就是要靠测量。

说到测量,广泛接受的方式是,在浏览器中进行打点,将浏览器打开网页的过程看做是一个旅行。 那么咱们每到一个地方就拍张带有时间的照片(事件),最后咱们对这些照片按照时间进行排列, 而后分析哪部分是咱们的瓶颈点等。

performance-api

有了这些timing 咱们能够很方便的计算各项性能指标。咱们还能够自定义一些咱们关心的指标,好比请求时间(成功和失败分开统计),较长js操做时间,或者比较重要的功能等。

总之收集到这些数据以后,咱们只须要根据咱们的需求去定制一些指标便可。

这样咱们就很容易展现出这样的画面:

render-perf

人效提高

假如你是一个项目的管理者,上级分配给你一个任务,要在将来几个季度去作“研发效率提高”, 也就是提升“交付速度”。 你会怎么作这件事?

任务

这个事情是比较主观的了,所以咱们切实须要一些能够量化的东西来辅助咱们。

咱们考虑将需求进行拆分,变成一个个任务。一个需求可能有多个任务。

咱们考虑对每个任务进行计时,而不是需求,由于需求有太大的差别。 咱们能够针对任务进行分类,而后咱们的目标就能够变成“减小同类任务的交付时长”。

可是这种粒度彷佛仍是有点大。咱们能够采起标签的形式,对任务进行交叉分类。

任务纬度可能仍是有点太大,咱们能够采起更小的粒度划分,好比模块和组件。

这样咱们的统计纬度就丰富起来了,咱们不只能够整体进行统计分析,咱们还能够根据tag和tag的组合进行汇总。

好比一个典型的统计结果大概是:

- task1 (tagA)
  - module1 (tagA)
    - component1 (tagB)
    - component2 (tagA)
  - module2 (tagB)
  - module3 (tagB)
 - task2 (tagA)
 - task3 (tagC)
复制代码

好比这里有一种tag叫“是否复用了之前的代码”, 那么咱们就很容易统计出组件复用率,也就很容易很直观地知道先后的差距了。

用户拉新和留存

再好比咱们须要作“用户拉新和留存”,咱们应该怎么作?

这个留作思考题,你们能够思考一下。

我这里抛砖引玉一下,好比咱们的统计纬度能够是:

- 用户访问时长 (tagA)
- 跳出率 (tagB)
- 新用户 (tagA)
- 流失的老用户 (tagB)
- 地址位置 (tagA)
复制代码

假如个人tag有两个分别是 用户id和时间, 咱们就能够方便地统计每一个用户的活动数据趋势。

让数听说话

有了数据,咱们如何经过数据来加强表现力呢?

一种很是有效的措施是可视化。如今的可视化引擎和工具备不少,功能也很是复杂。

可是我发现我我的须要的就那么几个,可能你们每一个人须要的种类不大同样, 可是我相信做为我的,你须要的种类不会不少。所以本身根据自身的实际状况, 挑选适合本身的几种类型,作到迎刃有余就足够了。

对于我而言,我经常使用的是饼图,用来表示分布关系。 曲线图用来表示趋势。 用柱状图表示对比+趋势。用热度图表示离散的数据分布等等。

咱们可使用一些现有的成熟的产品来帮助咱们将刚才咱们收集到的数据转化为各类图表, 好比 画布

这个网站能作的图表种类比较少。

固然做为一名前端咱们也能够本身写代码去更灵活地展现咱们的数据,好比D3 或者百度的echarts

任何类型的图表均可以作,只有你想不到,没有它作不到。

相对折中一点,咱们能够选择支持代码定制的一些产品,在特殊状况咱们能够自定义。

累死累活干不过作 PPT 的

有了这些数据图表,是时候写一份PPT来秀一下了。

一种方式是使用你电脑的办公软件或者一些在线的幻灯片制做工具作, 好比slides

另外一种方式经过写代码的方式实现,做为程序员我推荐使用第二种。 这里推荐一款nodejs cli 工具 nodeppt, 还有另一个JS 框架 reveal.js 。 上面提到的slides背后的原理就是它。

总结

这篇文章我主要讲述了如何量化咱们的工做,并将咱们的工做成果展现出来。 从而摆脱“干了不少事情,却说不出来,甚至功劳被人无情拿走的尴尬局面”。

首先咱们将了如何收集数据,收集数据的一些技巧,这里经过几个实际工做的例子,分别是“打包优化”,“性能优化”,“人效提高”, “用户留存” ,来帮助你们理解这个 过程,掌握这个技巧。

有了数据以后,咱们须要经过一些手段将其数据展现出来,给人直观的感觉,最好有视觉冲击感。 这里我推荐了几个工具和平台,你们能够根据本身的状况选择。

最后结合咱们实际状况,PPT是一个很好的展现本身的东西,无论是晋升仍是宣传都是很好的方式, 这里我也推荐了几个产品,帮助你们更快更好地将图表展现出来。

让数据开口说话,你就能够少说一点,而且摆数据就是摆事实, 数据带来的说服力要比你说的话强不少。

关注我

最近我从新整理了下本身的公众号,而且我还给他换了一个名字《脑洞前端》,它是一个帮助你打开大前端新世界大门的钥匙 🔑,在这里你能够听到新奇的观点,看到一些技术尝新,还会收到系统性总结和思考。

我会尽可能经过图的形式来阐述一些概念和逻辑,帮助你们快速理解,图解前端是个人目标。

以后个人文章同步到微信公众号 脑洞前端 ,您能够关注获取最新的文章,或者和我进行交流。

gongzhonghao

交流群

如今仍是初级阶段,须要你们的意见和反馈,为了减小沟通成本,我组建了交流群。你们能够扫码进入

QQ 群

qq-group-chat

微信群

JavaScript

(因为微信的限制,100 我的以上只能邀请加入, 你能够添加个人机器人回复“大前端”拉你进群)

相关文章
相关标签/搜索