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