存档在 2017年4月

CSS Sprites与base64图片编码的比较

2017年4月17日

CSS中,background可以设置对象的背景样式。如颜色或者使用一张图片代替,今天我要多说两句的就是使用一张图片的参数:image。准确的来说应该是background-image。我们可以这样用它:

body{
background-image: url(....jpg);
}

也可以直接使用background 代替:

body{
background: url("....jpg");
}

css显示图片分3种:
1. 单纯的显示一个图片;
2. CSS Sprites,也就是说把若干小图片合成一个大图片,然后通过background的postion参数实现效果,
3. Inline images。这个方法不适用于IE浏览器。

CSS Sprites是一种把所有的图片都以base64编码以源代码的形式写在CSS文件里,格式是这样的:data:[][;base64],

data:URL标签是在1995年第一次提出,按RFC2397规范( http://tools.ietf.org/html/rfc2397 )的描述:

allows inclusion of small data items as ‘immediate’ data.

(允许在页面中包含一些小的即时数据)

如一个内嵌的的图片可以这样引用:

{  background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);  }

这段代码可以在firefox浏览器运行。这行代码的意思是,gif格式的以base64编码成最后的字符串的图片应用为背景。样式应用的结果是一种斜条纹状的背景。

参考:http://tjrus.com/blog/base64-vs-css-sprites-battle-for-performance
参考:http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice

CSS Sprites与base64图片编码的比较

在前端页面性能优化的时候,不可避免地会遇到这个问题。我们又该如何选择呢?

情景:有数量相当的小size图片

方案1:使用CSS Sprites合并为一张大图
方案2:使用base64直接把图片编码成字符串写入CSS文件

针对方案1:

1.兼容性比较好
2.图片比较复杂时构造体积较小
3.多处重用时无需重复图形内容
4.没有base64编码成本,降低图片更新的维护难度。(但注意Sprites同时修改css和图片某些时候可能造成负担)

针对方案2:

1.无额外请求
2.对于极小或者极简单图片来说数据很少
3.可以被gzip。(通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强)
4.降低css维护难度
5.可像单独图片一样使用,比如背景图片重复使用等
6.没有跨域问题,无需考虑缓存、文件头或者cookies问题。

方案1+方案2能否实现呢?思考了下,不可以。

怎样查看系统内存占用情况

2017年4月13日

怎样查看Linux系统VPS主机内存使用情况呢?

命令1

free -m

输出:

              total        used        free      shared  buff/cache   available
Mem:           1839         603         993           9         242        1074
Swap:          2047         283        1764
[root@vultr ~]#

解释:

total 1839 :此VPS一共有内存1839M
buff/cache 242 1074 :当前VPS实际的占用内存和可用内存,而不是used 603

这是由Linux Kernel的内存管理方式决定的,buffers,cached可以看作是被程序或者内核用过的内存,这些内存曾经被使用过,但现在已经被释放了,释放之后Linux Kernel把他们当作buffers或cached ,这样下次有程序申请内存的时候,内核可以快速响应。所以buffers和cached部分的内存应该看成是可用内存。如果这一行最后的数字接近0,那么说明VPS的内存快用完了,这时候VPS反应就比较慢。

参考:http://www.cnblogs.com/gaojun/p/3406096.html
参考:http://www.itxx.com.cn/Hosting/vps/Hosting_1968.html

怎样编译安装ImageMagick

2017年4月13日

编译安装ImageMagick

官网:https://sourceforge.net/projects/imagemagick/
下载:https://sourceforge.net/projects/imagemagick/files/

最新版本:ImageMagick-7.0.5-4

wget https://sourceforge.net/projects/imagemagick/files/im7-src/ImageMagick-7.0.5-4.tar.gz && tar zxvf ImageMagick-7.0.5-4.tar.gz && cd ImageMagick-7.0.5-4
./configure && make && make install
ln -s /usr/local/include/ImageMagick-7 /usr/local/include/ImageMagick

编译安装imagick

官网:http://php.net/imagick
下载:https://pecl.php.net/package/imagick

最新版本:imagick-3.4.3

wget https://pecl.php.net/get/imagick-3.4.3.tgz && tar zxvf imagick-3.4.3.tgz && cd imagick-3.4.3
/usr/local/php/bin/phpize && ./configure --with-php-config=/usr/local/php/bin/php-config && make && make install