网页性能优化01-精灵图利弊与应用场景

`精灵图：通过减少页面网络请求的数量，来提高网页加载速度`

1.1-精灵图介绍

1.什么是精灵图
- 精灵图就是就是将几张较小的图片放在一张大图上，这张大图称之为精灵图，又叫雪碧图（CSS Sprites）
2.为什么要有精灵图？
- 因为浏览器在渲染DOM树的时候，会把所有的外部资源路径(例如img标签的src属性作为网络请求，向服务器发送资源)
  - 例如淘宝网页，一个首页会有300多以上的请求，每一个请求都需要占用网络资源，无形中会降低网页加载速度
3.精灵图的作用
- 将多个小图片放入一个大图中，可以减少页面网络请求的数量。从而提升网页的加载速度。
  - 前端如何使用精灵图：只需要使用背景图来加载精灵图即可，通过设置背景图的位置可以加载不同的精灵图。

1.2-精灵图利弊与适用场景

既然只需要将多个小图片放入大图中，那为什么很多网页不把每一个图片都做成精灵图呢？

1.精灵图的利弊

1.好处：减少页面网络请求数量
2.弊端：维护不便。一但大图中某一个小图片要修改，那么整张大图浏览器需要重新加载(反而会影响性能）

2.精灵图的适用场景

1.适合场景：图片固定，几乎很少更换。
- 例如淘宝页面右侧的话费，手机小图标等
- 例如携程移动web端的导航小图标
2.不适合场景：需要经常更换的图片
- 例如电商类的一些商品图片，基本上不适合使用精灵图
- 例如京东移动web的小图标，也不适合使用精灵图

网页性能优化01-精灵图利弊与应用场景相关推荐

网页性能优化03-函数防抖
1.1-函数防抖 1.函数防抖介绍 1.什么是函数防抖? (debounce) 网上主流解释:函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行 ...
吐血整理的 Android 性能优化思维导图，让面试官眼前一亮
引言现如今 Android 开发行业的主要问题是因为初级的 Android 开发者太多了,导致初级开发的市场过于饱和,所以也就进一步导致初级和中级的开发者面临更大的竞争,因此想要脱离这种竞争现状,只 ...
换一个角度分析，网页性能优化
Vue3 商城项目开源地址:https://github.com/newbee-ltd/newbee-mall-vue3-app Vue3 高仿微信记账本项目开源地址:https://github.c ...
网页性能优化与搜索引擎优化seo
一.为什么要提升web性能? Web性能黄金准则:只有10% ~ 20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影 ...
网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
网站性能优化思维导图
前言下面是看了大神的笔记做的思维导图,纯为整理参考网站 juejin.im/post/5b6fa8- www.cnblogs.com/xianyulaodi- 性能优化雅虎35条军规
网页性能优化{雅虎[转载]}
雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通 ...
网页性能优化02-懒加载工作原理
懒加载工作原理 1.1-懒加载介绍(以图片懒加载为例) 1.为什么要有懒加载技术 (1)img标签特点:不管图片隐藏还是显示有src属性都会去加载例如电商类网站,一个页面有几百张图片.有时候假设用 ...
网页性能优化（初窥）
面试的时候经常会被问到的有关于前端性能优化这一块的问题,扯扯个人的理解第一条:减少 HTTP 次数的请求 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素, 如图像. 样式表 ...

网页性能优化01-精灵图利弊与应用场景

网页性能优化01-精灵图利弊与应用场景

`精灵图：通过减少页面网络请求的数量，来提高网页加载速度`

1.1-精灵图介绍

1.2-精灵图利弊与适用场景

1.精灵图的利弊

2.精灵图的适用场景

网页性能优化01-精灵图利弊与应用场景相关推荐

最新文章

热门文章