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

最新推荐文章于 2024-09-02 21:20:49 发布
原创 最新推荐文章于 2024-09-02 21:20:49 发布 · 1.7k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #前端框架 #css #vue.js

本文介绍前端项目中的图片优化策略，包括使用CSS替代修饰类图片、根据屏幕尺寸请求适当大小的图片、采用base64格式小图、整合图标为单一图片、选择合适的图片格式如WebP等。

🖥️ 前端经典面试题专栏：前端经典面试题 | 性能优化之图片优化
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

目录

一、回答点

二、深入回答

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

常见的图片格式及场景

一、回答点

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

二、深入回答

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

  • 不使用图片,大多数时候我们用到很多修饰类图片,这类图片可以直接使用css代替
  • 在移动端,不需要去加载原图,使用CDN去进行加载,计算出适配屏幕的宽度,请求相应裁剪好的图片
  • 小图使用base64格式
  • 将多个图标文件整合在一张图中
  • 选择出正确的图片格式:
    • 能够显示WebP格式的浏览器尽量使用WebP格式.它具有更好的图像数据压缩算法,能带来更小的图片体积,缺点:兼容不太好
最低0.47元/天 解锁文章
前端性能优化系列——图片压缩与优化
AI天才研究院
08-05 1484
前端性能优化一直是Web开发人员头疼的问题，作为一个技术人的我，每天都要面临着压缩图片、减少HTTP请求数、节省流量等方面的各种问题。在本文中，我将从图片压缩及其优化技术的原理出发，结合实际案例，详细地阐述如何对图片进行压缩并提升用户体验。图像压缩技术JPEG压缩PNG压缩GIF压缩文件体积大小控制惰性加载策略WebP格式与浏览器兼容性HTTP请求数量控制静态资源域名分片HTTP缓存策略流量节省策略服务端图片压缩CDN加速。
前端经典面试题 | 性能优化之 懒加载
CoderHing的博客~
11-14 3168
前端经典面试题 | 性能优化之 懒加载🖥️ 前端经典面试题专栏：性能优化之 懒加载🧑‍💼 个人简介：一个不甘平庸的平凡人🍬🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️👉 你的一键三连是我更新的最大动力❤️。
web前端面试题附答案029-不同分辨率展现不同大小的图片（这4种方案你能想到几种？）
xingyu_qie的专栏
10-08 1491
通过上图，大概就对前端的Img理解个差不多，一图胜过千言万语。而这道题所要说的就是怎么让不同分辨率下，一个img标签元素可以展示不同大小的图片。
前端常见面试题：一个页面有大量图片，怎么优化：
lucky_girl_girl的博客
02-22 1400
1.图片懒加载，滚动到某个位置再加载图片 2.图片预加载，预先加载图片的前一张和后一张 3.css sprite 精灵图加载
前端面试题 图片懒加载
weixin_46881858的博客
07-05 326
</section>data(){return{},lazy:{//创建观察者对象//判断是否进入可视区域//停止观察//出错的话就是错误图片//给src赋值//观察当前元素.box{
前端面试题精选1-原生JS实现图片懒加载
雲的博客
07-19 1857
github: 更多文章 推荐在线阅读：点我跳转 文章目录1.原生JS实现图片懒加载（考虑不重复加载以及节流）2.如何渲染几万条数据且不卡住页面？3.写函数实现任意标签转换成json形式4.判断执行顺序（事件循环）5.实现一个 sleep 函数6.meta 标签的作用 1.原生JS实现图片懒加载（考虑不重复加载以及节流） 知识点：视口位置判断，懒加载实现（data-set），节流等 1.Elem...
_大前端进阶之道：前端性能优化，前端经典面试题，node面试题，webpack性能优化.zip
04-02
这个压缩包 "_大前端进阶之道：前端性能优化，前端经典面试题，node面试题，webpack性能优化.zip" 包含了帮助开发者在这些方面深入学习的资料。 首先，让我们关注前端性能优化。这是每个前端工程师都需要掌握的技能...
前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别
热门推荐
CoderHing的博客~
12-22 1万+
🖥️ 前端经典面试题 吊打面试官 专栏：Vue2和Vue3的区别🧑‍💼 个人简介：一个不甘平庸的平凡人🍬🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️👉 你的一键三连是我更新的最大动力❤️。
前端75道经典面试题.rar
02-19
"前端75道经典面试题.rar"这个压缩包提供了互联网大厂常问的75道前端面试题，覆盖了基础到进阶的多个层面，是提升你面试能力的理想资料。以下是一些可能包含在这些面试题中的关键知识点： 1. **HTML与CSS**： - ...
前端性能优化——图片压缩和懒加载
qq_43665890的博客
01-29 1019
这里主要介绍第二种方法。（1）将小于某个大小的图片转化成 data URI 形式（Base64 格式），减少请求数量，但是体积变得更大（2）调用第三方依赖，在打包时压缩图片。
web前端面试题-开发及性能优化
AC总有一天的博客
04-10 1303
1、规避javascript多人开发函数重名问题 命名空间封闭空间js模块化mvc（数据层、表现层、控制层）seajs变量转换成对象的属性对象化 2、请说出三种减低页面加载时间的方法 压缩css、js文件合并js、css文件，减少http请求外部js、css文件放在最底下减少dom操作，尽可能用变量替代不必要的dom操作 3、你所了解到的Web攻击技术 （1）XSS（Cross-Site...
前端优化——前端面试
jing2jing2的博客
04-10 1432
前端优化 CSS优化 图片优化 JavaScript代码优化
图片优化——质量与性能的博弈
最恨不过不努力
01-09 4313
图片优化——质量与性能的博弈 《高性能网站建设指南》的作者 Steve Souders 曾在 2013 年的一篇 博客 中提到： 我的大部分性能优化工作都集中在 JavaScript 和 CSS 上，从早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 规则。为了强调这些规则的重要性，我甚至说过，“JS 和 CSS 是页面上最重...
21道关于性能优化的面试题(附答案)(1)，零基础学习前端开发
2301_76223496的博客
04-01 764
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。
5分钟学会图片优化 之 七伤拳
前端你别闹
12-03 729
点击上方“前端你别闹”，关注并“星标”文 | 小北哥哥web性能优化的重要性！之前我发布过阿里的工程师修言写的《web性能优化》的掘金小册推荐，我的读者大概买了有几百份，...
前端性能优化——图片篇
nunumaymax的博客
12-16 2620
在一些官网或者电商项目中，往往存在大量的图片，如 banner 广告图，菜单导航图，商家列表头图等。图片过多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以对图片进行优化势在必行。请参考：前端性能优化——图片篇。
性能优化——图片压缩、加载和格式选择
zz_jesse的博客
06-20 418
本文首发于政采云前端团队博客：性能优化——图片压缩、加载和格式选择https://www.zoo.team/article/images-compress前言相信大家都听说过 "258 原则(https://blog.csdn.net/weixin_42139375/article/details/83001248)" ，一个网站的性能好坏很大程度上会影响到用户的体验。在...
前端实现图片压缩(干货总结)
最新发布
qq_48896417的博客
09-02 5338
前文提要1. 使用HTML5的``元素2. 利用第三方库(推荐)3. gif图片压缩(拓展)注意事项⚠️⚠️文前推荐一下👉读取图片：使用FileReader或Image对象加载图片。绘制到：将图片绘制到上，通过调整的尺寸或绘图参数来控制压缩效果。导出图片：使用方法将内容转换为Base64编码的图片，或使用方法获取Blob对象，以便进一步处理或上传。
前端图片优化方法：
datuzidppd5556的博客
07-27 471
图片优化：1.选择合适的图片尺寸。2.使用精灵图，减少页面请求次数。3.压缩图片。4.使用svg技术替换图片。5.用字体图标库代替图片。6.用css和css3制作简单的图标和动画代替gif。7.图片延迟加载。 ...
前端性能优化：从面试题到实战策略
本文档主要围绕前端性能优化这一主题展开，旨在帮助前端开发者建立对性能优化的全面理解和实践经验。作者强调，性能优化在前端开发中的重要性，因为它直接影响到产品的竞争力。不同于其他技术，性能优化往往需要大量...
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderHing[专注前端]

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值