脚本宝典收集整理的这篇文章主要介绍了前端性能优化-资源优化，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

资源优化方向压缩和合并，目的是减少http请求数量、减少请求资源大小。

 

css、JS文件合并原则：

1、若干小文件可以尝试合并

2、无冲突，服务相同模块

3、不是为了优化合并而合并，按需合并，让用户更早看到和使用功能为主。

 

图片优化方案：

1、选择合适格式的图片，了解jpg、png、svg、webp、gif等格式图片的特点，jpg可以保存成渐进式格式，默认格式是自上而下加载

2、选择合适大小的图片传给客户端

3、不同显示器显示合适尺寸的图片，可以使用srcset、sizes属性设置不同浏览器下显示的图片

4、图片压缩，要平衡图片质量和压缩之间的比例关系

5、图片优先级的加载

6、图片懒加载、预加载

 

字体优化：

常见不可避免的字体问题是FOIT和FOUT，字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁。

1、font-display来控制字体以上的行为，font-display不同值产生的效果：

 

2、拆分字符集，将常用字符集优先加载。

3、使用ajax+base64，解决兼容问题，但是无法有效缓存。

 

脚本宝典总结

以上是脚本宝典为你收集整理的前端性能优化-资源优化全部内容，希望文章能够帮你解决前端性能优化-资源优化所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。