转--

haofeng82

浏览: 144463 次
性别:
来自: 济南

最近访客更多访客>>

xiduoli

xdoc

xietiebing

sylex

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript CSS 浏览器 Flash 互联网

不错的文章，收起来

转自：http://news.csdn.net/n/20080526/116261.html

对于<strong class="kgb" onmouseover='isShowAds = false;isShowAds2 = false;isShowGg = true;InTextAds_GgLayer="_u670D_u52A1_u5668";KeyGate_ads.ShowGgAds(this,"_u670D_u52A1_u5668",event)' style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; CURSOR: hand; COLOR: #0000ff; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: underline" onclick='javascript:window.open("http://pagead2.googlesyndication.com/pagead/iclk?sa=l&ai=BYJbnUSM6SL6TJ5LgvgP9peTnDOyF30vUzMzjCcCNtwGQvwUQAxgDIM-BhwooFDgAULSd3-wFYJ3R2YHIBaABnqLu_gOyAQ1uZXdzLmNzZG4ubmV0yAEB2gEraHR0cDovL25ld3MuY3Nkbi5uZXQvbi8yMDA4MDUyNi8xMTYyNjEuaHRtbIACAagDAegDtwL1AwAEAACIBAGQBAGYBAA&num=3&adurl=http://www.hyperspin.com/in/google-cad-server/zh_CN&client=ca-pub-3578421812762734");GgKwClickStat("服务器","www.hyperspin.com","afc","2000084115");' onmouseout='isShowGg = false;InTextAds_GgLayer="_u670D_u52A1_u5668"'>服务器租用者来说，要想在硬件环境、网络环境等来改善自身<strong class="kgb" onmouseover='isShowAds = false;isShowAds2 = false;isShowGg = true;InTextAds_GgLayer="_u7F51_u7AD9";KeyGate_ads.ShowGgAds(this,"_u7F51_u7AD9",event)' style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; CURSOR: hand; COLOR: #0000ff; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: underline" onclick='javascript:window.open("http://pagead2.googlesyndication.com/pagead/iclk?sa=l&ai=BhjexUSM6SL6TJ5LgvgP9peTnDKqJ0VikjqGGB8CNtwHg1AMQAhgCIM-BhwooFDgAUOnVt5T______wFgndHZgcgFsgENbmV3cy5jc2RuLm5ldMgBAdoBK2h0dHA6Ly9uZXdzLmNzZG4ubmV0L24vMjAwODA1MjYvMTE2MjYxLmh0bWypAncyKycwVYM-yAKy67sGqAMB6AO3AvUDAAQAAIgEAZAEAZgEAA&num=2&adurl=http://tj.28.com/ws/edn/index.htm%3FbannerID%3D52103%26kw%3DEDN%25CF%25B5%25CD%25B3%26fz%3D767&client=ca-pub-3578421812762734");GgKwClickStat("网站","28.com","afc","2000084115");' onmouseout='isShowGg = false;InTextAds_GgLayer="_u7F51_u7AD9"'>网站性能，受客观因素的影响可能会有比较大的难度。因此，只能退而求其次，在程序上狠下功夫。对于独立博客站长来说，使用的博客程序一般都是比较成熟的发行版的程序，这些程序为了适用的广泛性往往在代码中留出了很大的改进余地，因此，我们可以在这上面下一些功夫。

我针对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 Spirites。所谓的CSS Spirites就是所有CSS中用来做背景图像的图片文件都放到一个文件中。在PJBlog以及其它博客程序的皮肤中，作者很多都没有使用CSS Spirites，这样造成每出现一次background规则都要发送一次HTTP请求，而如果使用CSS Spirites则只需要一次HTTP请求，节省不必要的开支。

5. 使用缓存。对于静态内容（如Flash、 JavaScript、CSS、Image）通过加上Expires头或者Cache-Control来把它们缓存到客户端，这样用户在下次访问的时候就可以不用下载这样内容了，这样减少了HTTP请求的次数又减少了下载文件的大小。在IIS中设置文件头很<strong class="kgb" onmouseover='isShowAds = false;isShowAds2 = false;isShowGg = true;InTextAds_GgLayer="_u7B80_u5355";KeyGate_ads.ShowGgAds(this,"_u7B80_u5355",event)' style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; CURSOR: hand; COLOR: #0000ff; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: underline" onclick='javascript:window.open("http://pagead2.googlesyndication.com/pagead/iclk?sa=l&ai=BYFJ1USM6SL6TJ5LgvgP9peTnDLa_-z_Gycu5A8CNtwGw6gEQCBgIIM-BhwooFDgAUN6WlZr______wFgndHZgcgFoAGG6dL-A7IBDW5ld3MuY3Nkbi5uZXTIAQHaAStodHRwOi8vbmV3cy5jc2RuLm5ldC9uLzIwMDgwNTI2LzExNjI2MS5odG1sgAIBqQIWJXKPlpvAPsgCip6MBKgDAegDtwL1AwAEAACIBAGQBAGYBAA&num=8&adurl=http://www.getagility.com/cn&client=ca-pub-3578421812762734");GgKwClickStat("简单","www.getagility.com/cn","afc","2000084115");' onmouseout='isShowGg = false;InTextAds_GgLayer="_u7B80_u5355"'>简单，在你要设置的文件或者<strong class="kgb" onmouseover='isShowAds = false;isShowAds2 = false;isShowGg = true;InTextAds_GgLayer="_u6587_u4EF6_u5939";KeyGate_ads.ShowGgAds(this,"_u6587_u4EF6_u5939",event)' style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; CURSOR: hand; COLOR: #0000ff; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: underline" onclick='javascript:window.open("http://pagead2.googlesyndication.com/pagead/iclk?sa=l&ai=Bc5XZUSM6SL6TJ5LgvgP9peTnDNCn3D3ynM3HBMCNtwHg1AMQERgRIM-BhwooFDgAUJP2gKYGYJ3R2YHIBbIBDW5ld3MuY3Nkbi5uZXTIAQHaAStodHRwOi8vbmV3cy5jc2RuLm5ldC9uLzIwMDgwNTI2LzExNjI2MS5odG1sqQJ3MisnMFWDPsgCtOm_BKgDAegDtwL1AwAEAACIBAGQBAGYBAA&num=17&adurl=http://www.plus-cn.com/chinese/product.htm&client=ca-pub-3578421812762734");GgKwClickStat("文件夹","www.plus-cn.com/","afc","2000084115");' onmouseout='isShowGg = false;InTextAds_GgLayer="_u6587_u4EF6_u5939"'>文件夹上右键点击—— 属性——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 文件放在<strong class="kgb" onmouseover='isShowAds = false;isShowAds2 = false;isShowGg = true;InTextAds_GgLayer="_u6587_u6863";KeyGate_ads.ShowGgAds(this,"_u6587_u6863",event)' style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; CURSOR: hand; COLOR: #0000ff; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: underline" onclick='javascript:window.open("http://pagead2.googlesyndication.com/pagead/iclk?sa=l&ai=BNClFUSM6SL6TJ5LgvgP9peTnDKXVuyaR6_q5BMCNtwGg_goQARgBIM-BhwooFDgAUPiXo5IDYJ3R2YHIBbIBDW5ld3MuY3Nkbi5uZXTIAQHaAStodHRwOi8vbmV3cy5jc2RuLm5ldC9uLzIwMDgwNTI2LzExNjI2MS5odG1sqQJ3MisnMFWDPqgDAegDtwL1AwAEAACIBAGQBAGYBAA&num=1&adurl=http://www.imbox.com&client=ca-pub-3578421812762734");GgKwClickStat("文档","www.imbox.com","afc","2000084115");' onmouseout='isShowGg = false;InTextAds_GgLayer="_u6587_u6863"'>文档的最末尾，而把CSS文件放在<head>之间。CSS放在<head/>之间会加快文档下载。在Yahoo！的研究中发现，如果你把一个CSS文件置于文档内部，当浏览器加载到这个样式表时会终止所有文件的下载而单独下载它（一般的下载浏览器使用并行下载模式），这是因为浏览器在下载到一个CSS文件后都要根据CSS内的规则重绘屏幕，这还会导致用户出现白屏。所以要把你所有的样式文件都放在最开始。而把 JavaScript文件放于末尾下载，一方面可以使用户首先获得文档内容，另一方面JavaScript文件的下载和其它文件不同，它不能和其它文件同时下载，所有的JavaScript文件只有单独一个一个下载。所以在不影响使用的情况下，JavaScript文件要放在末尾加载。

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

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

10. 避免CSS中使用Expression。虽然功能很强大，但是它的计算频率太高，影响网站的整体性能。对于一个CSS Expression来说，即使你滚动一下屏幕它都要重新计算一次，甚至你移到一次鼠标它都要重新计算，所有一个CSS Express在页面中计算10000次是很容易的事情。

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