简单入门:前端性能优化指南
「这是我参与2022首次更文挑战的第28天,活动详情查看:2022首次更文挑战」
前端性能优化
作为一名 c+v
工程师,不知道大家在有没有经历过这样的情况:
- 面试的时候:
- 面试官: 你会不会性能优化啊?
- 面试官: 从输入
URL
到看到整个页面经历了什么过程?
- 开发的过程中:
- 页面加载好慢啊,啥情况?
- 页面一直卡顿,又又又啥情况? 想必大家应该都或多活动有遇到过吧,也正因为如此,所以本章也会的讲一下性能优化的问题,当然了因为章节有限的缘故,本章也没有办法把很细致的点:缓存怎么优化、DNS、渲染怎么优化等。
本章主要是讲一下前端性能优化的一些概念和一些套路。
什么是 Web 性能
简单来说就是你的网站够不够快。
虽然说起来非常的简单,但是是从下面的几个点来进行衡量的:
- 打开速度
- 动画效果
- 表单提交
- 列表滚动
- 页面切换
- ...
MDN上关于 Web性能的定义 What is web performance?
Web性能就是让网站变快,包括让缓慢的进程看起来变快。网站是否加载迅速,允许用户快速开始与它互动,并提供可靠的反馈,如果某些东西需要时间加载(如加载旋转器)?滚动和动画流畅吗?
Web 性能是网站或应用程序的客观度量和可感知的用户体验。
为什么要关注 Web 性能
Web 性能的好坏从一定程度上决定了:
- 用户的留存率
- 网站的转换率
- 体验与传播
- ... 还有就是你的工作绩效了
如何进行 Web 性能优化?
在进行 Web 性能优化之前,我们需要明确了解以下几点:
- 我们要了解性能指标
- 学会使用 Web 性能测试;
- 可以立足于网站页面响应的生命周期,分析出造成较差性能表现的原因;
- 技术改造、可行性分析等具体的优化实施
性能指标
1.RAIL 模型衡量性能
RAIL 这四个单词代表与网站或应用的生命周期相关的四个方面,这些方面会以不同的方式影响整个网站的性能。
- 响应(Response):应该尽可能快速的响应用户, 应该在 100ms 以内响应用户输入。
- 动画(Animation):在展示动画的时候,每一帧应该以 16ms 进行渲染,这样可以保持动画效果的一致性,并且避免卡顿。
- 空闲(Idle):当使用 Javascript 主线程的时候,应该把任务划分到执行时间小于 50ms 的片段中去,这样可以释放线程以进行用户交互。
- 加载(Load):应该在小于 1s 的时间内加载完成你的网站,并可以进行用户交互。
2.衡量性能和用户体验
- Largest Contentful Paint 最大内容绘制 (LCP)
最大内容绘制 (LCP) 是测量感知加载速度的一个以用户为中心的重要指标,因为该项指标会在页面的主要内容基本加载完成时,在页面加载时间轴中标记出相应的点,迅捷的 LCP 有助于让用户确信页面是有效的。
- First Contentful Paint 首次内容绘制 (FCP)
首次内容绘制 (FCP) 是测量感知加载速度的一个以用户为中心的重要指标,因为该项指标会在用户首次在屏幕上看到任何内容时,在页面加载时间轴中标记出相应的点,迅捷的 FCP 有助于让用户确信某些事情正在进行。
3.Web Vitals
什么是 Web Vitals?
Google 给出的定义是 一个良好网站的基本指标(Essential metrics for a healthy site),过去要衡量一个网站的好坏,需要使用的指标太多了,Web Vitals 可以简化指标的学习曲线,只需聚焦于 Web Vitals 指标的表现即可。
在这些 Web Vitals 中,Google 确定了三个主要衡量指标,即在所有类型的网站中通用的 Core Web Vitals:
如何测量?
- 性能测试工具,比如 Lighthouse
- web-vitals库
- Web Vitals插件
如何优化?
- 优化 Largest Contentful Paint 最大内容绘制
- 优化 First Input Delay 首次输入延迟
- 优化 Cumulative Layout Shift 累积布局偏移
4.其他性能指标
- 重定向次数
- 重定向耗时
- DNS 解析耗时
- TCP 连接耗时
- SSL 安全连接耗时
- 网络请求耗时 (TTFB)
- 数据传输耗时
- DOM 解析耗时
- 资源加载耗时
- 首包时间
- 白屏时间
- 首次可交互时间
- DOM Ready 时间
- 页面完全加载时间
- http 头部大小 推荐看看这个 Web的性能指标有哪些?
专业工具
通常我们会借助一些工具来完成性能测量。 本节先简要介绍一下会用那些工具,如果本章阅读量比较不错的话,会有独立章节详细介绍它们的使用方式与生成报告的分析。
- lighthouse
- WebPageTest 测试性能
- 使用 Chrome DevTools 测试性能
- Performance API
网站页面响应的生命周期
- 浏览器通过请求得到一个HTML文本
- 渲染进程解析HTML文本,构建DOM树
- 解析HTML的同时,如果遇到内联样式或者样式脚本,则下载并构建样式规则(stytle rules),若遇到JavaScript脚本,则会下载执行脚本。
- DOM树和样式规则构建完成之后,渲染进程将两者合并成渲染树(render tree)
- 渲染进程开始对渲染树进行布局,生成布局树(layout tree)
- 渲染进程对布局树进行绘制,生成绘制记录
- 渲染进程的对布局树进行分层,分别栅格化每一层,并得到合成帧
- 渲染进程将合成帧信息发送给GPU进程显示到页面中
页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程
优化方案
经过对网站页面性能的测量及渲染过程的了解,相信你对于糟糕性能体验的原因已经比较清楚了,那么接下来便是优化性能,我们先简单扼要地介绍一些优化方面的思路。
- 从发出请求到收到响应的优化,比如 DNS 查询、HTTP 长连接、HTTP 2、HTTP 压缩、HTTP 缓存等。
- 关键渲染路径优化,比如是否存在不必要的重绘和回流。
- 加载过程的优化,比如延迟加载,是否有不需要在首屏展示的非关键信息,占用了页面加载的时间。
- 资源优化,比如图片、视频等不同的格式类型会有不同的使用场景,在使用的过程中是否恰当。
- 构建优化,比如压缩合并、基于 webpack 构建优化方案等。
- ... 因为确实的进行拆分内容会很多,这里就简单的写一点了,如果有兴趣的话。。。再写吧
参考
- 【1】RAIL 模型衡量性能
- 【2】Largest Contentful Paint 最大内容绘制 (LCP)
- 【3】First Contentful Paint 首次内容绘制 (FCP)
- 【4】优化 Largest Contentful Paint 最大内容绘制
- 【5】优化 First Input Delay 首次输入延迟
- 【6】优化 Cumulative Layout Shift 累积布局偏移
- 【7】Web Vitals
- 【8】解读新一代 Web 性能体验和质量指标字节跳动大佬的哦
- 【9】谷歌的新一代 Web 性能体验和质量指标:Web Vitals
- 【10】 Web的性能指标有哪些?
- 【11】如何使用Lighthouse性能检测工具
- 【12】[WEB] 前端性能监控开源方案
- 【13】# 彻底理解服务端渲染 - SSR原理 #30
推荐
- 【1】 写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践
- 【2】聊一聊前端性能优化
- 【3】前端性能优化 24 条建议(2020)
- 【推荐一个小主页】(juejin.cn/user/152137…)