性能优化，不止是作技术

目录

1. 前言
2. 创建性能优化体系
3. 设定性能关键指标
4. 收益评估
5. 性能立项
6. 结束语
7. 题外话

前言

性能优化简简单单四个字，可是涉及了方方面面。作性能优化不止是作技术，还有不少技术以外的事情。咱们常常在知乎、掘金等等平台上看到不少性能优化的帖子。请注意并非说这些帖子很差，固然他们写的很好，可是作性能优化真的就是只须要知道有多少种优化策略，有多少种优化技巧吗？这些技巧或者策略短时间看来是颇有用的，可是长期来看这远远不够。

来源

来源

再次声明文章是做者的胡思乱想，若有意见咱们能够一块儿讨论，相互学习，相互成长。请轻一点喷😆

1. 创建性能优化体系

做为前端工程师，你懂的，前端性能优化通常比较琐碎、繁杂、麻烦，那怎么把琐碎、繁杂、麻烦的工做系统化呢？答案也就是你须要创建一套性能优化体系。固然这套优化体系是做者本人学习的性能优化体系，你也能够有本身的性能优化体系，这体系对不一样的人、不一样的系统、不一样的公司都会存在千差万别。

2. 设定性能关键指标

进行性能优化，你就要肯定它的指标，而后才能根据指标去采起措施，不然就会像无头苍蝇同样乱撞，没有执行目标。
这里列举一些网络上常见的关键指标，先声明指标不是惟一的，他在不一样的业务场景可能不同。段落中列举的指标不是惟一也不是标准，只是为了距离说明。

1. 视觉稳定性指标

咱们叫它 CLS（Cumulative Layout Shift），也就是布局偏移量，它是指页面从一帧切换到另一帧时，视线中不稳定元素的偏移状况。关于CLS，这里有一篇文章有兴趣的同窗能够看看。地址

2. 白屏时间指标

什么叫白屏时间呢？它指的是从输入内容回车（包括刷新、跳转等方式）后，到页面开始出现第一个字符的时间。这个过程包括 DNS 查询，创建 TCP 链接，发送首个HTTP请求（若是使用HTTPS还要介入 TLS 的验证时间），返回HTML文档，HTML文档 Head 解析完毕。它的标准时间是 300ms。

3. 首屏时间指标

首屏时间=白屏时间+渲染时间。它是指从浏览器输入地址并回车后，到首屏内容渲染完毕的时间。这期间不须要滚动鼠标或者下拉页面，不然无效。首屏时间咱们常常会听到一个词秒开，可是这个秒开也是有针对性的，如你在移动端秒开无可厚非，但若是你要求一个 PC 管理后台作到秒开应该也没有什么必要。

4. 交互指标

交互方面，有的公司用 FID 指标 （First Input Delay，首次输入延迟）， 指标必须尽可能小于 100ms，若是过长会给人页面卡顿的感受。还有的公司使用 PSI（Perceptual Speed Index，视觉变化率），衡量标准是小于20%。

5. 相应时间指标

响应时间是衡量系统性能的重要指标之一，响应时间越短，性能越好，通常一个接口的响应时间是在毫秒级。

• 数据库响应时间：数据库操做所消耗的时间，每每是整个请求链中最耗时的；
• 服务端响应时间：服务端包括 Nginx 分发的请求所消耗的时间以及服务端程序执行所消耗的时间；
• 网络响应时间：这是网络传输时，网络硬件须要对传输的请求进行解析等操做所消耗的时间；

3. 收益评估

收益评估以前我作性能优化的时候，自己没有他在乎，可是经历过面试官的毒打以后，我开始意识到这一点。若是仅仅判断性能指标是否优化到位还好，但不少时候，为了让产品同窗感受咱们是为产品服务，而不是又在造轮子，咱们还须要关联产品目标进行收益评估。好比，列表页到详情页的转化率能不能提高？用户跳出率可不可下降？优化能为公司带来多少收益？这一切都须要作评估。若是你费心费力作了半个月的优化，最后发现没有任何的价值，不能带来价值和收益，也不会获得承认。也许你会说我本身获得了技术提高，我本身很自豪，可是做为过来人很想说一句，这是资本家的时代。

4. 性能立项

性能立项就是经过成立一个项目组，用项目化的运做方式来解决性能问题。整个立项流程包括团队成员肯定、技术调研开展、项目目标制定、获取业务侧支持、项目名字选定，需求范围和优先级肯定等过程。
不知道你有没有发现，这个立项不是先定需求范围和优先级，而后再制定项目目标和成立项目团队。为何呢？由于这个性能优化项目，是探索性的项目需求。探索性项目需求，有别于平常的业务项目。业务项目通常都有明确的项目目标和需求修改范围。好比，提高首页到列表页的转户率。这个项目，需求文档和 UI 图会给出具体模块修改点、样式、内容等，前端开发完成后，产品和 UI 进行验收便可。而探索性项目需求，目标不肯定，通常须要先选定项目团队，作完技术调研，才能肯定出项目目标。由于探索性项目需求中的项目目标制定、获取业务侧支持、项目立项时机这三点和常规项目不太同样。

结束语

若是文章中什么不对或者写的很差的地方，请你们多多指正，谢谢！码字不易，点个赞加个关注吧！

题外话

笔者在「深圳虾皮」，一家口碑还不错的东南亚电商公司，2021大量招人，机会多多！快来加入咱们吧！

如今有想法，仍是之后有想法的同窗，均可以加我微信[stone---999]！内推你加入咱们的你们庭！