基于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 Express框架中处理404页面一个方式
May 28 NodeJs
nodejs中转换URL字符串与查询字符串详解
Nov 26 NodeJs
轻松创建nodejs服务器(6):作出响应
Dec 18 NodeJs
NodeJS制作爬虫全过程
Dec 22 NodeJs
nodejs开发微博实例
Mar 25 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
nodejs入门教程五:连接数据库的方法分析
Apr 24 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
Jun 19 NodeJs
nodejs对express中next函数的一些理解
Sep 08 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
NodeJS模块与ES6模块系统语法及注意点详解
Jan 04 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实现网页缓存的工具类分享
2015/07/14 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
Laravel 队列使用的实现
2019/01/08 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
python实现人民币大写转换
2018/06/20 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
python3 实现调用串口功能
2019/12/26 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
python属于解释语言吗
2020/06/11 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
工商管理应届生求职信
2013/10/07 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
政审证明范文
2015/06/19 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS