目录
一、图片优化
1、图片选择
格式 使用场景 压缩插件 JPEG 颜色丰富的图,不支持透明度,适合图片展示。 jpegtran PNG 体积较大、但是支持透明度,适合边缘清晰,纯色或者大块相同颜色,例如背景图片 jdf-png-native || node-pngquant-native GIF 每个像素只有8bit,不适合色彩丰富的图,但是可做动效。 gifsicle Webp 不适合色彩比较丰富的图像,适合图形额半透明图像(谷歌浏览器) 2、图片转base64
将图片转成base64,随着html或者css请求到本地,减少一些http请求。
3、雪碧图 && Web Font
雪碧图:将一些小的图标合在一张图片上 使用偏移来获取图标,减少请求。
Web Font:css 伪元素 ::before ::after自定义生成图标。
4、图片延迟加载
1)使用统一占位符、低质量的占位符(可使用lqip、sqip插件生成)、holder.js占位等,等真实的图片加载后,再替换掉占位符(可使用lazyload插件)
2)占位后懒加载、可视范围再加载
5、缩略图 && 响应式图像
缩略图:根据不同的网络环境请求不同大小的图片,可以通过url传递不同的参数来实现
响应式图像:根据窗口尺寸来显示不同尺寸的图片,实现如下
1)CSS3 @media
2)img的scrset sizes参数
3)<picture>标签
4)js控制
二、HTML结构优化
- 将CSS放在head中优先请求
1)CSS的加载不会阻塞dom树的解析,渲染树的生成依赖css树,因此需要提前加载
- 将script放在body底部去请求
1)script的请求会阻断dom树的解析,因为dom树的解析是一步一步的,因此放到最后去加载,防止阻断dom解析过程
三、CSS、js优化
- 压缩源文件
1)减少请求的文件体积
- 将css和js进行一些合理合并,减少http的请求
1)浏览器有并发限制,最多可以并发6个请求
动画执行优先使用CSS,其次使用js,使用js是尽量使用requestAnimationFrame
1)CSS3动画的性能要高于JS,
因为CSS3会启动GPU硬件加速
如果使用transform、opacity(will-change、translateZ(0))提升为合成层。
合成层有自己的渲染上下文,并由GPU处理,当需要重绘是只重绘自己层内元素,不会重绘整个页面。
2)requestAnimationFrame执行动画,比setTimeout会好一些。
2-1)由系统来决定回调函数的执行,不需要关系屏幕的刷新频率。2、当页面最小化时会停止执行。3、自带节流,防止不必要的渲染
2-2)事件循环队列保证不了执行时机
3)也可以使用cavnas实现动画,避免直接操作dom来实现动画,导致页面不停回流和重绘。
模块优化处理
1)模块通过路由管理,提供懒加载能力。
2)将组件封装时默认提供懒加载能力。
3)首页及分析长页面,只在可视范围参与轮询。串行和并行控制,做到并发次数小于6(浏览器de)。
四、网络和服务端优化
1)dns缓存
2)浏览器缓存
2-1)通过请求头Cache-Control,ETag等将静态资源进行缓存。nginx配置为expires 1h;
2-2)部署cdn
3)服务端缓存
3-1)redis、EHCache、memcached等二级缓存
前端加载性能优化总结
最新推荐文章于 2024-07-01 22:52:36 发布