基于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极简入门教程(一):模块机制
Oct 25 NodeJs
Nodejs学习笔记之Global Objects全局对象
Jan 13 NodeJs
nodejs实例解析(输出hello world)
Jan 03 NodeJs
解析NodeJS异步I/O的实现
Apr 13 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
nodejs利用ajax实现网页无刷新上传图片实例代码
Jun 06 NodeJs
nodejs用gulp管理前端文件方法
Jun 24 NodeJs
NodeJS 实现多语言的示例代码
Sep 11 NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 NodeJs
NodeJs入门教程之定时器和队列
Mar 08 NodeJs
nodejs中实现用户注册路由功能
May 20 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
php获取网页内容方法总结
2008/12/04 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php实现文件下载实例分享
2014/06/02 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php 基础函数
2017/02/10 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
js树形控件脚本代码
2008/07/24 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Android面试题附答案
2014/12/08 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
教学质量评估实施方案
2014/03/17 职场文书
委托公证书范本
2014/04/03 职场文书
预备党员转正考核材料
2014/06/03 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
小学重阳节活动总结
2015/03/24 职场文书
警告通知
2015/04/25 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
导游词之河北邯郸
2019/09/12 职场文书