perf(0): 面试官: 说一下性能优化!

149 阅读6分钟

“艹,这货不是傻x吧!净问这些没边儿的问题,咋给你回答呀”,此刻,心中一万头草泥马奔腾而过。于是搜肠刮肚,想到啥是啥,就一股脑的秃噜出来了:CSS放到头部、JS放到尾部、压缩文件、移除未使用的代码、使用CDN……。然后面试官就让回家等消息了,然后就再没有然后了。

👆🏻上面那个心里各种diss的人就是我,真的是,碰到这种没边儿的问题就上头,不知道你们有没有类似的情况。奈何,十次面试有九次面试官都是这么问“说一下性能优化”,答不好是真的找不到工作啊!为什么总回答不好呢,经过反思,我发现了问题的根本所在:那就是我从未认真系统学习过关于性能优化的知识,现有的那些知识都是从网上东拼西凑得来的。

所以,想要回答好这个问题,就必须系统的学习性能优化,从而做到,不但知其然还知其所以然。作为性能优化系列文章的首篇内容,为构建统一的认知上下文,咱们先解决以下问题。

声明:从Web前端开发的生命周期上看,涉及的性能话题有两类:一是以开发者为中心的构建性能,二是以用户为中心的Web性能;本系列内容讨论的是Web性能。

1、讲性能优化时到底在讲什么?

“说一下性能优化”,这句四六不靠的话,谁听了都会是一头雾水,现在我们先来完善一下这个问题:“请您讲一下,您是如何优化Web前端页面性能的?”。这么一来,问题就清楚了许多,原来“性能优化”讲的是“Web前端页面性能优化”(为了方便叙事和交流,之后用“Web性能”一词指代“Web前端页面性能”)。

为了使“Web性能”更优秀,首先得知道“Web性能”是什么,怎样算是优秀,怎样算是糟糕,得能拿出来衡量和比较。像汽车的百公里加速指标一样,“Web性能”也是通过时间和速度这样的概念来衡量好坏的;通俗理解就是:性能好的网页加载速度以及对用户输入的响应速度像法拉利一样快,而性能差的网页表现的就会像拖拉机一样慢;接下来看一段引用内容,它是对“Web性能”比较权威的概述:

Web性能是客观的衡量标准,是用户对加载时间和运行时的直观体验。Web性能指站点从加载到可交互和可响应所消耗的时间,以及页面在交互时的流畅度——滚动是否顺滑?按钮能否点击?弹窗能否快速加载和显示、动画是否平滑?Web性能既包括客观的度量(如加载时间、每秒帧数和到页面可交互的时间),也包括用户的对页面内容加载时间的主观感觉。

所以,讲性能优化时到底在讲什么呢?就是在讲,如何提升网页加载速度以及网页对用户输入的响应速度来为用户提供更好的体验。

Ref: 百公里加速是指汽车从静止状态加速到100公里/小时所需的时间,这是衡量汽车动力性能最直观的指标。

2、这个性能优化就非做不可么?

平日里业务需求加班都还搞不完,这个性能优化就非做不可么?还真就是非做不可,可能不是当下马上就要做的事情,但却是必须要做的事情;接下来咱就从性能优化的重要性以及开发者从中可能获得收益这两个方面说道说道。

做性能优化的目的是为了提高用户体验,用户对于任何公司的成功都是至关重要的,只有把用户留住了,公司才可能获得商业上的成功;对于我们打工人来说,只有公司发展好了我们才有可能好,公司发展不好,我们铁定是好不到哪去的。从这个角度看来,做性能优化这件事对公司及个人发展都是极其重要的。

形而上的说完了,再说说做性能优化对开发者有什么实际收益。一直以来,性能优化是一个倍受关注的领域,不论是在工作还是面试中都是绕不开的话题;学习和实践性能优化,不但可以加深对web前端开发的理解,还有助于提高职业竞争力,在工作或面试中脱颖而出。悄悄的说,现在大厂的前端leader们不知道搞啥亮眼项目时,很多人就会在性能优化上做文章,如果掌握了性能优化,是不是就能拉进和领导的关系,有机会成为领导的狗腿子,那年终奖是不是就稳了呢?

3、做性能优化如何正确开始呢?

工欲善其事,必先利其器,在性能优化开始之前需要先找到一件趁手的性能测量工具,它是一把尺子,用它来测量出来存在的性能问题,然后再具体问题具体分析具体解决,这才是性能优化的正确开始,而不是上来就应用那些所谓的最佳实践。

现在社区有很多的性能测量工具供我们使用,比如:Chrome DevToolsLighthouseWebPageTest等等,它们都可以用来测量Web性能,还可以使用浏览器内置的PerformanceAPI来测量真实用户的Web性能。

性能测量工具到底测量的是什么,为什么CSS放头部、JS放尾部、压缩文件……就能解决一些性问题?要搞明白这些就需要先了解浏览器的工作原理,下篇文章来具体介绍。

总结

  • 讲性能优化是在讲:如何提升网页加载速度以及网页对用户输入的响应速度来为用户提供更好的体验。
  • 性能优化这件事对公司和个人发展都是极其重要的,是值得大力投入成本的,是必须要去做的事情。
  • Web性能是客观的衡量标准,在性能优化开始之前需要先找到一件趁手的性能测量工具。