前端性能优化方案大体分为网络传输优化和页面内容优化， 网络方面 1、减少http请求 合并js文件 合并css文件 雪碧图的使用(css sprite) 使用base64表示简单的图片 2、减小资源体积 gzip压缩 js混淆 css压缩 图片压缩 3、使用缓存 DNS缓存 CDN部署与缓存 htt ...
分类：
其他好文 时间：
2019-05-14 15:00:48
阅读次数：
148
雪碧图是根据CSS sprite音译过来的，是将很多很多的小图标放在一张图片上。 使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。 把很多 ...
分类：
其他好文 时间：
2019-03-17 00:53:22
阅读次数：
207
一.需求：提高首评加载速度，除了要将所有使用的图片,资源文件压缩，添加懒加载，还需要合并页面中使用到的所有图标到一张大图里，减少请求次数 二.实现：所有图标放到一张大图上，使用background定位获取到要显示的图标并控制元素的宽高即可 三.代码： .logo{ background:url('. ...
分类：
Web程序 时间：
2018-12-13 14:28:20
阅读次数：
230
CSS雪碧 即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。 使用雪碧图的优点有以下几点： 将多张图片合并到一张图片中，可以减小图片的总大小 将多张图片合并到一张图片后，只需一次网 ...
分类：
Web程序 时间：
2018-11-29 20:18:45
阅读次数：
4285
最近公司项目需要增加一个需求，需要给组件设置动画类型，而每种动画类型都需要一个对应的动画图标，这里就使用了雪碧图。 一、什么是雪碧图 百度百科：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显 ...
分类：
其他好文 时间：
2018-11-03 19:22:22
阅读次数：
204
link，hover，active三种按键状态，存放三张图片 缺点： 资源只有在被使用时，才会被加载。 页面第一次加载时，会出现短暂的延迟闪烁，造成一次不佳的用户体验。 图片整合技术 CSS-Sprite 雪碧图： 将三张图片整合为一张图片，在不同的伪类中通过设置 background-positi ...
分类：
其他好文 时间：
2018-09-09 14:59:31
阅读次数：
124
上节课回顾： HTML标签： 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签，无任何特殊意义 HTML标签 ：文本 <em> 强调 倾斜 双<ruby></ruby> 加拼音 <rt></rt> <strong> 加粗 强调 双<mar ...
分类：
Web程序 时间：
2018-07-28 16:01:49
阅读次数：
540
一、精灵图使用场景： 二、Css Sprite（优点） 减少图片的字节。 减少网页的http请求，从而大大的提高页面的性能。 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 更换风格方便，只需要在一张或少张图片上修改图 ...
分类：
Web程序 时间：
2018-07-21 00:51:51
阅读次数：
442
原理 如图所示，无黑影处为浏览器中会显示的部分，通过改变backgroundPosition来使显示的地方不同，从而达到更换背景的目的 更多 浅谈CSS Sprite和实例解析 CSS Sprites:实用技术还是生厌之物？ ...
分类：
Web程序 时间：
2018-07-17 20:42:36
阅读次数：
277
原文 简书原文：https://www.jianshu.com/p/8ae3be23a642 大纲 1、什么是CSS Sprite 2、CSS Sprite的优点 3、CSS Sprite的缺点 4、CSS Sprite的使用 1、什么是CSS Sprite 1.1、CSS Sprites在国内很多 ...
分类：
Web程序 时间：
2018-07-08 13:32:02
阅读次数：
181
