当前位置: 首页 > Web前端 > CSS

前端性能优化知识点总结

时间:2023-03-30 15:48:09 CSS

面试必谈--前端性能优化为什么要优化给用户最好的体验#有哪些不好的体验-白屏显示内容时间长-h5浪费用户流量优化方案大致分为以下几种:1.减少请求数a.减少获取数据的接口数量(初始数据尽量通过一个接口返回)b.减少js和css数量(使用缓存提取公共js和css,减少后续加载访问。部分代码直接注入页面,不需要外链访问和加载。)c.图片延迟加载2.减小文件大小a.压缩图片,使用webpb。压缩js和cssc。Gzip(设置内容编码:gzip)d.Iconorsvg绘制图标3.加速请求a.[DNS预分析][1]b.减少域名数量(pages、js、css、image、界面域名,请求同类型文字尽量使用同域名)c.静态资源cdn分发d.提前加载(提前加载一些用户可能访问到的图片或数据信息)4、缓存a、http协议缓存b、离线数据缓存localStorage5、渲染a、js、css优化(按规范写——谷歌规范)b。服务器渲染C.可以异步加载的JS应该异步加载d.不要为js修改dom和css,以免重绘DNS预解析google规范