前端性能优化对业务产生的影响

  • 2020.11.27

性能是一个老生常谈的话题,面试中、晋升中总是会问题相关的问题。

那么性能的目的是为了什么?性能的优化能给业务带来什么?为公司创造什么样的价值。

之前看到这么一个小故事:

从前有个工程师,特别注重代码细节,有一天他发现系统中的一段代码写的性能很差,因此,他用汇编重写了整段代码,执行效率足足提升了三倍。但是最后,大家发现,用户反馈性能丝毫没有提高,因为他优化的那个进程名字叫System Idle

System Idle Process 是WIN2000/XP以及Vista/WIN7操作系统都有的一个进程,其作用都是一样的。就是在CPU空闲的时候,发出一个IDLE命令,使baiCPU挂起(暂时停止工作),可有效的降低CPU内核的温度,在操作系统服务里面,都没有禁止它的选项。

它是占用除了当前应用程序所分配的处理器(CPU)百分比之外的所有占用率;一旦应用程序发出请求,处理器会立刻响应的。在这个进程里出现的CPU占用数值并不是真正的占用而是体现的CPU的空闲率。

这个数值越大CPU的空闲率就越高,反之就是CPU的占用率越高。如果在刚刚开机的情况下就发现System Idle Process的CPU占用值很低的话应该就注意后台有什么大的程序在运行或者感染病毒了。数字越小则表示CPU资源紧张。该进程是系统必须的,不能禁止。

像上述的这种性能优化其实就脱离了业务背景,带来的价值并不大。

所以凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的。

那么为了给业务带来价值,我们需要从哪几个方面去建立一个好的性能体系呢?大致有如下几点:

  • 现状评估和建立指标;

  • 技术方案;

  • 执行;

  • 结果评估和监控。

现状评估和建立指标

每个公司都有自己不同的业务,对应着也有不同场景下的基础建设,这个没有唯一的标准,评估现状的时候没有最好的解决方案,只有适合自己内部的解决方案。

但是再性能的方面无外乎都会涉及到这么几个点:

  • 页面加载性能;

  • 动画与操作性能;

  • 内存、电量消耗。

“页面加载性能”跟用户的流失率有非常强的关联性,研究发现当用户的界面加载时间再1s之内,对用户来说是比较合理的体验,超过1s外就会产生一定的焦急感,这也就产生了对应的秒开率一词。

技术方案

为了优化页面加载的性能问题,我们首先需要了解的是从输入 URL 后按下回车,到底发生了什么。这个问题经常也会出现在各种的面试场景,大致包括了一下这个几个方面,这里仅简单介绍,完整的可以查看我写的另外一篇文章从用户输入url到浏览器呈现页面发生了什么?

  • 从域名到 IP 地址,需要用 DNS 协议查询;

  • HTTP 协议是用 TCP 传输的,所以会有 TCP 建立连接过程;

  • 如果使用 HTTPS,还有有 HTTPS 交换证书;

  • 每个网页还有图片等请求。

页面秒开率优化

优化的效果不是一个人的事情,需要整个团队以及其他部分的通力合作。

实施

实施的过程一部分涉及前端的开发工作,一部分也涉及到跟其他部分的沟通与合作。建议制定一个目标计划,每天跟进计划的进行状况,有变动的点及时同步各个部门。

结果评估和监控

优化的最终目的是产生收益,如何让老板们知道我们做了这么一件事情,并且这件事情给公司带来了价值,这就一定要涉及到结果的监控和总结。没有数据的说明,我们无法让人家信服这是一件能带来价值的事情。

要想拿到数据,不外乎以下两件事情:

  1. 数据采集;

数据采集针对前端而言可以通过Performance看板采集页面相关的数据,上传到指定的服务器上。

  1. 数据的展示。

数据展示没有唯一的标准,但是有个注意点就是一定要突出优化前后的差异。可以用大屏的数据看板也可以做成移动端形式的看板,依据个人喜欢来完成即可。

上次更新时间: 2021-01-14 17:09:00