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触摸图标

让文件更小且被缓存。

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)浏览该代码。

It’s Beautiful

heluyao — Mon, 29 Mar 2010 06:58:15 +0000

点击图片查看大图

YUI Compressor online在线压缩js

heluyao — Fri, 28 Aug 2009 09:57:52 +0000

分享一个利用YUI Compressor在线压缩js的网页。

链接地址：YUI Compressor online

之前推荐过的TBCompressor其实就是这款压缩工具，只是TBueder将其封装了一下。该工具本地安装需要java的支持，有点麻烦，今天发现一个在线的，挺方便了！只是目前还不能压缩css，挺遗憾的~~！

推荐一款js css压缩工具TBCompressor

heluyao — Mon, 16 Feb 2009 13:18:32 +0000

　　淘宝是怎么压缩js和css的？他们使用的是YUI Compressor:

The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

The YUI Compressor is also able to safely compress CSS files. The decision on which compressor is being used is made on the file extension (js or css)

　　淘宝前端的开发环境以Windows居多。为了方便使用，对YUICompressor做了层简单的封装，称之为TBCompressor.

　　今天偶自己试用了一下，的确是非同小可。不仅操作方法简单，而且效率也非常的高！唯一有点麻烦的就是需要安装JDK，并配置JAVA_HONE环境变量。偶本人虽然不懂JAVA，但是以前在学习一本关于AJAX的书时配置过JAVA，因此这次轻车熟路般的顺利完成。

　　测试了几次，大概效率是，1/2！非常不错了吧！

介绍：http://lifesinger.org/blog/?p=464

下载：tbcompressor-2.4.2.zip (808.3 KB)

　　之前一直都使用ECMAScript Cruncher，也是一款非常不错的文件最小化和变量名替换的工具。作者：Thomas Loo。操作起来略显复杂(与TBCompressor)，需要在Windows下运行Esc，并输入一段代码。可以按等级优化代码，一共分四级。这里就不意义介绍了。有兴趣可以去http://www.saltstorm.net/depo/esc/查看相关资料并下载试用！

页面中 CSS 加载方式的优化

heluyao — Thu, 08 May 2008 16:45:28 +0000

1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。

2、尽量使用的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将放在页面尾部。