给产品经理讲技术2016-12前端小技巧css雪碧图_第1页
给产品经理讲技术2016-12前端小技巧css雪碧图_第2页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、前端技巧：CSS雪碧图2016-12-05 果果 给产品经理讲技术周、寒冷、堵、噪声，你悲伤也没，还好我准时的来跟你叨 叨了。有的地就有江湖，有问题的地就有解决问题，所以有问题的地就有江湖，端的江湖，以前直有这样类问题，且听分解。当在浏览器输个URL地址的时候，你会感觉数“唰唰唰”的闪出来了。在这个过程中，浏览器会把这个站的主资源（就是 Html件）拉取回来，然后开始分析中的Js，Img之类的，然后再去拉取这些图和资源，这些后拉取的资源称为资源。主资源和资源只是类对资源定义的不同式，其实对于浏览器来说，他们的请求式都是发起个Http请求，经历三次握，并把件拉取回来，般的浏览器内核只能同时并发4

2、，5个络请求，所以量的图特别影响性 能，不但加载完成时间慢，还可能影响些重要的 JS逻辑，使得响应也变慢，卡死等等。对于浏览器来说，发起个Http请求，来回百毫秒的耗时，已经是相当的资源耗费，只是类不曾感受到，其实浏览器已经数次喊叫： “太 NMD慢了，哪个SB写的代码 ”。例如上图，个的块区域，就三标，浏览器要苦苦三次才能把这些图标取回来，如果是50张呢，显然不可接受。对这样的情况就只能束就擒吗？显然优化的关键途径就是减少络请求次数，并且还得把图都下发下来，并能够灵活使，那就把所有图标拼成吧，如下图。当前，次络请求就可以下来三了，且件的也较三些（因为很多件的格式信息和头信息已经共了），降低了

3、络请求和带宽的消耗。然后呢，如何在Html或CSS中引这些图呢？这就不得不提到个CSS属性叫做background-ition，利Ta，可以指定图的位置，也就能把这码。作为个背景放在某个位置了，来看两句CSS代利这个属性，来标识图相对于容器的位置（图中的坐标分别标识X，Y两个向的偏移，这些都是示意的值哦，不是真实的值），最后再把这个类选择器应到相应的容器就好了。这种技术就称为CSS Sprite，中翻译为雪碧图，Ta主要解决的是图过多以及耗费络资源，核原理就是将图合并成下发到客户程序，并利属性来对其进定位和切割的技术。其实在当中，很多也是利了类似的，如个路的时候，共由8组成，那么般这8会合并为，每帧都循环这中的不同坐标下的图来构建的动作。其实在追求性能的app中，很多也是利了类似的，如对性能极致要求的话，个Titar上有5个icon，那5个icon是可以合并为的，这样只会有次

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论