网站设计案例分析与课程设计

Yslow是一套雅虎的网页评分系统，详细的列出了各项影响网页载入速度的参数，这里不做多说。

我之前就一直参考Yslow做博客优化，经过长时间的学习也算是有所收获，小博的YslowV2分数达到了94分（偶耶！），如果换用博客类小网站评分标准更是可以达到满分。

下面我就总结几点大家力所能及优化方法，分享给各位。

下面贴一下小博全新刷新的载入图，下面文章中用得到：

我认为网页优化主要分为两类，个人称之为软优化与硬优化。软优化主要包括：服务器缓存类与浏览器本地缓存类，这些优化主要是参数设置上的改动。而硬优化包括：传输线路，CDN，HTTP请求数，带宽等基础项目。

咱们小博客主要能做的，也是我想介绍的主要是软优化类。

一、Make fewer HTTP requests（减少http请求数）

网页载入中，洛阳网站建设公司 每一个文件都是一个http请求，包括html，js，css，图片等。而每一个文件的载入都需要DNS查询（可忽略），建立连接，发送请求（可忽略），等待回复，下载文件，总共5个步骤，文件依次载入，时间就得依次增加，文件越多，时间越长。

下面看看俺的主机商小张童鞋的博客载入图吧：

简直是一条长龙，橙色JS，蓝色HTML，绿色CSS，紫色IMG，虽然1秒多就响应，但最终载入时间为9秒。

而面对这样的网页，我们要做的是：

把CSS全都合到一个文件中去（复制粘贴就行）

把JS全都合到一个文件中去（复制粘贴就行）

主题中尽量少的使用图片

如果必须使用图片，把背景图片全都合到一个文件中去（这个用photoshop合成，调用背景图片时用background:url（all.png） no-repeat 几px 几px;来控制背景位置）

把框架网页能去掉的都去了，每一个框架网页等于新打开一个网页。

优化好之后，整个页面只有1个js，1个css，1个背景图片和若干文章图片页面载入速度起码提升2/3。

二、Add Expires headers（添加周期头）

啥叫周期头啊，其实就是给文件一个保质期。

没过期的直接从本地调用，过期了后就得换新的了。

这个做起来简单，直接在网站根目录的.htaccess文件末尾添加以下代码就行了（只有LINUX主机有.htaccess）

其中Axxxxxx是时间，单位秒。

IfModule mod_expires.c

ExpiresActive On

ExpiresDefault A3600

ExpiresByType image/gif A2592000

ExpiresByType image/png A2592000

ExpiresByType image/企业官网建设jpeg A2592000

ExpiresByType text/plain A604800

ExpiresByType application/x-shockwave-flash A2592000

ExpiresByType video/x-flv A2592000

ExpiresByType application/pdf A2592000

ExpiresByType text/html A600

ExpiresByType image/x-icon A2592000

ExpiresByType application/javascript A604800

淮北网站建设公司 ExpiresByType text/css A604800

/IfModule

这样设置后，第二次访问就会直接调用本地缓存，仅仅HTML重新下载，速度飞快，如图：

三、Configure entity tags （ETags）（配置实体标签设置ETAG）

说实在的我也不知道ETAG是个什么东东，网上的解释说他相当于一个标签，来确认浏览器缓存里的元素是否和原来服务器网站设计案例分析与课程设计上的一致，可是却没有说如何设置。终于找到了一篇如何设置的文章，可作者也是不太懂，作者就是万戈大侠了。

他的方法是，在.htaccess中加入这句话。

FileETag none

说实话我并没有明白为什么要设置成none，不过它起作用了，Yslow这项的评分到了A，肯定是有好处的，这就足够了。