web访问速度优化分析

请求从发出到接收完成一共经历了DNS Lookup、Connecting、Blocking、Sending、Waiting和Receiving六个阶段，时间共计38ms。请求完成之后是DOM加载和页面加载。下面简单解释下这六个阶段：

　　1) DNS Lookup，DNS解析时间。如果页面存在多个请求主机，频繁DNS解析将消耗更多的时间。

　　2) Connecting，建立一个TCP连接所需要的时间，不同的浏览器使用不同的端口下载资源，因此更多的端口等于更多的并行性，并且更多的TCP连接时间开销。

　　3) Blocking，网页请求被阻塞，花费在浏览器中的等待网络连接的时间;

　　4) Sending，向服务器发送请求所需要的时间;

　　5) Waiting，等待服务器响应的时间(直到第一个字节是从服务器收到的)，优化服务或连接;

　　6) Receiving，接收服务器响应对象需要的时间;

　　二、网站速度建议

　　了解了影响网站速度的影响因素，我们可以从服务器端、传输端和页面端分别进行网站速度优化。

　　1. 服务器优化

　　服务器优化就是从动态语言执行、数据库查询、数据存储等方面进行优化，这些工作复杂而且关系到网站全局整站运行，因此需要谨慎，当然服务器端优化具体难度和效率取决于网站管理员的水平。由于没有操作过公司服务器，因此就不做详细介绍，仅以我自己的博客服务器端优化为例说明：

　　1) 用HTML语言代替PHP语言直接输出信息，比如语言、名称、固定URL地址等;

　　2) 定期进行数据库修复和优化;

　　3) 利用Expires为网页静态元素设置过期时间;

　　4) 设置服务器和页面缓存;

　　5) 启用Gzip压缩;

　　6) 其他有效但未实施的方法：利用CDN技术为网站提速;缩小Cookie，针对WEB组件使用与域名无关的Cookie;

　　2. 传输优化

　　传输优化是为了提高数据传输速度，减少传输过程中的等待。

　　1) 字节优化。将页面加载过程中传输的所有数据压缩，HTML代码压缩、JS压缩、CSS压缩、图片压缩等。

　　2) 缓存优化。设置有效的服务器和页面缓存时间。

　　3) HTTP优化。A.合并CSS和JS，减少站内CSS和JS的HTTP请求;B.利用CSS Sprites减少图片HTTP请求;C.减少站外主机DNS查询;D.避免不必要的HTTP和JS跳转;E.减少404错误。

　　3. 页面优化

　　页面优化主要围绕网站页面元素进行，常见的页面元素有图片、CSS代码、JS代码、HTML代码等。

　　1) 图片优化。选择合适的图片类型并压缩，图片颜色丰富采用JEG格式;颜色数少或有透明通道适合用PNG格式;LOGO图片用PNG-8格式或GIF比较适合。

　　2) CSS代码优化。去除不使用的CSS代码;使用简写精简CSS代码;将CSS代码通过外部文件加载;CSS链接位置在页面顶部优先加载。

　　3) JS代码优化。将JS代码通过外部文件加载;优化JS顺序，优先加载重要JS;将JS放置在页面底部。

　　4) HTML代码优化。减少注释信息;去除无用代码;减少页面空行。

　　5) DOM优化：减少DOM个数，降低浏览器解析压力;设置合理的DOM顺序，把重要的DOM放前面。

　　做网站前端优化的朋友一般都知道两个工具：谷歌的Page Speed和雅虎的Yslow，大家可以参考这两个工具的优化建议，在GTmetrix的Breakdown标签中有具体信息，经过优化之后的网站速度都会有不同程度提高，以下是我博客的在谷歌Page Speed和雅虎Yslow的得分，评分是次要的，主要的目的是为用户提供良好的用户体验。