###为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites ...
分类：
Web程序 时间：
2021-07-05 17:27:42
阅读次数：
0
transition：要过渡的属性 花费时间 运动曲线 何时开始 如 transition: width 0.5s ease-in 0s(立马开始的意思); 写到所需要的标签上，不写到hover里 如果想要所有属性都变化用all transform：translate（100px或者50%）； 是以 ...
分类：
Web程序 时间：
2021-06-11 19:14:32
阅读次数：
0
一、精灵图 -->网站中的小图标，放在一张大的png中，使用小图时测量容器的大小，测量小图在整个精灵图中的位置，在background中设置负的位置 二、盒子模型 1、构成：内容 + padding + border + margin （margin控制位置，其余三个控制大小） 2、margin : ...
分类：
Web程序 时间：
2021-04-13 12:43:30
阅读次数：
0
CSS Sprite 特性： CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图上去加载 好处： 可以减少图片的质量，网页的图片加载速度块 减少图片的请求次数，加快网页的打开 ...
分类：
Web程序 时间：
2021-02-08 12:16:07
阅读次数：
0
为什么要用精灵图？ 在网页中引入图片，src的属性值是一个网址，会请求数据，需要时间 如何去减轻服务器压力，减少加载图片的时间 图片的懒加载 精灵图 CSS精灵图定义 1. CSS sprites 2. 多个小图标放在一张图片上，然后通过背景方位去展示不同的小图标 使用 background-ima ...
分类：
Web程序 时间：
2020-08-19 19:17:27
阅读次数：
85
1.减少页面中的元素网页中的的图片、form、flash等等元素都会发出HTTP请求，尽可能的减少页面中非必要的元素，可以减少HTTP请求的次数。 2.CSS Sprites（CSS精灵）图片是增加HTTP请求的最大可能者，把全站的图标都放在一个图像文件中，然后用CSS的background-ima ...
分类：
Web程序 时间：
2020-07-30 01:52:27
阅读次数：
140
三个阶段 1. 加载阶段； （1） 减少关键资源的个数（合并文件，CSS精灵，base64、懒加载）； （2） 降低关键资源的大小（减少cookie的传输、开启gzip压缩、webpack打包压缩）； （3） 降低关键资源的RTT（往返延时）次数（DNS预解析、使用HTTP2、HTTP缓存、CDN、 ...
分类：
Web程序 时间：
2020-07-26 01:54:23
阅读次数：
102
content方面 减少HTTP请求：合并文件、CSS精灵、inline Image 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名 减少DOM元素数量 Server方面 使用CDN 配置ETag 对组件使用Gzip压缩 Cookie方面 减小cookie大小 css方面 将样式表放到页面 ...
分类：
Web程序 时间：
2020-07-11 17:44:29
阅读次数：
92
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【如何使用IconFont？——矢量图标】 1.背景介绍 网上的一些小图标除了可以使用css精灵图制作外，还可以使用 ...
分类：
其他好文 时间：
2020-05-30 11:04:21
阅读次数：
64
css sprites是干啥的？ 简单来讲就是把多个icon（小图标），通过ps等工具合并为一张图片，从而达到减少http请求的次数，以提高网页加载速度（性能）的一种方式。 主要的优点就是提高加载速度，还有个小优点就是，减少图片命名，相信命名这件事是大家都有的困扰。 但是缺点也是有的，比如制作的时候 ...
分类：
Web程序 时间：
2020-04-14 20:24:29
阅读次数：
94
