前端经典面试题 | 性能优化之图片优化

简介: 前端经典面试题 | 性能优化之图片优化

一、回答点

base64格式 选择正确图片格式 CDN加载..

二、深入回答

如何对项目中的图片进行优化?

  • 不使用图片,大多数时候我们用到很多修饰类图片,这类图片可以直接使用css代替
  • 在移动端,不需要去加载原图,使用CDN去进行加载,计算出适配屏幕的宽度,请求相应裁剪好的图片
  • 小图使用base64格式
  • 将多个图标文件整合在一张图中
  • 选择出正确的图片格式:
  • 能够显示WebP格式的浏览器尽量使用WebP格式.它具有更好的图像数据压缩算法,能带来更小的图片体积,缺点:兼容不太好

常见的图片格式及场景

  • BMP => 无损 支持索引色同时也支持直接色的点阵图.没有对数据进行压缩,文件体积较大
  • GIF => 无损 采用索引涩的点阵图. LZW压缩算法对其进行编码.文件小,并且支持动画及透明.但是GIF只支持8bit的索引色,它适用于 对色彩要求不高且文件提交小的场景.
  • JPEG => 有损 采用直接色点阵图.优点:采用了直接色,得益于更丰富的色彩,它非常实用来用存储图片,与GIF对比,它不适合用来存储企业的Logo 线框类的图.有损压缩会导致图片模糊,而直接色的选用,会导致图片体积比GIF大
  • PNG-8 => 无损 采用 索引色的点阵图. 它是一种较新的图片格式,PNG8是非常好的GIF格式的替代者,尽可能的去使用PNG8而不是GIF.在相同情况下,PNG8有更小的体积.并且它支持透明度的调节.除非需要动画的支持 否则没理由使用GIF.
  • PNG-24 => 无损 采用直接色的点阵图.优点: 压缩了图片数据,同样效果的图片 PNG24格式的大小比BMP小得多,当然比JPEG GIF PNG8大得多.
  • SVG => 无损矢量图. SVG图片由直线和曲线及绘制它们的方法组成.当放大SVG图片时,看到的还是线和曲线.不会出现像素点.SVG图片放大时 不会失真,非常适合用来制作logo等..
  • WebP => 新图片格式(谷歌开发),WebP同时支持有损和无损压缩,采用 直接色的点阵图.从名字看 由Web而生,相同质量的图片WebP具有更小的体积.如果能降低每一个图片的文件大小,将大大减少浏览器和服务器之间的数据传输量,从而降低访问延迟,提升体验.只有谷歌浏览器和Opera浏览器支持WebP格式.前文说到了,兼容性不太好.
  •   在无损压缩情况下,相同质量的WebP图片,体积要比PNG小25%上下.
  •   在有损压缩的情况下,具有相同精度的WebP图片,体积要比JPEG小30%上下
相关文章
|
6天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
22 5
|
8天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
34 7
|
7天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
21 2
|
14天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
27 3
|
13天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
13 1
|
13天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
14天前
|
监控 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
23 2
|
3月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
1天前
|
存储 缓存 Java
大厂面试必看!Java基本数据类型和包装类的那些坑
本文介绍了Java中的基本数据类型和包装类,包括整数类型、浮点数类型、字符类型和布尔类型。详细讲解了每种类型的特性和应用场景,并探讨了包装类的引入原因、装箱与拆箱机制以及缓存机制。最后总结了面试中常见的相关考点,帮助读者更好地理解和应对面试中的问题。
15 4
|
1月前
|
算法 Java 数据中心
探讨面试常见问题雪花算法、时钟回拨问题,java中优雅的实现方式
【10月更文挑战第2天】在大数据量系统中,分布式ID生成是一个关键问题。为了保证在分布式环境下生成的ID唯一、有序且高效,业界提出了多种解决方案,其中雪花算法(Snowflake Algorithm)是一种广泛应用的分布式ID生成算法。本文将详细介绍雪花算法的原理、实现及其处理时钟回拨问题的方法,并提供Java代码示例。
59 2