当我们进行性能优化，我们在优化什么（LightHouse 优化实操）
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_214
好的互联网产品不仅仅在功能上要高人一筹，在性能层面也需要出类拔萃，否则金玉其外败絮其中，页面是美轮美奂了，结果首屏半天加载不出来，难免让用户乘兴而来，败兴而归。
幸运的是，前端的性能优化有诸多有迹可循的理论和方法，其中相对权威的，无疑是 LightHouse。
LightHouse 是一个开源的自动化工具，它作为 Chrome 浏览器的扩展程序运行，提供一套完整的站点评分标准，我们可以依据此标准对站点进行基准测试，从而达到优化的效果。
怎么打开 LightHouse？可以在 Chrome 浏览器开发人员工具中找到 LightHouse。
要打开“开发人员工具”，请选择：
“顶部菜单→查看→开发人员→开发人员工具”
或者使用快捷键：
Mac 系统上的“⌥+⌘+I”
Win 系统上的“F12+Ctrl+Shift+I”。
随后点击生成报告按钮即可：
LightHouse 评分大体上有四大指标，分别为：性能、无障碍、最佳做法以及 SEO。
性能指标（Performance）
性能指标里又分为六个小指标：
Largest Contentful Paint 【简称 LCP: 最大内容渲染】
FCP 最大内容渲染时间标记了渲染出最大文本或图片的时间。
Total Blocking Time 【简称 TBT: 总阻塞时间】
TBT 测量了 FCP（首次内容渲染）和 TTI（可交互时间）之间的总耗时。TTI 可能会被主线程阻塞以至于无法及时响应用户。大于 50ms 的任务称为长任务，当任意长任务出现时，主线程则称为被阻塞状态。由于浏览器不会打断正在进行中的长任务，所以，如果用户在执行长任务时和页面有交互事件时，浏览器必须等到该长任务完成才能响应。TBT 计算的是在 FCP 到 TTI 之间所有长任务时间内总和。
First Contentful Paint 【简称 FCP: 首次内容渲染】
FCP 测量了从页面开始加载到页面任意部分的内容渲染到屏幕上。
Speed Index 【简称 SI: 速度指数】
SI 速度指数表明了网页内容的可见填充速度。lighthouse 首先捕获页面加载的视屏，然后对比帧与帧之间视觉效果变化（通过计算结构相似指数 SSMI 来比较)。
Time to Interactive 【简称 TTI: 可交互时间】
可交互时间是指网页需要多长时间才能提供完整交互功能。TTI 测量了从页面开始加载到页面的主要附属资源加载完毕，并且可以足够快速回应用户输入的所用时间。
Cumulative Layout Shift 【简称 CLS: 累积布局偏移】
CLS 累积布局偏移旨在测量可见元素在视口内的移动情况。CLS 值越小越好。
性能优化手段
有哪些手段可以提高这些性能指标？
首先需要优化的是页面“资源”，这里的资源指的是页面中加载的一切元素，包含但不限于：js 文件、css 文件、图片、视频等。
对于 js 文件来说，首先要做的是业务分拆，不同页面只加载对应需要的文件，并且做到单页面只加载一个 js 文件，减少 Http 请求数，多余的文件要做合并压缩操作，但其实这里有一个基础问题，就是如果 js 文件本身就很庞大，压缩比例再高，也是杯水车薪，举个例子，一般情况下 Jquery 官方的压缩版就已经高达 80kb 左右了，这样的体积很难有再次压缩的优化空间，所以还不如直接摒弃 Jquery，换成别的功能上可以替换的库，比如 zepto，后者的体积只有 26kb，是前者的四分之一。随后进行压缩合并操作，首先安装：
以本站为例，业务上用到的 js 库分别为 zepto.min.js、my.js、lazyload.min.js、wordcloud2.min.js iconfont.js，将这五个 js 文件进行合并压缩：
如此，最后得到一个体积为 59kb 的 1-min.js 文件，当然这是业务层面的压缩，还可以通过修改服务器进行 gzip 压缩：
加载方式上，尽量使用预加载：
同时，对于一些站外 js 比如广告，或者一些 js 特效，我们可以对其进行延时加载的操作，即首屏加载好之后，再加载这些逻辑：
上面的逻辑就是首屏完成 7 秒后再加载 Google 广告和标签云特效。
对于 css 文件的处理，原理和 js 文件差不多，宗旨也是分拆，缩小体积，并且压缩：
优化后，得到体积为 17kb 的 tidy_min.css 文件。
对于图片文件，不仅是首图，所有图片最好都采用新的图片格式 Webp，用以减少其体积，具体操作方法请移步：石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)。对于特定的图片，比如 Logo，使用 svg 格式图片，请移步：Logo小变动，心境大不同，SVG矢量动画格式网站Logo图片制作与实践教程(Python3)
同时，对于图片一律声明宽高属性，并且使用支持 lazyload.js 组件推迟对屏幕外图片的加载。
使用 viewport 标签加快移动端的载入速度：
无障碍（Accessibility）
访问无障碍检测所有用户是否都能有效地访问内容并浏览网站，无障碍性的每个指标项测试结果为 pass 或者 fail，与性能指标项的计算方式不同，当页面只是部分通过某项指标时，页面的这项指标将不会得分。例如，如果页面中的一些元素有屏幕阅读器友好的命名，而其他的元素没有，那么这个页面的 screenreader-friendly-names 指标项得分为 0。
一般情况下，优化无障碍其实是对于站点标签的优化，比如页面元素是否具备 title 标签、title 元素是否按降序排列、是否声明了页面语言类型、元素是否具备 alt 标签等等，值得一提的是，页面对比度也是无障碍评分重要的一环，假如背景色是 white，那么前景色最好选择高对比度的颜色，比如 black。
最佳做法（Best Practice）
最佳做法检测可以改善网页的代码健康状况的一些最佳做法，评分的分值由相关指标的加权平均值计算而来。
最佳做法指标我们可以理解为就是站点安全性的指标，多数情况下，需要保证协议为 HTTPS，同时要开启 CSP 网页安全政策防止 XSS 攻击。
CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。
开启方法：
搜索引擎优化（SEO）
搜索引擎优化检测搜索引擎对网页内容的理解程度是怎样的，评分的分值由相关指标的加权平均值计算而来。
说白了，就是站点页面是否适合搜素引擎蜘蛛的抓取以及收录，以本站为例，搜索引擎需要的标签如下：
包括页面标题、描述、作者、页面唯一标识等等元素。
当我们完成上面这些指标的优化之后，就可以，坐下来，欣赏这紫禁烟花一万重了：
正是：东风夜放花千树，更吹落，星如雨。
结语
前端的性能分析和优化方式，无论是传统性能还是感官性能完全可以根据 LightHouse 按图索骥。过程中可以针对某些指标进行一定的取舍，虽然本站在 LightHouse 的优化实践中取得了一定的效果，但路漫漫其修远兮，吾将上下而求索。
原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_214
版权声明: 本文为 InfoQ 作者【刘悦的技术博客】的原创文章。
原文链接:【http://xie.infoq.cn/article/caee0cb0c60c7016438637627】。文章转载请联系作者。
专注技术，凝聚意志，解决问题 v3u.cn 2020.12.21 加入
还未添加个人简介
评论