dudo博客

5月
25

转载请注明来处http://www.dudo.org/
    对于服务器租用者来说,要想在硬件环境、网络环境等来改善自身网站性能,受客观因素的影响可能会有比较大的难度。因此,只能退而求其次,在程序上狠下功夫。对于独立博客站长来说,使用的博客程序一般都是比较成熟的发行版的程序,这些程序为了适用的广泛性往往在代码中留出了很大的改进余地,因此,我们可以在这上面下一些功夫。
    在前面的文章中,我又系列的文章来讲述如何提高网站性能的最佳体验,同时还提供了一款Yahoo!推出的工具YSlow来提高网站性能,在参考这些原则的基础上,我针对PJBlog博客程序(其它独立博客程序和网站也可作为参考)为例说一下改进方法:

  1. 合并JavaScript文件。无论是在PJBlog还是其它的博客程序中,都使用了大量的外部JavaScript文件,要知道,引入一个外部文件都要发送一个HTTP请求,而在所有影响页面响应速度的因素中,HTTP请求是最关键的一个,因此把所有的JavaScrip文件合并到一个 javascript.js的文件中是一个很好的做法。不过,你要注意不同的JavaScript文件中使用了不同的变量和函数名称,你要保证它们合并之后还能正常工作。在某些情况下,你也可以有两个独立的JavaScript文件;
  2. 精减你的JavaScript文件。合并JavaScript文件是为了减少HTTP请求次数,但是基本上不会在体积上有所改观,所以你还需要精简掉JavaScript文件中那些没有用的东西,比如注释、换行、空白等,这大概会使你的程序缩小20%~30%的空间。你可以使用ESC 1.14对文件进行压缩,它的压缩率高达60%以上,对于减少响应大小、提高响应速度来说大有裨益;
  3. 合并CSS文件与精减CSS文件。和处理JavaScript文件一样,把所有的CSS文件合并到一个style.css中,CSS比JavaScript好处理的一点就是它冲突的机率较小,即便有冲突也不会是大问题。精简就去掉多余的样式化的格式,把所有的CSS规则都放到一行中。这款叫作Minify的程序不但可以压缩CSS还可以压缩JavaScript和PHP程序。不过这里要提醒的是,如果你要合并和精简文件一定要保留原来的文件以便以后程序更改时使用。
  4. 使用CSS Sprites。所谓的CSS Sprites就是所有CSS中用来做背景图像的图片文件都放到一个文件中。在PJBlog以及其它博客程序的皮肤中,作者很多都没有使用CSS Sprites,这样造成每出现一次background规则都要发送一次HTTP请求,而如果使用CSS Sprites则只需要一次HTTP请求,节省不必要的开支。
  5. 使用缓存。对于静态内容(如Flash、JavaScript、CSS、Image)通过加上Expires头或者Cache-Control来把它们缓存到客户端,这样用户在下次访问的时候就可以不用下载这样内容了,这样减少了HTTP请求的次数又减少了下载文件的大小。在IIS中设置文件头很简单,在你要设置的文件或者文件夹上右键点击——属性——HTTP头,然后勾中“启用文件过期”,设定过期时间,可以是一年或者十年等,还可以指定某个未来的时间,如2010年等。不过你一但设置了HTTP头,如果你要对文件作出修改你需为修改过的文件重新起一个名字。
  6. 启用Gzip压缩。Gzip压缩针对JavaScript、CSS等内容一种压缩技术,它能大大减少文件的体积提高传输速率,精简JavaScript和CSS只是去除不必要的内容,而Gzip压缩则是将文件在服务器端打包、在客户端解包的过程。Apache和IIS6.0都内置了Gzip技术,现代浏览器都支持Gzip技术(即使不支持它也会告诉服务器不要打包),因此可以放心使用。在IIS6.0中你需要简单配置之后才能使用Gzip技术,而在Apache 1.3中要启用mod_zip,在Apache 2.x使用moflate。Gzip大概可以节省70%的传输空间,目前互联网中有90%浏览器资料支持Gzip传输。
  7. 把JavaSCript文件放在文档的最末尾,而把CSS文件放在<head>之间。CSS放在<head/>之间会加快文档下载。在Yahoo!的研究中发现,如果你把一个CSS文件置于文档内部,当浏览器加载到这个样式表时会终止所有文件的下载而单独下载它(一般的下载浏览器使用并行下载模式),这是因为浏览器在下载到一个CSS文件后都要根据CSS内的规则重绘屏幕,这还会导致用户出现白屏。所以要把你所有的样式文件都放在最开始。而把JavaScript文件放于末尾下载,一方面可以使用户首先获得文档内容,另一方面JavaScript文件的下载和其它文件不同,它不能和其它文件同时下载,所有的JavaScript文件只有单独一个一个下载。所以在不影响使用的情况下,JavaScript文件要放在末尾加载。
  8. CSSJavaScript文档要成为独立的外部文件。这是因为浏览器加载使用的是并行模式,一次可以加载多个内容,把CSS和JavaScript作为单独文件不但可以减小HTML文档的大小,而可以加快下载效率。
  9. 使用少量的域名。一般来说一个页面引用的文件(图片、Flash、CSS、JavaScript)不能多于四个主机,因为每多出一个域名就意味着多一个DNS的查找,在浏览器查找DNS信息的过程中,浏览器由于不知道要访问的IP地址是什么,所以它什么都不做,只是在等待,所以DNS查找的次数越少,响应速度就越快。转载请注明来处http://www.dudo.org/
  10. 避免CSS中使用Expression。虽然功能很强大,但是它的计算频率太高,影响网站的整体性能。对于一个CSS Expression来说,即使你滚动一下屏幕它都要重新计算一次,甚至你移到一次鼠标它都要重新计算,所有一个CSS Express在页面中计算10000次是很容易的事情。

     空间和网络的因素我们很难左右,但是程序本身的性能还需要改进的地方。看看你的博客在提高性能方面是否还有需要改进的地方呢?



共有(7)条评论

emu 发表于 2008-5-26 at 12:14 #1楼

8. CSS和JavaScript文档要成为独立的外部文件。这是因为浏览器加载使用的是并行模式,一次可以加载多个内容,把CSS和JavaScript作为单独文件不但可以减小HTML文档的大小,而可以加快下载效率

其实默认情况下浏览器加载scirpt标签是串行模式,一个script标签要下载完成了页面才能继续解析下去,要使它并行话需要做一些额外的工作,可以看看雅虎15优化原则的作者到google后提出的新优化原则[cool][reply=dudo,2009-04-25 09:30 PM]这个在第7条“把JavaSCript文件放在文档的最末尾”中已经提到了。顺便,本人和您相比的确是菜鸟。请多指教![/reply]

[回复]


emu 发表于 2008-5-26 at 12:21 #2楼

9.使用少量的域名。一般来说一个页面引用的文件(图片、Flash、CSS、JavaScript)不能多于四个主机,因为每多出一个域名就意味着多一个DNS的查找,在浏览器查找DNS信息的过程中,浏览器由于不知道要访问的IP地址是什么,所以它什么都不做,只是在等待,所以DNS查找的次数越少,响应速度就越快。

呵呵照拷贝了雅虎的优化建议之外,楼主加的自己的评论没什么水平啊。为什么是4个而不是更多或者更少的主机,什么情况下应该用更多或者更少的域名?DNS查找过程在什么情况下是串行的(因此应减少)而什么情况下是并行的(因此较少不一定是优化)?自己加不出好的料,还不如直接转载雅虎的建议算了。[reply=dudo,2009-04-25 09:30 PM]谢谢你的建议,我会继续学习。这文章是我在翻译了Yahoo!的性能优化34原则之后写的http://www.dudo.org/article.asp?id=214,而在文章一开始已经指明了这一点,如果你从Cnbeta过来的话,那是编辑后来去掉了。
至于为什么是4,这是在DNS查找和并行下载中最最优的一个选择。如果再问这个最优选择是怎么计算出来的,那我就可以去Yahoo!工作了。不过你可以参照服务器与浏览器流水请求相关文章。[/reply]

[回复]


emu 发表于 2008-5-26 at 12:56 #3楼

呵呵我记得雅虎有解释国为什么是4啊,只是雅虎似乎没考虑到DSN的同步和异步的问题。

[回复]


锐风 发表于 2008-5-26 at 16:55 #4楼

这个不错.

[回复]


锐风 发表于 2008-5-26 at 17:34 #5楼

才发现该文出现于CB..[reply=dudo,2009-04-25 09:30 PM]呵呵,昨晚投递的[/reply]

[回复]


Nogloomy 发表于 2008-5-30 at 19:54 #6楼

严重抄袭啊 [reply=dudo,2009-04-25 09:30 PM]什么抄袭?如果有版权问题请您指出,谢谢![/reply]

[回复]


土木坛子 发表于 2012-2-07 at 17:36 #7楼

不错的建议,基本都用上了。

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量