基于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中的非阻塞方法介绍
Jun 05 NodeJs
NodeJS的url截取模块url-extract的使用实例
Nov 18 NodeJs
我的NodeJs学习小结(一)
Jul 06 NodeJs
使用 NodeJS+Express 开发服务端的简单介绍
Apr 07 NodeJs
NodeJS自定义模块写法(详解)
Jun 27 NodeJs
详解nodeJs文件系统(fs)与流(stream)
Jan 24 NodeJs
nodejs基础之常用工具模块util用法分析
Dec 26 NodeJs
nodejs微信开发之自动回复的实现
Mar 17 NodeJs
NodeJs 模仿SIP话机注册的方法
Jun 21 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
nodejs利用readline提示输入内容实例代码
Jul 15 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 cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python安装twisted的问题解析
2018/08/21 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
浅析Python 责任链设计模式
2020/09/11 Python
酒吧员工的岗位职责
2013/11/26 职场文书
团日活动策划书
2014/02/01 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
给医院的感谢信
2015/01/21 职场文书
禁毒主题班会教案
2015/08/14 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书