代码改变世界

随笔分类 - 性能优化

网站前端性能优化总结【转】

2012-06-29 11:36 by VVG, 459 阅读, 收藏, 编辑
摘要:一、服务器侧优化 1.添加Expires或Cache-Control信息头 某些经常使用到、并且不会经常做改动的图片(banner、logo等等)、静态文件(登录首页、说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存,文档就可以从缓存(除已经过期)而不是从服务器读取。接着,客户端考察缓存中的副本,看看是否过期或者失效,以决定是否必须从服务器获得更新。 各个容器都有针对的方案,,以Apache为例:ExpiresActive OnExpiresByType image/gif"access plus 1 w 阅读全文

CSS/Javascript压缩工具taobao jsminifier[转]

2012-03-08 10:59 by VVG, 566 阅读, 收藏, 编辑
摘要:Epile在网上找Javascript和CSS压缩软件的时候搜索到这款由淘宝在雅虎YUICompressed基础上开发的压缩工具,用起来还挺不错的。软件自带的安装说明说得不清楚,在这里Epile写了一个安装说明,并上传到Google Code分享给大家。本软件安装完毕可以直接在要压缩的文件点击右键使用,非常方便。安装说明下载jsMinifier安装Java SE Development Kit (JDK)打开“控制面板”,在其中打开“系统”,其下“高级”选项卡下的环境变量中的系统变量里添加变量名JAVA_HOME,变量值为Java SE Development Kit的安装目录,如“C:/Pr 阅读全文

利用Minify加速 优化网站性能教程

2012-03-08 10:42 by VVG, 1110 阅读, 收藏, 编辑
摘要:Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件。一般情况下,网站速度的瓶颈都在前端,而最关键的就是资源的加载速度,但是大多数浏览器都有单个域名并发请求数限制,所以如果一个页面中存在很多的资源,比如CSS和JavaScript文件,那么明显会降低网站的加载速度,比较好处理方式就是 阅读全文

在服务端合并和压缩JavaScript和CSS文件[转]

2012-03-08 10:35 by VVG, 270 阅读, 收藏, 编辑
摘要:Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压 阅读全文

使用ANT对Js/Css文件进行合并和压缩处理 [转]

2012-03-07 20:58 by VVG, 2967 阅读, 收藏, 编辑
摘要:使用ANT对Js/Css文件进行合并和压缩处理Tag:javascript css ant减少HTTP请求是优化网站速度的一个重要手段, 所以对javascript/css两种文件进行压缩或合并都是非常必要的.这里介绍利用ANT来自动进行文件合并和压缩.3.1. javascript文件合并在开发阶段常常会把javascript文件分成几部分来写, 比如模块式的开发或多人合作, 或者使用一些外部库. 在生产环境下将比较小的文件合并成一个可以减少HTTP请求的次数, 从而达到优化的目的.这里假设你对ANT有一定了了解, 如果没有可以参考[ANT简单介绍].Example 1: 例子比如现在需要把 阅读全文

轻松解决PNG图片在IE6中背景不透明方法

2012-02-27 09:20 by VVG, 250 阅读, 收藏, 编辑
摘要:最近在读javascript DOM高级程序设计,里面中有一个更好的代码,这种方式基本满足所有的PNG嵌入需求,代码如下:function fixMSIEPng() { if (!document.body.filters) { // Not MSIE return; } if (7 <= parseFloat(navigator.appVersion.split("MSIE")[1])) { // 7+ supports PNG return; } // Fix the inline images i... 阅读全文

前端优化之图片优化自动化[转]

2012-02-23 21:49 by VVG, 281 阅读, 收藏, 编辑
摘要:前端图片优化介绍随着前端页面越来越复杂,尤其是一些社区型的页面中,图片成了页面中不可或缺的资源,并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。由于图片是二进制文件,并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式,在不降低图片质量的情况下去掉图片里的元数据信息。常用的一些优化方案目前图片优化使用比较多的主要是下面几种方式:选择合适的图片格式,如:png代替gif,尽量使用png8png使用pngout优化,jpg使用jpgtran通过yahoo的smush进行通过google的page spe 阅读全文