前端性能优化解决方案
2024-04-28 10:38:45 0 举报AI智能生成
前端性能优化解决方案是一种提高网站和应用程序速度的策略集合，旨在提供快速、流畅的用户体验。主要包括以下几方面：首先，减少HTTP请求数量，通过合并和压缩文件、使用CSS Sprites等技术，降低网络负载。其次，缓存数据，借助浏览器缓存、CDN等方式，减少服务器负担。再次，延迟加载，对于非关键资源采用懒加载方式，确保关键内容优先显示。此外，压缩图片和CSS、JavaScript代码，减小文件大小，提高加载速度。最后，使用CSS3和JavaScript动画替代Flash，提升页面性能。这些方法有助于提高前端性能，构建响应迅速、体验良好的网站和应用程序。
作者其他创作
大纲/内容
问题分析与定位
衡量标准
以用户为中心的性能指标
常用指标
First Contentful Paint（FCP）
首次内容绘制
作用
【衡量加载性能】记录从页面开始加载到屏幕上呈现页面内容的任何部分的时间
web vitals衡量
分支主题
Largest Contentful Paint（LCP）
最大内容绘画
作用
【衡量加载性能】记录视口内可见的最大图像或文本块的渲染时间
web vitals衡量
分支主题
First Meaning Paint（FMP）
首次有意义绘制
Speed Index
反应页面加载速度（首屏展现平均时间）
Cumulative Layout Shift（CLS)
累计布局偏移分数
作用
【衡量视觉稳定性】记录了⻚面上非预期的位移波动
web vitals衡量
分支主题
First Input Delay（FID)
用户首次与页面互动响应时间
作用
【衡量互动】记录用户首次与网页互动（点链接、点按钮等）到浏览器实际触发事件响应互动的时间
web vitals衡量
分支主题
Interaction to Next Paint（INP）
用户与页面互动的响应时间
作用
【衡量互动】观察用户与页面互动（点击、点按、键盘等操作）的延迟时间
web vitals衡量
分支主题
TTFB
资源请求第一个字节响应时间
web vitals衡量
分支主题
实验室指标
Time to Interactive（TTI)
可交互时间
作用
记录从页面开始加载到页面主要资源脚本加载完成的时间
Total Blocking Time（TBT）
总阻塞时间 = FCP+TTI
RAIL 性能模型
Response 响应（用户操作0-100ms响应，不会有延迟感）
Animation 动画（每秒渲染60帧，也就是每帧花费1000/60≈16.7ms，这类动画感觉很流畅丝滑）
Idle 浏览器空置时间（最大化利用浏览器空闲时间）
Load 加载（页面 1 秒内加载完成，让用户感受到体验不错；超过 1 秒，用户注意力会分散；超过 10 秒，用户就会感到沮丧，放弃访问页面）
问题分析工具
性能检测工具
LightHouse
依据性能指标判断
WebPage Test
问题分析工具
Network
网络问题
接口响应状态
接口请求时长
接口响应
Performance
页面渲染性能问题
Loading
Scripting
Rendering
Painting
System
Idle
Memory
内存问题
Recorder
页面交互记录
任务管理器
页面内存占用问题
资源打包分析工具
speed-measure-webpack-plugin
打包测速
webpack-bundle-analyse
bundle体积分析
性能优化方案
策略：根据输入url到加载完成，探索优化方案
输入URL
缓存查询
DNS解析
TCP三次握手，建立连接
client发送HTTP请求
server响应请求返回html资源
浏览器解析html -> DOM Tree
浏览器解析css -> CSSOM Tree
合并生成 -> render Tree
layout 布局
painting 绘制渲染
网络层面（s级：优先考虑）
使用缓存
浏览器缓存
Memory Cache(内存）
离线缓存 PWA
Manifest
Service Worker
技术优势
即使在离线状态或弱网下，通过事先缓存的资源，也可以正常加载运行当前应用
使用 App Manifest 预先缓存了资源，无需经过网络，即秒开页面
应用 Service Worker 技术提升性能，离线提供静态资源文件，提升首屏用户体验
使用 Service Worker 可以给用户发送离线推送消息
提升用户体验
HTTP Cache
强缓存：200
header标识
Expires（HTTP1.0）
缓存过期时间
Cache-control（HTTP1.1）
max-age=[秒]
表示缓存时间
no-cache
每次必须去跟服务器做新鲜校验
no-store
不使用任何缓存
max-stale=[秒]
接收已过期的响应
min-fresh=[秒]
期望在指定时间内的响应仍有效
public
浏览器、代理服务器都能缓存
private（默认）
仅向浏览器返回缓存
缓存请求/指令
缓存请求指令
缓存响应指令
两者对比
Cache-control优先级高于Expires
位置
from memory cache
from disk cache
查询顺序：内存优先磁盘
协商缓存：304
header标识
Etag/If-None-Match
随机hash
Last-modified/If-Modified-Since
单位秒
两者对比
精确度上，Etag优于Last-modified
性能上，Last-modified优于Etag
服务器校验，优先考虑Etag
Push Cache(会话缓存)
仅HTTP2
本地存储
cookie
会话管理（记录）
用户登录信息
购物商品
游戏得分
...
个性化
用户首选项
主题或其他设置
跟踪
记录和分析用户行为，比如埋点
localStorage（本地持久化存储）
缓存静态文件内容JS/CSS（案例：百度M站首页）
缓存不常变更的API接口数据
储存地理位置信息
浏览页面的具体位置/上次操作历史
优化用户体验
sessionStorage（会话存储）
indexDB（索引数据库）
客户端存储大量结构化数据
没有网络连接使用（比如Google Doc、石墨文档）
存储冗余、很少修改，但经常需访问的数据，以避免从服务器随时获取数据
Web SQL（不安全，不建议使用）
DNS优化
DNS预解析
分支主题
合理设置域名个数
浏览器有并发数限制，可以设置2-4个域名
主站webserver域名：Java、PHP等API接口
静态cdn域名
页面和样式：HTML/JS/CSS
图片：jpg、png、gif等
HTTP优化
减少http请求次数
避免不必要的重定向
301
永久重定向
302
临时重定向
合并文件，减少请求次数
减少单次请求时间
HTTP1.1
减小请求头：减小cookie大小
压缩请求体（gzip压缩）
Accept-Encoding：gzip
Content-Encoding：gzip
request header
response header
升级HTTP2
特性
二进制格式传输数据
将所有传输的信息（header+body）分割为更小的消息和帧，并用二进制格式进行编码
多路复用
通过一个 HTTP2 连接发起多个请求，服务器不用按顺序响应，ID可以匹配对应
头信息压缩
encoder header
缓存header field字段
服务器端推送 Server Push
请求html文件，服务器主动推送相应的js、css文件到客户端
优势
提升网站访问速度
增加并发量
传输速度加快
保护网站安全
HTTP3
服务端响应优化
动静分离：静态资源存储到另外的CDN服务器
CDN 优点
提速：会给用户指派较近、较顺畅的服务器节点，传输静态资源
低成本：服务器被放到不同地点，减少了互连的流量，也降低了宽带成本
高可用度：当某个服务器故障时，自动调用邻近地区的服务器
CDN 缓存
三级缓存
浏览器本地缓存
CDN边缘节点缓存
CDN源站缓存
不同静态资源缓存时间
HTML：3分钟
JS、CSS：10分钟、1天、30天等
CDN 灰度发布
原理
部分地区的运营商优先发布静态资源，验证通过后，再进行全量发布
实施
域名方面，设置特殊 VIP 解析至要灰度城市的运营商；
源站机方面，给灰度的城市、运营商配置单独源站机
CDN 大促备战
增加机房带宽
增加运营商流量
灾备：CDN缓存时间延长，大促后恢复（如：10分钟设置为1小时）
负载均衡：多台服务器响应高并发请求
比如：Nginx 设置upstream模块
轮询（默认）
权重
ip_hash
第三方
fair
url_hash
渲染层面（100ms级）
关键渲染路径：DOM Tree -> CSSOM Tree -> render Tree -> layout -> Layer -> compositing -> painting -> 成像
策略：减少重排重绘
工具监测：chrome Rendering面板（Paint flashing）
静态资源优化
HTML
压缩
在线压缩工具
html-webpack-plugin插件
精减
减少iframe使用
避免table布局
减少HTML嵌套，减少DOM节点数
删除多余的空格、换行符、缩进和不必要注释
删除冗余标签和属性
删除http/https协议头
使用相对路径的url，比如./
DOM优化
控制DOM大小
合理的业务逻辑拆分
延迟加载（懒加载）
简化DOM操作
合并多次DOM操作统一处理后，再插入到 DOM Tree 中
Angular、React、Vue 都在使用虚拟 DOM，通过diff算法找到差异，减少DOM操作
CSS
位置：放在<head>里，尽早进行样式解析，构建CSSOM
加快解析策略
简化选择器
尽量避免使用占用过多CPU、内存和GPU属性
text-indent
CSS3 transform、transition、opacity
使用先进的布局方式
减少文件请求
代码合并
按需加载
减少文件大小
压缩
在线工具压缩
Minify
Webpack插件
optimize-css-assets-webpack-plugin
编码优化
利用缓存
mini-css-extract-plugin
编码优化
简化css选择器
减少样式层级数（减少选择器嵌套）
少用标签选择器，尽量选择高优先级的id、类/属性/伪类选择器
少用通配符选择器
关注可继承属性，避免重复定义和匹配
优化css
元素显隐操作频繁，可设置 visibility: hidden
图片最好设置好 width、height
使用 viewport 设置屏幕缩放级别（缩放交给浏览器）
避免使用CSS表达式
避免频繁设置同一div样式，可进行一次性更改
动画使用绝对定位，可以让元素脱离文档流
CSS动画优化
尽量避免同时动画
延迟动画初始化0.5/1秒
借用SVG
思考
transform vs transition 哪个性能更好？
精减css
使用缩写语句，如margin-top/bottom，直接用margin
删除不必要的0
删除不必要的单位，如0px，直接写0
删除过多分号
删除空格和注释
总的来说，减少CSS文件大小
JS
位置：放body底部，不阻塞HTML和CSS解析
减少文件请求数
合并JS文件
webpack配置LimitChunkCount
maxChunks 限制chunk数量
minChunkSize 限制最小chunk的大小
首屏渲染暂不需要第三方依赖脚本按需加载
合理使用缓存
业务代码缓存
非敏感数据，使用本地存储
使用离线缓存Service Worker缓存资源、Ajax网络请求
合理缓存 DOM 对象
Webpack缓存策略
模块缓存
hard-source-webpack-plugin
DLL 动态链接库
loader cache
...
减少文件大小
压缩
在线工具压缩
Webpack插件
uglify
gzip
Webpack减小chunk
开启 Tree Shaking
剥离第三方依赖externals
提取公共模块
webpack3.x：commonsChunkPlugin
webpack4.x：splitChunks（开箱即用内置的）
删掉不必要的代码
编码优化
代码拆分（避免超过1KB脚本），按需加载
合理选择<script>加载模式
正常模式
async
defer
DOM操作优化
合并多次DOM操作
绘制过程开销比较大的属性设置尽量避免使用
减少绘制区域范围
大数据量渲染优化
函数优化
尽量使用id选择器
尽量避免使用eval
使用事件节流/防抖函数
使用事件委托
动画优化
避免添加大量的JS动画
尽量使用 CSS3、Canvas 动画
合理使用 requestAnimationFrame 动画代替 setTimeout、setInterval
对象优化
实例化后避免添加新属性
尽量使用Array代替array-like对象
尽量避免元素类型转换
执行优化
避免运行占用时间过长
任务拆分
延迟执行
大数据并行计算
长时间运行的JS移到 Web worker
经典场景
大数据量长列表渲染优化
实现 Virtual List
分页加载
图片
优化请求
合并雪碧图 CSS Sprite
web font代替图片
将字体部署在CDN上
将字体以 base64 形式保存在 CSS 中并通过 localStorage 进行缓存
使用Google字体库因为某些原因（网络异常）不可抗，应该使用国内托管服务
Data URI(base64)代替图片
CSS3代替阴影、动画图效
懒加载
预加载（逐步加载图片）
使用统一占位符：loading动图
使用 LQIP 低质量图片占位
使用 SQIP：基于svg的图片占位符
低质量占位符
渐进式加载
减小图片大小
压缩
在线压缩工具 tinypng/jpg
webpack插件压缩
image-webpack-loader
npm插件
压缩png：node-pngquant-native
压缩jpg：jpegtran
压缩gif：gifscle
使用合适的图片格式
jpg 有损
png 无损
png8
索引色 256
支持透明度调节
小图标
png24
直接色
不透明
png32
直接色
Alpha，支持透明度调节（半透明）
gif
矢量图
svg 无损
iconfont
图片尺寸，随网络环境变化
wifi
4G
3G
加载不同尺寸和像素的图片
响应式图片，随窗口大小变化
CSS媒体查询@media
img srcset属性
图片服务器自动优化
图片裁剪：按长边、短边、填充、拉伸等
图片格式转换：支持jpg、gif、png、webp等，支持不同的图片压缩率
图片处理：添加图片水印、高斯模糊、裁剪边框等
AI能力：智能抠图、排版、配色、合成等
音/视频
使用合适的格式
压缩
剪辑音视频
移除不必要的音轨信息
移除页面不必要的音视频
应用案例
用户体验优化
页面初始化加载
首屏加载优化
懒加载/预加载
页面交互
CSS优化
keyframes动画优化
JS优化
JS动画优化
Canvas 绘制加速
webGL 绘制加速
防抖/节流
长列表：VirtualList
页面卸载
内存优化（防内存泄漏）
研发效能优化
代码自动化检查
webpack优化
构建速度优化
打包体积优化
部署优化
CI 构建优化
设置企业私有源
npm依赖拉取开启缓存
0 条评论
下一页
为你推荐
查看更多
