Heluyao's Blog

写高质量的jQuery

heluyao — Fri, 05 Aug 2011 07:22:50 +0000

看了一篇关于jQuery性能提升的文章，十分认同，总结一下(原文一共是十点，我省略了一部分)：

1.尽量只用id选择器和标签选择器，比如jQuery(“#selector”)、jQuery(“TagName”)，减少class选择器的使用，避免伪类选择器和属性选择器。

2.查找子节点时推荐使用find，比如jQuery(“body”).find(“p”)。

3.利用delegate将事件委托，例如给一个长列表逐个绑定事件，就可以使用delegate。delegata方法请参看jQuery API。

4.尽量减少DOM结构的改动(如.append()、.insertBefore()和.insetAfter())，避免不了也要记得先合并再一次性插入，大范围的DOM结构改动，可以利用detach方法先取出，操作好之后再插入。detach方法请参看jQuery API。

5.循环，尽量使用js原生的for或while，减少使用jQuery的each方法。

原文比较详细的并以数据说明了造成性能问题的原因，有兴趣就马上猛击过去了解。

笔记：网站性能优化——优化Sprite

heluyao — Sun, 31 Jul 2011 15:00:16 +0000

1.按颜色合并，将颜色调色板相近的图标组合在一起。
2.避免不必要的空白(通常我会留出1px的距离)。
3.水平排列，而不是垂直。
4.将保存为png8格式。
5.先优化一遍图像，再合并成sprite。
6.通过控制大小和对齐减少反锯齿像素的数量。
7.避免使用对角线渐变，无法被平铺。
8.最好避免在ie6下中使用alpha透明图像，若一定要用就保存在单独的sprite中。
9.使用马赛克式的渐变。
10.要特别注意logo的质量。

笔记：网站性能优化——图像优化

heluyao — Sat, 30 Jul 2011 13:12:43 +0000

优化PNG格式的图像

推荐工具：Pngcrush(http://pmt.sourceforge.net/pngcrush/)

其他工具：PNGOUT,OptiPNG,PngOptimizer

剥离JPEG的元数据

什么是元数据？

1.注释。

2.应用程序定义的内部信息（如photoshop）。

3.EXIF信息。

工具：jpegtran(http://jpegclub.org)

将gif转换成png

如果gif图像中不包含动画，那就转换到png。转换后还要记得用Pngcrush优化哦！

优化GIF动画

工具：Gifsicle(http://www.lcdf.org/gifsicle/)

在线优化图像——Smush.it

前面提到的事情它都能胜任，只是在JPEG上为了保留版权信息没有剥离元数据。

使用渐进JPEG格式来储存大图像

这个能让图像在浏览器中逐步进行渲染。要注意的是文件比较大时才考虑使用该方法。

避免使用AlphaImageLoader

增加了代码的维护成本，还会造成直接的性能损耗。替代方案是使用VML或者采用渐进增强思维。

避免对图像进行缩放

比如将一张400×400的图缩放至200×200。缺点是既降低了图片质量又增大了下载量。

不要忘了favicons和Apple触摸图标

让文件更小且被缓存。

睡不着

heluyao — Thu, 28 Jul 2011 17:58:46 +0000

最近这小日子太舒坦了，几乎天天都在庆祝。今天刚好给博客装了个wap插件，现在手机也能更新博客了。晚上没事又睡不着就随便记录几句吧！

2011挺顺的，工作和生活上都是。今天lp医院的产检结果很好，小baby很健康，三维bc让我第一次见到他（她）的样子，还挺漂亮的，lp说小家伙长得像极了我，哈哈！再等将近4个月他（她）就出生了，期待啊！

2011当然不会放慢学习的脚步啦！主要精力还是放在javascript,html5,css3上，将之前已读过的几本js方面的书又重读了一遍，加深印象以便更好的融会贯通，都有《JavaScript高级程序设计》、《深入浅出JavaScript 》、《JavaScript DOM编程艺术》，还读了《html5高级程序设计》，基本了解了canvas、web storage、web sockets、web workers、geolocation、离线应用，目前正在读《高性能网站建设进阶指南》一书，在网站性能优化方面可谓是受益匪浅，未来的日子里准备拜读《JavaScript设计模式》和《高性能JavaScript》两本大作，最近还大致上了解了nodejs(在服务端跑的javascript)并系统的学习了淘宝玉伯的seajs(异步无阻塞和代码模块化)，js方面还是有一段很长的路要走的；至于css3，说到底就是增加了一些新的Selectors和特性(比如渐变色、圆角边框、阴影、多重背景图、透明度、css动画、css3D渲染…)，后端的一些技术也慢慢深入(php)，服务器方面的经验也有了一定积累；还有过一段时间的actionscript(as2)开发经历，独立开发了一个音乐播放器并实现了歌曲列表和lrc动态歌词的功能，升级了网站的视频播放器，添加了分享、颜色调整、尺寸大小调整等等。

其实总结起来也没什么，又要感叹“时间太瘦，指缝太宽”了！每天时间不够用啊，看来好好管理自己的时间是十分重要的！

抓紧时间睡觉了，要不明天上班又没精神了。听完这首我不知道名字但好听的歌…Zz Zz……

minify优化网站

heluyao — Tue, 05 Jul 2011 09:39:59 +0000

项目地址：minify

作用：合并(减少HTTP请求)、精简、Gzip压缩和缓存JavaScript和CSS文件。

配置：Apache+PHP，开启Mod Rewrite。

下载：minify_2.1.3.zip

安装：解压后将min文件夹复制到网站根目录。

使用：

整个过程非常简单，只要你的服务器配置支持到位，基本就是傻瓜式的操作了。如果要配置得更加详细，比如缓存文件、控制是否压缩代码…等等，那么请参看Minify CookBook和Wiki，也可以看口碑网UED的文章在服务端合并和压缩JavaScript和CSS文件。

效果预览：http://11gz.com/demo/js-ajax/minify/index.html，请配合相关查看http请求记录的工具(HttpWatch/FireBug)浏览该代码。

blog的RSS托管服务换成feedburner

heluyao — Mon, 04 Jul 2011 04:19:08 +0000

未知原因，feedsky的RSS托管服务不能正常使用，好几天前的事情了。今天将blog的订阅地址换成feedburner，还请有兴趣的朋友更新一下订阅地址！

http://feed.11gz.com/heluyao

不得不感叹一下，feedburner的速度是严重快过feedsky，据说稳定性也超强！

上Google要这样

heluyao — Sat, 02 Jul 2011 08:47:43 +0000

如果你也离不开google reader、Gmail…等等，可以尝试以下方法，也许日后这样也不行了，那就默默祷告吧！

修改host文件，添加如下内容并保存。

203.208.39.22 webcache.googleusercontent.com
203.208.39.22 mail.google.com
203.208.39.22 www.google.com.hk
203.208.39.22 www.google.com

开始 > 运行 > 输入cmd > 继续输入ipconfig /flushdns > 关闭“命令提示符”，ok了！

记录一下：windows下配置node.js

heluyao — Wed, 22 Jun 2011 06:03:38 +0000

现如今，node大热，不弄弄，那不落伍了！服务器端嘛，首先还是配置环境，第一步走出去了，后面的就好说了，一步步来嘛！我平时都是用的windows，这里就只记录windows啦！

第一步：安装Cygwin

Cygwin网站：http://cygwin.com/，Cygwin是什么就不多说了，反正是必须的！先下载setup文件，就算安装完了这个文件也别删，以后万一还有用得着的地方！如果首次安装有些包忘记装了，还得用这个再次安装！我一开始就忘记了好几个包，导致浪费了好多时间！主要是记得第一个界面时选择“install from internet”，否则就会失败！

这里要装的包有：

Devel

gcc-g++: C++ compiler
gcc-mingw-g++: Mingw32 support headers and libraries for GCC C++
gcc4-g++: G++ subpackage
git: Fast Version Control System – core files
make: The GNU version of the ‘make’ utility
openssl-devel: The OpenSSL development environment
pkg-config: A utility used to retrieve information about installed libraries
zlib-devel: The zlib compression/decompression library (development)

Editor

vim: Vi IMproved – enhanced vi editor

Python

全部

Web 分类

wget: Utility to retrieve files from the WWW via HTTP and FTP
curl: Multi-protocol file transfer command-line tool

接下来就是下载了，有朋友建议选择日本的镜像，挺快！然后就是漫长的等待了。

如果你是win7用户

cmd命令行
进入cygwin安装目录下的bin子目录
运行ash.exe进入shell模式
./rebaseall -v
没有错误，完成，exit退出ash，关闭命令行窗口

第二步：安装Node.js

运行Cygwin
输入 wget http://nodejs.org/dist/node-v0.4.7.tar.gz 回车，下载node.js安装包。
输入 tar xf node-v0.4.7.tar.gz 回车。
输入 cd node-v0.4.7 回车。
输入 ./configure 回车。
输入 make 回车，可能要等一段时间！
输入 make install 回车。

一切正常的话，node.js安装成功！现在可以输入 node –version 回车，查看node.js版本啦

第三步：设置DNS并创建测试文件

cygwin的安装目录下找到etc文件夹，创建一个resolv.conf，添加代码：

nameserver 8.8.8.8 nameserver 8.8.4.4

保存，关闭！

现在可以开始测试了，返回父目录，也就是cygwin的安装目录，新建一个js文件，命名test.js，输入：

var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end('Hello World');
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');

回到cygwin命令窗口中输入 node /example.js 回车。

命令窗口中显示 Server running at http://127.0.0.1:8888/

打开浏览器，输入http://127.0.0.1:8888/，成功了吧！

npm下载、安装、使用

npm是nodejs的软件包管理器，可以用它安装所需软件包并发布自己为nodejs写的软件包，它还管理软件包的依赖关系并做了其它一些很酷的事情。

一行命令下载并安装npm

$ curl http://npmjs.org/install.sh | sh
npm安装node扩展包，同样是一行命令下载并安装好软件包

$ npm install <包名>

一些链接：

imglazyload图片延迟加载(jQuery)

heluyao — Mon, 20 Jun 2011 12:13:26 +0000

这个小效果还是3个月前写的，太忙，一直没空更新blog，刚好有点空闲，抽出来简单弄弄了~

container容器，attr属性，timeout延时。这些都可以有自己灵活控制的！原理简单不过了，图片先不设置src属性，浏览器就不会产生请求，监听起滚动条和窗口大小的事件，通过判断图片是否处于当前可视区域(offset的left和top方向分别小于scrollTop+clientHeight和scrollLeft+clientWidth)来控制图片是否显示，显示则设置img对象的src属性为标签中自定义属性的值！

主要代码

this.container = $(this.options.container);
this.imgNum = this.container.find('img['+ this.options.attr +']');
var _this = this;
if(this.imgNum.length){
   this.timer&&clearTimeout(this.timer);
   this.timer = setTimeout(function(){
   var arr = [],gc = _this.getClient();
   $.each(_this.imgNum,function(i,o){
   if($(o).offset().top <= gc.top && $(o).offset().left <= gc.left){
   var attrval = $(o).attr('lazysrc');attrval&&$(o).attr('src',attrval).removeAttr('lazysrc').hide().fadeIn();
   }else{
   arr.push(o);
   }
   });
   _this.imgNum = arr;
   },this.options.timeout);
}else{
   $(window).unbind('scroll',this.check);
   $(window).unbind('resize',this.check);
}

返回当前屏幕显示范围

return{'top':document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop),'left':document.documentElement.clientWidth+Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)};

demo展示：http://www.11gz.com/demo/js-ajax/imglazyload.html

IE6正在消亡

heluyao — Tue, 05 Apr 2011 09:29:35 +0000

http://ie6countdown.com/

IE6在欧美地区已经消失得差不多了，现在重症区是亚洲，中国肯定是排在第一名的，呵呵~！好在还有韩国作陪，再下面就是印度、日本了。最厉害的还是芬兰和挪威，都是小于1个芭仙！

期待着IE6早日“灭绝”，也好给我们这群写代码的省点时间，提高点编码效率！