基于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,QueryString,Path)模块
Jan 13 NodeJs
Nodejs实现短信验证码功能
Feb 09 NodeJs
nodejs操作mysql实现增删改查的实例
May 28 NodeJs
使用nodejs+express实现简单的文件上传功能
Dec 27 NodeJs
关于Mac下安装nodejs、npm和cnpm的教程
Apr 11 NodeJs
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
May 15 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
NodeJS服务器实现gzip压缩的示例代码
Oct 12 NodeJs
nodejs中函数的调用实例详解
Oct 31 NodeJs
nodejs微信开发之授权登录+获取用户信息
Mar 17 NodeJs
nodejs实现获取本地文件夹下图片信息功能示例
Jun 22 NodeJs
NodeJS http模块用法示例【创建web服务器/客户端】
Nov 05 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制作新闻系统的思路
2006/10/09 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python中一般处理中文的几种方法
2019/03/06 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
小结Python的反射机制
2020/09/28 Python
python中pyplot基础图标函数整理
2020/11/10 Python
python中四舍五入的正确打开方式
2021/01/18 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
高校学生干部的自我评价分享
2013/11/04 职场文书
股票投资建议书
2014/05/19 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python