Monthly Archives: May 2013

很好的文件名批量替换工具

刚刚发现一个很好的文件名批量替换工具,之前用过一个: http://www.bulkrenameutility.co.uk/Download.php 感觉太繁琐了,很难搞明白里面的意思,不过今天发现的这个: http://www.advancedrenamer.com/download  感觉就很好用了,只一会儿工夫就都搞定了。

我是把一个小游戏所用的素材用Charels全部给保存了,不过文件名有点问题,都带着查询字符串,也不知道Charels里有没有设置可以在保存前就去掉,找了一会没找到,但是用这工具能很快把这些字符串全部去掉,只要写一个简单的与正则表达式就可以了,并且可以在列表中看到替换后的文件名。

r

为了性能,请用Canvas而不是IMG

前些日子做了一个网站,是自适应式的网站(也有人叫响应式),带视差效果,大量的使用图片,并且我们做的网站一般考虑屏幕大小达到1920,以保证大屏浏览者依然能够看到清晰的图片。

于是问题就来了,自适应暂不说,只说这视差效果,要求在滚动页面时,页面里面绝大多数的图片能有一个位移或者旋转这样的动画,意味着要想浏览器达到60帧的帧频,程序必须质量够高,浏览器渲染页面的性能也要够高。

几个浏览器下测试做出来的页面,出人意料,一直认为性能最高的Chrome出现了问题,在滚动页面时帧频降到了10FPS以下,反而IE9+的性能相当高,尤其是IE10,非常流畅。问题出在了哪?在经过反复的测试后,终于发现Chrome下性能低的原因。

下面是在Chrome的调试工具里的看到了,很明显在我滚动页面时,IMG标签被多次解码,而这对性能的影响是非常明显的,尤其是页面中存在大量大尺寸图片时。

chrome devtools

 

在我使用了Canvas代替了IMG之后,这种图片重复解码的问题就不存在了,而且性能提升非常明显,基本上能达到最大帧频。不过IE下Canvas似乎难以做自动等比缩放,所以IE下我继续使用IMG,正好IE下图片不存在这样的问题。

 

避免网页中直接使用IMG标签

为什么要在网页中避免网页中直接使用IMG标签?我总结一下有以下几个原因:

1、无法控制图片加载的时间,比如我做一个有大量图片的网站,而网站中的图片可能还有CSS动画什么的,我们需要像以往Flash网站一样的加载进度条,在所有图片加载完后才能正常让网页动起来。如果不是这样,可能动画就达不到预期的效果,像CSS动画有可能就会出现衔接的问题,因为浏览器是在某图片加载完后对它做动画,而并不是在所有图片加载完后做动画,这就会导致动画不同步的问题。

2、无法在某些时候换用其他的显示图片的方式,比如有时我们想用前景的方式显示图片,有时我们想用Canvas的方式显示图片,如果写死用IMG标签,那会导致这样的功能就难以实现了。

3、这个问题跟第一个问题有几分相似,如今很多网站已经采用自适应(响应式)的设计,对于这种设计,会出现某些资源在某些设备上并不想显示,不仅是不想显示,甚至是不能加载,想象一下DESKTOP下的页面用的大图我们万一用手机访问,这张图依然被加载,那轻则网页打开缓慢,重则浏览器崩溃,万一浏览者不是用的WIFI,那。。。他死定了。但是正如第一点所说,没办法直接控制IMG标签,当然有人可能会说了,我用JS来判断,然后用JS来插入这些图片进页面不也可以么,嗯。。。是可以,不过你可以试试看,看这种写法会浪费你多少时间,万一要后期要修改呢?不仅这种方式不直观,而且还会浪费大量的时间。

4、性能问题,某些浏览器(比如Chrome)对于图片处理或许会存在一定的性能问题,在滚动页面或者重新渲染页面时,某些图片会存在即时解码的问题,也就是即便之前已经解码了也渲染了,当页面有改动或者滚动需要重新渲染时,这张图片会被重新解码,之后是RESIZE,之后再显示,如果对页面性能要求高,比如在做动画时,那这是致命的性能问题。

好吧,暂时我也就发现这多问题了,那么解决方法是什么?这是我现在常用的方法:

1、使用DIV来代替图片,比如我们可以这样写:<div class=”picture” data-src=”a.jpg”></div>。这里我们使用一个固定的Class名称来代表这是一张图片,之后使用HTML的DATASET,设置一个自定义的属性data-src来指明图片的路径。

2、使用JS来获取页面中的带picture标签的DIV,之后加载相应的图片,然后可以在这些图片都加载完后插入到相应的DIV中,之后显示页面。这样可以灵活解决图片加载的问题。

3、对于上面据说的可能像Chrome这样的浏览器存在的性能问题,我们可以使用Canvas来代替IMG标签,这样性能问题也解决了。