性能优化面试官想听的是什么？别再说那些老掉牙的性能优化了

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战html

网上性能优化的文章太多了，都说如何如何请求优化代码优化之类的，全部人都知道的事，并且实际工做中根本不可能每一个项目都用到那些所有，而是应该对咱们的项目有针对性的优化，你说是吗？前端

好比程序员

说一下前端性能优化？web

你平时是怎么作性能优化的？面试

等等相似这样的问题，不过就是换汤不换药罢了npm

好吧，先上药canvas

这性能优化呢，它是一个特别大的方向，由于每一个项目可能优化的点都不同，每一种框架或者每一种客户端能够优化的点也都不同小程序

总的来讲，如今B/S架构下都是前端向后端请求，后端整理好数据给客户端返回，而后客户端再进行数据处理、到渲染将界面展现出来，这么一个大体流程后端

那咱们优化就是要基于这一过程，说白了咱们可以优化的点，就只有两个大的方向浏览器

一是更快的网络通讯，就是客户端和服务端之间，请求或响应时数据在路上的时间让它更快

二是更快的数据处理，指的是

服务器接到请求以后，更快的整理出客户端须要的数据
客户端收到响应的数据后，更快的给用户展现 以及 交互时更快的处理

而后！开始blablabla.....

更快网络通讯方面好比：CDN作全局负载均衡、CDN缓存、域名分片、资源合并、雪碧图、字体图标、http缓存，以减小请求；还有gzip/br压缩、代码压缩、减小头信息、减小Cookie、使用http二、用jpg/webp、去除元数据等等，blablabla.....

更快数据处理方面好比：SSR、SSG、预解析、懒加载、按需引入、按需加载、CSS放上面、JS放下面、语义化标签、动画能用CSS就不用JS、事件委托、减小重排、等等代码优化，blablabla.....

.....

请直接把上面的总结成一句话给面试官

请求优化、代码优化、打包优化都是常规操做，像雅虎34条军规，都知道的事就不用说了

由于每一个项目优化的点可能都不同，因此优化主要仍是根据本身的项目来

要么跟人家聊一下框架优化，深刻原理也很不错

具体要优化什么主要仍是看浏览器(Chrome为例)开发者工具里的 Lighthouse 和 Performance

Lighthouse 是生成性能分析报告。能够看到每一项的数据和评分和建议优化的点，好比哪里图片过大

Performance 是运行时数据，能够看到更多细节数据。好比阻塞啊，重排重绘啊，都会体现出来，够不够细节

而后再去根据这些报告和性能指标体现出来的状况，有针对性的去不断优化咱们的项目

Lighthouse

直接在Chrome开发者工具中打开

或者 Node 12.x或以上的版本能够直接安装在本地

npm install -g lighthouse
复制代码

安装好后，好比生成掘金的性能分析报告，一句代码就够了，而后就会生成一个html文件

lighthouse https://juejin.cn/
复制代码

不论是浏览器仍是安装本地的，生成好的报告都是长的如出一辙的，一个英文的html文件，翻译了一张给你们看看，如图

如图，分析报告内容一共五个大项，每一项满分100分，而后下面是再把每项分别展开说明

仍是看一下英文版吧，一个程序员必需要养成这个习惯

如图，五项分别是：

Performance：这个又分为三块性能指标、可优化的项、和手动诊断，看这一块就能够咱们就能够优化不少东西了
Accessibility：无障碍功能分析。好比前景色和背景色没有足够对比度、图片有没有alt属性、a连接有没有可识别名称等等
Best Practices：最佳实践策略。好比图片纵横比不正确，控制台有没有报错信息等
SEO：有没有SEO搜索引擎优化的一些东西
PWA：官方说法是衡量站点是否快速、可靠和可安装。在国内浏览器内核不统一，小程序又这么火，因此好像没什么落地的场景

而后咱们知道了这么多信息，是否是就能够对咱们的项目诊断和针对性的优化了呢

是否是很棒

Performance

若是说 Lighthouse 是开胃菜，那 Performance 就是正餐了

它记录了网站运行过程当中性能数据。咱们回放整个页面执行过程的话，就能够定位和诊断每一个时间段内页面运行状况，不过它没有性能评分，也没有优化建议，只是将采集到的数据按时间线的方式展示

打开 Performance，勾选 Memory，点击左边的 Record 开始录制，而后执行操做或者刷新页面，而后再点一下(Stop)就结束录制，生成数据

如图

概况面板

里面有页面帧速(FPS)、白屏时间、CPU资源消耗、网络加载状况、V8内存使用量(堆)等等，按时间顺序展现。

那么怎么看这个图表找到可能存在问题的地方呢

若是FPS(看图右上角)图表上出现红色块，就表示红色块附近渲染出一帧的时间太长了，就有可能致使卡顿
若是CPU图形占用面积太大，表示CPU使用率高，就多是由于某个JS占用太多主线程时间，阻塞其余任务执行
若是V8的内存使用量一直在增长，就可能由于某种缘由致使内存泄露
- 一次查看内存占用状况后，看当前内存占用趋势图，走势呈上升趋势，能够认为存在内存泄露
- 屡次查看内存占用状况后截图对比，比较每次内存占用状况，若是呈上升趋势，也能够认为存在内存泄露

经过概览面板定位到可能存在问题的时间节点后，怎么拿到更进一步的数据来分析致使该问题的直接缘由呢

就是点击时间线上有问题的地方，而后这一块详细内容就会显示在性能面板中

性能面板

好比咱们点击时间线上的某个位置(如红色块)，性能面板就会显示该时间节点内的性能数据，如图

性能面板上会列出不少性能指标的项，图中左边，好比

Main 指标：是渲染主线程的任务执行记录
Timings 指标：记录如FP、FCP、LCP等产生一些关键时间点的数据信息(下面有介绍)
Interactions 指标：记录用户交互操做
Network 指标：是页面每一个请求所耗时间
Compositor 指标：是合成线程的任务执行记录
GPU 指标：是GPU进程的主线程的任务执行记录
Chrome_ChildIOThread 指标：是IO线程的任务执行记录，里面有用户输入事件，网络事件，设备相关等事件
Frames 指标：记录每一帧的时间、图层构造等信息
.......

Main 指标

性能指标项有不少，而我使用的时候多数时间都是分析Main指标，如图

上面第一行灰色的，写着 Task 的，一个 Task 就是一个任务

下面黄色紫色的都是啥呢，那是一个任务里面的子任务

咱们放大，举个例子

Task 是一个任务，下面的就是 Task 里面的子任务，这个图用代码表示就是

function A(){
    A1()
    A2()
}
function Task(){
    A()
    B()
}
Task()
复制代码

是否是就好理解得多了

因此咱们就能够选中有问题的，好比标红的 Task ，而后放大(滑动鼠标就可放大)，看里面具体的耗时点

好比都作了哪些操做，哪些函数耗时了多少，代码有压缩的话看到的就是压缩后的函数名。而后咱们点击一下某个函数，在面板最下面，就会出现代码的信息，是哪一个函数，耗时多少，在哪一个文件上的第几行等。这样咱们就很方便地定位到耗时函数了

还能够横向切换 tab ，看它的调用栈等状况，更方便地找到对应代码

具体你们能够试试～

Timings 指标

Timings 指标也须要注意，如图

它上面的FP、FCP、DCL、L、LCP这些都是个啥呢

别着急

上面说了 Timings 表示一些关键时间点的数据信息，那么表示哪些时间呢，怎么表示的呢？

FP： 表示首次绘制。记录页面第一次绘制像素的时间
FCP：表示首次内容绘制（只有文本、图片(包括背景图)、非白色的canvas或SVG时才被算做FCP）
LCP：最大内容绘制，是表明页面的速度指标。记录视口内最大元素绘制时间，这个会随着页面渲染变化而变化
FID：首次输入延迟，表明页面交互体验的指标。记录FCP和TTI之间用户首次交互的时间到浏览器实际可以回应这种互动的时间
CLS：累计位移偏移，表明页面稳定的指标。记录页面非预期的位移，好比渲染过程当中插入一张图片或者点击按钮动态插入一段内容等，这时候就会触发位移
TTI：首次可交互时间。指在视觉上已经渲染了，彻底能够响应用户的输入了。是衡量应用加载所需时间并可以快速响应用户交互的指标。与FMP同样，很难规范化适用于全部网页的TTI指标定义
DCL: 表示HTML加载完成时间

注意：DCL和L表示的时间在 Performance 和 NetWork 中是不一样的，由于 Performance 的起点是点击录制的时间，Network中起点时间是 fetchStart 时间(检查缓存以前，浏览器准备好使用http请求页面文档的时间)
L：表示页面全部资源加载完成时间
TBT：阻塞总时间。记录FCP到TTI之间全部长任务的阻塞时间总和
FPS：每秒帧率。表示每秒钟画面更新次数，如今大多数设备是60帧/秒
FMP：首次有意义的绘制。是页面主要内容出如今屏幕上的时间，这是用户感知加载体验的主要指标。有点抽象，由于目前没有标准化的定义。由于很难用通用的方式来肯定各类类型的页面的关键内容
FCI：首次CPU空闲时间。表示网页已经知足了最小程度的与用户发生交互行为的时间

好了，而后根据指标体现出来的问题，有针对性的优化就好

结语

点赞支持、手留余香、与有荣焉

感谢你能看到这里，加油哦！