WEB标准化之网页内容篇

龙城团

站长交易（）友情链接交换 建站更简单，就找313！招募分销商

WEB前端优化主要分页面内容优化和服务器优化，本篇主要介绍内容优化，服务器端的优化以后再讲。

页面内容优化的四大原则是：降低请求数、减少交互通信量、合理利用“并行”、节约系统消耗。

一、先看一组数据；下面是打开一个时，用firebug测得数据：

从上面的数据可以看出，网页打开时，主要时间（约90%）在下载图片、CSS和JS等各项资源。这么多的加载资源势必导致HTTP请求数增加，那么精减冗余的HTTP请求数，则会提升网页的加载速度。那么如何在不影响页面展示效果的基础上，减少HTTP请教数呢？

1、合并同类文件

把分散的CSS样式或者JS脚本等合并到同一个文件中，则能减少HTTP请求数。同样，对于脚本也可以这样处理。如下图：

2、CSS sprites

Css sprites又叫css精灵，它能把所有的背景图片整合到一个图片文件中，然后利用CSS的background-image和background-position属性来显示图片的不同部分。通过这种方式，可以降低图片的请求次数。需要注意的是：在当前我国的网速而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

如雅虎首页的图片就使用了这种方式，大家可以通过firefox的插件Developer查看：

雅虎使用的css-sprites

提醒：不能滥用这项技术，因为涉及很多图片，使用不当，会增加后期维护的难度；同时，不能将所有图片合在一起，只拼合通用的即可，如上图雅虎图片中的图标。鉴于古老的有一利必有一弊原则，整合后的图片减少的请求次数，但增加了首次加载的时间，如果能在系统架构中把缓存策略做好，这项技术可以备用。

3、精简重复脚本

一个JS在同一页面中引用多数，会影响页面的性能。因为赘余的JS不仅会增加JS运算，还顺便增加了HTTP请求。注：火狐浏览器可以智能省略重复的JS发起的多余的HTPP请求，但IE浏览器就会规规矩矩地一一执行。鉴于IE目前在浏览器市场中的比重，这个问题应该解决的。

二、减少交互通信量

上面的表格说明了一个情况：页面内需要下载的资源跟响应时间是成正比的，客户端跟服务器交互的通信量越大，响应时间越长。有效地降低通信量就能提升网站性能。

1、压缩技术

（1）压缩CSS和JS。

通过减小这类文件的体积，从而提升下载速度。最简单的压缩方法是删除冗余信息，比如去年CSS和脚本中的注释、多余的空白符（换行符、Tab缩进）等；另外还有语法压缩和文本混淆的方式，通过类似字典的方式，用简单的字母代替代码中的变量。

压缩专门工具，CSS压缩工具有Page Speed、YUI Compressor；JS压缩工具有中JSMIn、Page Speed、YUI Compressor、JavaScriptCompressor等。

下面是打开一个网页后Page Speed给出的JS压缩和CSS压缩建议。

 

一季度财政收入26125.74亿元增逾三成
央行明日发行550亿元1年期央票