GIF动画在浏览器中播放卡的问题

GIF动画原理简单说明

GIF图片可以内含多张图片,称之为帧,然后以一定的间隔播放,看起来就动画了。当间隔越小,看起来动画越流畅。

关于GIF动画常见疑问:

  • 为什么在Photoshop里面做GIF的时候播放流畅,导出GIF到浏览器看就慢了?甚至很卡?
  • 为什么我电脑看起来是正常的,别的人还是说GIF慢/卡了?

答案很简单

不同的浏览器GIF的最低的帧间隔时间支持的不同;并且一旦低于这个最低数值,将会被转换为某个特定的时间间隔。

测试页面:

点击查看:GIF不同帧间隔的表现

页面测试说明:从上到下的11个进度条一样的东西依次为间隔0、1毫秒、2毫秒、3毫秒……的GIF图片,共11张GIF图片。

比如最后那个进度条,就是一张理论上每帧间隔为10毫秒的GIF动画图片,换成FPS来说,就等于1秒/10毫秒=100FPS/s啦。

建议使用不同的浏览器查看,就能知道是什么意思。

比如我的是Windows7,Chrome35正式版,看到的效果是前面两个进度条速度异常:比第三个还慢,大约等于7毫秒的那个进度条。意思就是,我当前的系统下,当GIF帧间隔小于2毫秒,为0或者1的时候,浏览器会将其转换为7毫秒左右,所以设置帧间隔为1的反而比帧间隔为2的看起来FPS更低了。

下面是不同系统和浏览器的区别(2007年时候的数据)。

- 阅读剩余部分 -

使用Canvas生成照片直方图

最近刚接触HTML5的Canvas,然后想做点小东西。

什么是照片直方图

直方图是用来直观地表示图片的RGB三种颜色通道在不同亮度值上面,所占的量的多少。

大家都知道,电脑上的数码照片的每个像素由红绿蓝三种颜色合成,所以一个像素具有R-红色,G-绿色,B-蓝色三种颜色的信息;每种颜色取值是0-255————当为0的时候,表示当前像素没有这种颜色,当为最大值255的时候,表示这种颜色含量已经最高。

比如,纯红色的RGB就是(255,0,0),即红色最多,不含绿色和蓝色。黄色由红色和绿色合成,所以纯黄色RGB就是(255,255,0)。

Photoshop的直方图

然后,直方图的横坐标从左到右依次是0到255,纵坐标没有上限,当x为定值的时候,不同颜色的y值表示的是:亮度(姑且这么称呼)为x的这种颜色的量有y这么多。

直方图在摄影中经常用到,通过查看照片的直方图,可以知道曝光是否准确。如果需要的是正常的曝光,那么就应该使照片的各种颜色集中在x的中间值,大约100-150区间内,直方图呈现中间凸起的形状。

更多的信息,大家可以搜索查看照片直方图

说了这么多,终于进入正题了。

DEMO演示

点击查看:Canvas生成照片直方图

思路说明:

先载入一张图,然后获取图片的每个像素的值,然后对每个像素的RGB值分别统计,然后得到一个数组包含了3种颜色的量。这里设的是一个叫做tj的二维数组,红色是tj[0],绿色是tj[1],蓝色是tj[2];用tj0的值来表示亮度为210的红色像素的数量。

得到tj数组之后转换为直方图:例如tj1=3872转换为在x为145,y为3872的像素的地方用绿色画一个点,当然,y太大的话,直方图太高,所以下面会将y除以10来“压扁”直方图。

代码部分的说明直接写到注释中了。

- 阅读剩余部分 -

JS中“较高级”的正则表达式知识点

Javascript的正则表达式虽然很早以前就接触过了,那时候还在做编辑的时候,用AS写了一个文本替换的小程序。

最近逛书店,发现有本21天学通XXX的系列书,一向对这种名字的书没有好感,不过还是很好奇地拿了起来,随便翻了一下,正好看到一些以前没有注意到的地方,回来继续查看犀牛书等书补充了一下。

(XXX)

capturing groups(捕获性分组,犀牛书上叫组合)。

这个最常见的,就是用括号把一部分表达式包起来,方便在后面用+或者*或者{n,m}等来表示数量等,又或者有时候要用到|的情况。


(?:XXX)

non capture group (非捕获性分组,犀牛书上叫只组合)

和捕获性分组的区别就是,这里的括号内的内容不被计算入分组,也就是说是不存入$1,$2这些里面的。


x(?=y)

lookahead (零宽度正预测先行断言、先行断言)

- 阅读剩余部分 -

淘宝20元/50元/100元购买的香港空间对比

起因

因为买了域名,所以就想要把它使用起来,然后不想B案,所以只好使用国外空间,试用了一下,发现延迟好严重。然后就转向使用香港空间。

经过

最开始贪便宜,就上淘宝买了20元一年的那个,使用了一些时间,发现有些慢,表现为如果一天中有那么一个小时没有打开网站,打开就会有3-5秒的延迟,然后再打开就快了。

以为是Wordpress的问题,于是想换成Typecho试一下,结果安装不上最新版的Typecho,很郁闷,于是上淘宝问客服,客服怎么会知道啊,只说我们是支持的,出错是因为你不会!!!

懒得去问客服了,毕竟才20元的东西。

然后就继续看,找了另外一家,选了50元/年的,然后发现速度确实不错!

最终

缘于对速度的追求,继续换了一家,选的是100元/年的,这次才知道什么是差距。

很多的东西都是比较之后才知道好坏的,之前对于网站打开速度怎么算合格没有感觉,这下,有了三个空间了,很好对比了。

20元50元100元的空间对比

下面的图将是不同时间段的对比,每张图上面的4个表分别是:

20元 | 50元
100元| 国外免费空间

使用的是DNSPod的D监视来查看相应速度。曲线表示相应时间,图中的数字是当前一段时间的4条线路访问的评价响应时间。

8点14分:

8点14分



- 阅读剩余部分 -

Typecho模板添加上一篇、下一篇链接

typecho的默认模板是非常简洁的,本博客就是使用的默认的主题模板。

不过文章的末尾处没有上一篇和下一篇着实不方便,因为有时候文章太长,得分成好几篇来写,这时候就要查看相邻的文章。

其实方法非常简单,就是编辑对应的模板文件。

因为我们需要加入的位置是在每一篇文章的末尾,所以打开文章部分对应的模板文件修改。

具体路径就是 /usr/themes/default/post.php

- 阅读剩余部分 -