前端性能优化
性能优化方法
- DNS 优化：避免浏览器并发数限制，将HTML/CSS/JS，jpg/png，api 接⼝等不同资源放在不同域名下，从⽽减少DNS的请求次数；DNS 预解析。
- CDN 回源：回源指浏览器访问CDN集群上静态⽂件时，⽂件缓存过期，直接穿透 CDN 集群⽽访问源站机器的⾏为。
- 浏览器缓存优化：IndexDB、cookie、localStorage、sessionstorage。
- HTML5 离线化：通过选⽤不同的离线包类型
- 全局离线包：包含公共的资源，可供多个应⽤共同使⽤
- 私有离线包：只可以被某个应⽤单独使⽤
- 接⼝优化：
- 接⼝合并：减少http请求
- 接⼝上 CDN：把不需要实时更新的接⼝同步到CDN，如果接⼝数据更新再重新同步 CDN
- 接⼝域名上 CDN：增强可⽤性，稳定性
- 合理使⽤缓存：异步接⼝数据优先使⽤本地 localstorage 中的缓存数据，通过 md5 判断是否需要数据更新
- ⻚⾯加载策略优化：
- ⽹络请求优化：减少⽹络资源的请求和加载耗时
- 预加载
- 开启GZIP
- 预渲染：可以让浏览器提前加载指定⻚⾯的所有资源。
- 使⽤ HTTP/2、HTTP/3提升资源请求速度
- 资源请求合并，减少http请求
- 合理使⽤defer，async
- ⾸屏加载优化
- 对⻚⾯内容进⾏分⽚/分屏加载
- 懒加载：监听scroll事件；使⽤IntersectionObserver
- ⾸屏只加载需要的资源，对于不需要的资源不加载。
- 客户端离线包⽅案
- 客户端进⾏预请求和预加载
- 渲染过程优化：减少⽤户操作等待时间
- 按需加载
- 减少回流和重绘
- 减少/合并dom操作，减少浏览器的计算损耗
- 浏览器运算逻辑优化
- 拆解⻓任务，避免出现⻓时间计算导致⻚⾯卡顿
- 提前将计算结果缓存
- 关键渲染路径优化：关键渲染路径是指浏览器将HTML，CSS，JavaScript转换为屏幕上所呈现的实际像素这期间所经历的⼀系列步骤。
- CSS 的
<link>标签放在<head></head>之间 <script>标签放在</body>之前
- CSS 的
- ⽹络请求优化：减少⽹络资源的请求和加载耗时
- ⻚⾯静态化（SSR）
- 图⽚优化：选择合适的图⽚格式，减小图片大小。
- HTML代码优化：
- 精简HTML代码：减少HTML的嵌套；减少DOM节点数；减少⽆语义代码；删除多余的空格、换⾏符、缩进等等
- ⽂件放在合适位置：CSS 样式⽂件链接尽量放在⻚⾯头部；JS 放在HTML底部
- CSS 代码优化：
- 提升⽂件加载性能：使⽤外链的 CSS；尽量避免使⽤ @import，@import影响css⽂件的加载速度
- 精简 CSS 代码：利⽤CSS继承减少代码量；避免使⽤复杂的选择器，层级越少越好
- 使用 CSS 精灵图
- 字体⽂件优化：
- 使⽤cdn加载字体⽂件
- 开启gzip压缩字体⽂件
- 通过font-display来调整加载顺序
- 字体裁剪，剔除不需要使⽤到的字体
- 内联字体
- JS 代码优化：
- 提升 JS ⽂件加载性能：JS ⽂件放在body 底部；合并js⽂件；合理使⽤defer和async
- JS 变量和函数优化：尽量使⽤ id 选择器；尽量避免使⽤ eval；js 函数尽可能保持整洁；
- 使⽤节流、防抖函数；使⽤事件委托
- JS 动画优化：避免添加⼤量 js 动画；尽量使⽤ css3 动画；尽量使⽤ Canvas 动画；使⽤ requestAnimationFrame 代替 settimeout 和 setinterval。
- webpack 打包优化
原文地址：https://blog.csdn.net/XiugongHao/article/details/140659110
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！