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


Posted in NodeJs onNovember 05, 2018

前颜(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-sprite npm包

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哦!哈哈)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs 整合kindEditor实现图片上传
Feb 03 NodeJs
NodeJS和BootStrap分页效果的实现代码
Nov 07 NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 NodeJs
用nodejs搭建websocket服务器
Jan 23 NodeJs
解决nodejs中使用http请求返回值为html时乱码的问题
Feb 18 NodeJs
深入浅析Nodejs的Http模块
Jun 20 NodeJs
理解nodejs的stream和pipe机制的原理和实现
Aug 12 NodeJs
手把手教你如何使用nodejs编写cli命令行
Nov 05 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
nodejs微信开发之自动回复的实现
Mar 17 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 NodeJs
nodejs处理tcp连接的核心流程
Feb 26 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 #NodeJs
nodejs中函数的调用实例详解
Oct 31 #NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
Oct 17 #NodeJs
Nodejs实现多文件夹文件同步
Oct 17 #NodeJs
深入理解NodeJS 多进程和集群
Oct 17 #NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 #NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 #NodeJs
You might like
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
验证码按回车不变解决方法
2013/03/29 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
原生js开发的日历插件
2017/02/04 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
python局部赋值的规则
2013/03/07 Python
Python复制文件操作实例详解
2015/11/10 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
c语言常见笔试题总结
2016/09/05 面试题
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
教师实习的自我鉴定
2013/10/26 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
护士思想汇报
2014/01/12 职场文书
外联部演讲稿
2014/05/24 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
运动会100米广播稿
2015/08/19 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL