基于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 17 NodeJs
Nodejs+express+html5 实现拖拽上传
Aug 08 NodeJs
nodejs npm package.json中文文档
Sep 04 NodeJs
NodeJS实现客户端js加密
Jan 09 NodeJs
Nodejs 发送Post请求功能(发短信验证码例子)
Feb 09 NodeJs
nodejs中使用HTTP分块响应和定时器示例代码
Mar 19 NodeJs
详解nodejs操作mongodb数据库封装DB类
Apr 10 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
nodejs express配置自签名https服务器的方法
May 22 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 NodeJs
NVM安装nodejs的方法实用步骤
Jan 16 NodeJs
nodejs实现聊天机器人功能
Sep 19 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 mysql数据库操作分页类
2008/06/04 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python字典多条件排序方法实例
2014/06/30 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python 重定向获取真实url的方法
2018/05/11 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python 美化输出信息的实例
2018/10/15 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python获取引用对象的个数方式
2019/12/20 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
网上签名寄语活动留言
2014/01/18 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
高中运动会广播稿
2014/09/16 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
外国人来华邀请函
2015/01/31 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL