前端性能优化
小秀_heo 2024-08-19 17:03:02 阅读 71
性能优化方法
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> 之前 ⻚⾯静态化（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和asyncJS 变量和函数优化：尽量使⽤ id 选择器；尽量避免使⽤ eval；js 函数尽可能保持整洁；使⽤节流、防抖函数；使⽤事件委托JS 动画优化：避免添加⼤量 js 动画；尽量使⽤ css3 动画；尽量使⽤ Canvas 动画；使⽤ requestAnimationFrame 代替 settimeout 和 setinterval。 webpack 打包优化
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。