基于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的url截取模块url-extract的使用实例
Nov 18 NodeJs
轻松创建nodejs服务器(8):非阻塞是如何实现的
Dec 18 NodeJs
Nodejs学习笔记之Stream模块
Jan 13 NodeJs
nodejs事件的监听与触发的理解分析
Feb 12 NodeJs
深入学习nodejs中的async模块的使用方法
Jul 12 NodeJs
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
Sep 06 NodeJs
详解IWinter 一个路由转控制器的 Nodejs 库
Nov 15 NodeJs
NodeJs form-data格式传输文件的方法
Dec 13 NodeJs
nodejs基础之多进程实例详解
Dec 27 NodeJs
NodeJS实现一个聊天室功能
Nov 25 NodeJs
nodeJs的安装与npm全局环境变量的配置详解
Jan 06 NodeJs
Nodejs 微信小程序消息推送的实现
Jan 20 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结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
js实现双色球效果
2020/08/02 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
numpy数组广播的机制
2019/07/12 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
考试作弊检讨书
2014/10/21 职场文书
民用住房租房协议书
2014/10/29 职场文书
全陪导游词
2015/02/04 职场文书
付款证明格式范文
2015/06/19 职场文书
Python集合的基础操作
2021/11/01 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers