前端性能优化总结（全

最新推荐文章于 2024-06-28 15:40:18 发布

笑等枫

最新推荐文章于 2024-06-28 15:40:18 发布

阅读量63

点赞数

文章标签：前端性能优化 css

本文链接：https://blog.csdn.net/fengshengsc/article/details/131416072

版权

小图可以用雪碧图，精灵图
低于5K 的图片可以转换成 base64 内嵌,减少请求
合适格式，非透明用jpg，非苹果端用webp，可以用字体图标或svg矢量图
保真的情况下优化图片
不要在html缩放图片,设置图片的宽和高，以免浏览器按照[猜]的宽高给图片保留的区域和实际宽高差异，产生重绘。
使用体积小、可缓存的发Vicon.ico,存在 (避免404);尽量小，最好小于 1K;设置较长的过期时间。对于较新的浏览器，可以使用PNG格式的fawicon
图片懒加载，预加载
cdn静态文件托管，延长静态缓存时间
为图片标明高度宽度，减少浏览器计算

html

css

静态资源cdn缓存
Gzip压缩删除多余代码: tree-shaking UglifyJs code-spliting
正确设置 http缓存
1. 强缓存
  1. 强缓存（也称本地缓存，状态码200），本地缓存是最快速的一种缓存方式，只要资源还在缓存有效期内，浏览器就会直接在本地读取，不会请求服务端。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存。
2. 协商缓存
  1. 协商缓存（也称304缓存，状态码304），顾名思义是经过浏览器与服务器之间协商过之后，在决定是否读取本地缓存，如果服务器通知浏览器可以读取本地缓存，会返回304状态码，并且协商过程很简单，只会发送头信息，不会发送响应体。
避免src href为空
除去不要的cookies设置过期时间，减少cookies的大小因为每个请求都得带着他跑使用无cookie的域，比如CSS、is、图片等，客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响
升级到http2 多路复用
1. 多路复用，无需多个TCP连接，因为其允许在单一的HTTP2连接上发起多重请求，因此可以不用依赖建立多个TCP连接。
ssr服务端渲染，按需加载
多域名分发划分内容到不同域名

加loading效果，减少对白屏的感知
加过度动画，能有效减少用户对卡顿的感知;-轮播图、导航栏、弹窗
动画数尽量保证在 30 以上，低数、卡顿的动画宁愿不要;
记住用户使用习惯--记住用户的输入信息，本地存储实现，如果用户开启了隐身模式，本地存储将会被禁掉，可以改用cookiesG避免页面闪动--可以把样式内联，因为他是和DOM一起出来的。
执行时间避免超过100ms，超过的话就需要做:寻找可缓存的点;任务的分割异步或 webworker 执行;