基于nodejs的雪碧图制作工具的示例代码

前颜（yan）

雪碧图（CSS sprite ），就是把很多小图标合并为一张图片。

在Web开发中，使用雪碧图是优化Web性能的一种方法。

比如你可能遇到过这样的一种场景：在你的页面中，使用到了很多的小图标，然后你的每个小图标都是通过 <img src='logo.png'>来引用的。

通过这种方式虽然比较方便，但是存在的一个缺点就是性能问题，即浏览器在解析每个小图标时，都要发起一次http或（https）请求，而这个小图标本身却很小，可能只有十几k甚至几k，那么为每个小图标单独发起http请求，其实有点资源浪费。

为什么会资源浪费呢？

浏览器在与服务器进行http请求的过程中，需要有一个类似握手通信的过程，然后才是真正的获取数据。

举个例子，在这里我把浏览器发起的http图片请求简单分为两个过程，分别为：

1、浏览器与服务器的通信握手过程，假设耗时X ms（毫秒）

2、真正的数据获取过程，假设耗时 Y ms（毫秒）

那么浏览器发起一次http请求的总耗时为：sum(1)=X+Y ms，由于小图标数据很小，可能只有几k，因此通信过程的耗时X是大于Y的。

而当你在网页中引用了很多小图标时，假设有n个小图标，此时总耗时为sum(n)=nX+nY ms，通过对比sum(1)和sum(n)，你就会发现，上面所说的资源浪费主要是在于通信握手的时间Y。此时，我就会想，如果我一次性取得所有的小图标，那么总耗时就变成了sum(n)=nX+Y ms，这样就能节省(n-1)Y的http握手通信的时间开销，从而优化了web的响应性能。

一、雪碧图抠图（background-position）

通过前面的介绍，我们知道，雪碧图的原理就是将页面中使用到的小图标合成为一张总图。这样的话当我们想要使用雪碧图中的某一个小图标，应该通过如何实现呢？

答案是通过css的background-position，background-position的默认坐标是（0，0），关于background-position的详细使用，大家可以网上搜索一下，资料很多。（这次主要讲雪碧图制作工具）

二、雪碧图制作工具 simple-sprite

那么如何合成雪碧图呢？怎样才能更方便的合成雪碧图呢？

因为懒，我的想法是，每次当我需要合成雪碧图时，我只要经过以下尽量简单的步骤就可以快速合成，并且可以导出各个小图标在雪碧图中的background-position css样式。为此，我用nodejs写了一个雪碧图制作工具：simple-sprite，并打包生成npm包发布至npm官网。

雪碧图制作步骤如下：

1 创建雪碧图生成工程

mkdir sprite-generator
cd sprite-generator

2 初始化工程

npm init

3 把所有小图标放到imgs中

mkdir imgs && 把所有的小图标放到imgs中

4 下载simple-spritenpm包

npm install --save simple-sprite

5 运行生成雪碧图

let sprite = require('simple-sprite');

sprite.generateSprite('./imgs');

simple-sprite：https://www.npmjs.com/package/simple-sprite

三、github源码

构建工具：rollup

github源码：https://github.com/SimpleCodeCX/simple-sprite#readme

（如果你点开了我的github源码连接，顺便也帮我点个star哦！哈哈）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Webpack中雪碧图插件使用详解

    背景 在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况不符合被广泛遵循的雅虎军规"尽量减少HTTP请求数"的要求(雅虎前端优化的35条军规). 为了避免这种情况,我们需要使用到雪碧图将这些图标整合到一张图片上,再使用CSS背景及其定位,将需要显示的图标移动到元素背景中. 传统方式,我们需要将图标拼接到一张图片上,计算好位置信息,这种方式维护起

  • 基于nodejs的雪碧图制作工具的示例代码

    前颜(yan) 雪碧图(CSS sprite ),就是把很多小图标合并为一张图片. 在Web开发中,使用雪碧图是优化Web性能的一种方法. 比如你可能遇到过这样的一种场景:在你的页面中,使用到了很多的小图标,然后你的每个小图标都是通过 <img src='logo.png'>来引用的. 通过这种方式虽然比较方便,但是存在的一个缺点就是性能问题,即浏览器在解析每个小图标时,都要发起一次http或(https)请求,而这个小图标本身却很小,可能只有十几k甚至几k,那么为每个小图标单独发起http请

  • 基于Python编写微信清理工具的示例代码

    基于Python编写微信清理工具的示例代码

    目录 主要功能 运行环境 核心代码 完整代码 前几天网上找了一款 PC 端微信自动清理工具,用了一下,电脑释放了 30GB 的存储空间,而且不会删除文字的聊天记录,很好用,感觉很多人都用得到,就在此分享一下,而且是用 Python 写的,喜欢 Python 的小伙伴可以探究一下. 主要功能 它可以自动删除 PC 端微信自动下载的大量文件.视频.图片等数据内容,释放几十 G 的空间占用,而且不会删除文字的聊天记录,可以放心使用. 工作以后,微信的群聊实在太多了,动不动就被拉入一个群中,然后群聊里大

  • 基于Python实现千图成像工具的示例代码

    基于Python实现千图成像工具的示例代码

    目录 前置 GUI制作 GUI界面设计 逻辑设计 图片处理 修改底图大小 修改组图大小 计算图片填充次数 组图合成 图片合成 GUI打包 千图成像也就是用N张图片组成一张图片的效果.制作方法有很多的,最常见的如用ps.懒人图云.foto-mosaik-edda这些制作. 千图成像的效果我大致分为两类:一为直接用N张图片根据底图的像素颜色.大小,一张张的组成底图,如foto-mosaik-edda:二为用N张图片根据底图的像素大小,组成一张与底图大小相仿的图片,再把二者合成,经调整透明度而成的图片

  • 利用Go语言实现流量回放工具的示例代码

    利用Go语言实现流量回放工具的示例代码

    目录 前言 goreplay介绍与安装 使用示例 流量放大.缩小 流量写入到ElastichSearch goreplay基本实现原理 总结 前言 哈喽,大家好,我是asong. 今天给大家推荐一款使用Go语言编写的流量回放工具 -- goreplay:工作中你一定遇到过需要在服务器上抓包的场景,有了这个工具就可以助你一臂之力,goreplay的功能十分强大,支持流量的放大.缩小,并且集成了ElasticSearch,将流量存入ES进行实时分析: 废话不多,我们接下来来看一看这个工具: gore

  • nodejs中使用HTTP分块响应和定时器示例代码

    在本例中,将要创建一个输出纯文本的HTTP服务器,输出的纯文本每隔一秒会新增100个用换行符分隔的时间戳. require('http').createServer(function(req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); var left = 10; var interval = setInterval(function() { for(var i = 0; i< 100; i++) { res.write

  • 基于原生JS封装的Modal对话框插件的示例代码

    基于原生JS封装Modal对话框插件,具体内容如下所示: 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ModalPlugin({ //提示的标题信息 title:'系统提示', //内容模板 字符串 /模板字符串/DOM元素对象 template:null, //自定义按钮信息 buttons:[{ //按钮文字 text:'确定', click(){ //this:当前实例 }

  • Python基于Socket实现简易多人聊天室的示例代码

    Python基于Socket实现简易多人聊天室的示例代码

    前言 套接字(Sockets)是双向通信信道的端点. 套接字可以在一个进程内,在同一机器上的进程之间,或者在不同主机的进程之间进行通信,主机可以是任何一台有连接互联网的机器. 套接字可以通过多种不同的通道类型实现:Unix域套接字,TCP,UDP等. 套接字库提供了处理公共传输的特定类,以及一个用于处理其余部分的通用接口. socket模块: 要创建套接字,必须使用套接字模块中的socket.socket()函数,该函数具有一般语法 s = socket.socket (socket_famil

  • 基于Mybatis Plus实现多表分页查询的示例代码

    注意:Mybatis Plus 3.0.7 版本才开始用[自定义sql]+[QueryWrapper],低版本不能使用,还是老实写SQL进行条件拼接 1.源码分析 在Wrapper<T>接口中就有如下方法 /** * 获取自定义SQL 简化自定义XML复杂情况 * 使用方法:自定义sql + ${ew.customSqlSegment} * 1.逻辑删除需要自己拼接条件 (之前自定义也同样) * 2.不支持wrapper中附带实体的情况 (wrapper自带实体会更麻烦) * 3.用法 ${e

  • SpringBoot+Tess4j实现牛逼的OCR识别工具的示例代码

    SpringBoot+Tess4j实现牛逼的OCR识别工具的示例代码

    前言 " 等不到风中你的脸颊 眼泪都美到很融洽 等不到掩饰的雨落下 我的眼泪被你察觉 " 听着循环的歌曲,写着久违的bug.好吧,还是一天.正好一个小伙伴说,要不要做个工具站玩一下.我就随意的找了个工具站,看了下,发现很多都有文字的OCR识别功能.因此,我想起来之前了解的非常流行的开源的OCR大神级别的项目,Tesseract OCR. 简单介绍 官网如下所示 tesseract-ocr.github.io/ 简洁明了,挂在github上的网站. 详细的不再介绍,感兴趣的,可以进入同志

  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    abstract 路由模式 abstract 是vue路由中的第三种模式,本身是用来在不支持浏览器API的环境中,充当fallback,而不论是hash还是history模式都会对浏览器上的url产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由path,这就利用到了abstract这种与浏览器分离的路由模式. 路由示例 export const routes = [ { path: "/", redirect: "

随机推荐