基于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写的一个简单项目打包工具
May 11 NodeJs
跟我学Nodejs(三)--- Node.js模块
May 25 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
Nodejs初级阶段之express
Nov 23 NodeJs
Nodejs中的this详解
Mar 26 NodeJs
NodeJS远程代码执行
Aug 28 NodeJs
async/await与promise(nodejs中的异步操作问题)
Mar 03 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
NodeJS自定义模块写法(详解)
Jun 27 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
Mar 02 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
Apr 29 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python中return语句用法实例分析
2015/08/04 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
python把转列表为集合的方法
2019/06/28 Python
Python input函数使用实例解析
2019/11/22 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
企业领导对照检查材料
2014/08/20 职场文书
中班教师个人总结
2015/02/05 职场文书
国博复兴之路观后感
2015/06/02 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL