H5页面性能分析神器——lighthouse

前言

在写这篇文章的时候，以前有看过一大堆性能优化的文章，对的，每次看到别人写的好的博客最终的归宿不是脑子🧠，而是收藏夹📖，也就致使于当我真正遇到性能问题的时候一筹莫展，我也真是理解了那句话纸上得来终觉浅，绝知此事要躬行。今天在跟测的时候，测试大哥就一直在吐槽，为何你这新页面白屏这么的久，图片这里渲染的这么的慢，为何感受这动画一卡一卡的......真的那一刻我快被问成了十万个为何了，这时我打开了尘封已久的收藏夹阅读了起来......

走进Lighthouse

根据个人收藏夹中的文章显示，个人谷歌浏览器就能进行H5页面性能的分析，我可真是太开心了，我就喜欢这种0配置0代码的傻瓜教程。

版本高的Google浏览器自带了lighthouse，无需进行其余的操做

Categoies（分类）里面包括了Performance（性能）,PWA,Best practices(最佳实践),Accessibility(可访问性),SEO(搜索引擎优化)。

Device(设备)也能够选择是Mobile(手机),Desktop(桌面端设备)。

既然咱们是H5页面，那选择好Mobile,分类咱们没有使用PWA技术，那么咱们除了PWA以外所有勾选,最后点击Generate report生成最终的报告。

性能指标分析

这即是咱们网页最终的报告，下图是各项指标的分数，下面根据更具体一些时间指标来衡量咱们的性能。

真的是只能淡淡说一句时代变了，原来衡量性能好坏有如下6个方面，我记得以前衡量一个页面的性能当初张口闭口就是白屏多少秒😂

FCP

FCP(Fisrt Contentful Paint)：这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。

举个例子说说，就是页面从白屏到出现出现一张图片或者一段文字的时间，固然其实不少时候页面要去请求接口拉取数据，若是网络比较慢的话确定会白屏比较久，那么咱们的其实能够在数据没加载前放一个loading的图片,告诉用户页面在加载中,从而减小咱们的FCP的时间。

TTI

TTI(Time to Interactive)：这个表示首次可交互可流畅的交互时间，这个时间有几个特色：位于FCP以后,而且5秒内无长任务(大于50ms)的执行。

其实这个指标和FCP同样都很重要，FCP可能意味着咱们的页面开始渲染，即便渲染出页面不表明能够交互了，不少的时候咱们的页面渲染出来了，可是会比较的卡顿。

Speed Index

速度指数衡量的是内容在页面加载过程当中的视觉显示速度。Lighthouse首先会在浏览器中捕获一段页面加载的视频，并计算出各帧之间的视觉进度。

TBT

TBT(Total Blocking Time)：表示从FCP到TTI阶段中长任务总阻塞时间。

如下为web.dev官网对TBT所书写的例子：

上图表示主线程所作的任务时间线，其中任务分为长任务和短任务（长短任务的依据为执行时间是否大于50ms）。

那么超过50ms的地方实际上就是阻塞时间，那上面实际上阻塞时间就是345ms。固然阻塞致使浏览器没法中断正在进行的任务，从而使得用户没法当即进行交互，从而影响体验。

LCP

LCP(Largest Contentful Paint):表示页面最大的内容绘制。该时间会随着页面渲染变化而变化，由于页面中的最大元素在渲染过程当中可能会发生改变，另外该指标会在用户第一次交互后中止记录。

CLS

CLS(Cumulative Layout Shift)：表示页面累计位移偏移。页面内容的意外移动一般是因为异步加载资源或将DOM元素动态添加到现有内容上方的页面而发生的。

若是用户在使用页面的过程当中点击一个按钮，而后页面生成一块内容，致使该内容下面的全部内容下移，这即是一次页面的位移。

lighthouse的修改建议

lighthouse的优势不只仅能够根据这些重要的指标给咱们的页面打分，更重要的是lighthouse会给咱们不少的优化建议，这就至关于老师既会给学生打分又会讲解错题，真是很爽，否则的话还得去网上一个一个本身找解决方法，并且不少时候本身尚未解决的方向。

• 下面是lighthouse给咱们的一些建议

• 下面是有关咱们的项目对性能的诊断结果

后续的话进行项目性能优化的详细实践。