Web性能优化前端方案探究.docVIP

Web性能优化前端方案探究 　　摘要：分析了某地区设施葡萄害虫诊断与防治专家系统在Web性能方面存在的问题，对一般Web页面请求原理和过程进行了分析，提出了从输入URL到页面呈现需要的5个步骤，并且对这5个步骤进行了剖析，指出了导致网页响应变慢的环节，简要总结了Web前台的性能优化方案，并给出了相应建议。 关键词：Web性能优化；响应时间；页面请求原理；Web前台 中图分类号：TP393 文献标识码：A 文章编号：1672-7800（2013）005-0116-02 0、引言 徐州地区设施葡萄害虫诊断与防治专家系统是通过Internet向广大用户提供专家的分析诊断服务。该系统运行后不久，用户反映系统的打开速度很慢，这里首先排除网络带宽和服务器硬件性能方面的因素，到底是什么原因造成的呢？为缩短页面的响应时间，改进用户体验，笔者首先使用工具查看了系统页面加载时间情况，如图1所示。 对图1进行分析，可以看到，加载HTML文档只占了总响应时间的5%，其它95%响应时间用来下载JavaS-cript、CSS和图片等组件。所以本专家系统Web前端方面有很大的优化空间，因此，笔者将从Web的前端优化方面给出Web的性能优化方案。 1、页面请求原理和过程分析 从输入URL到页面呈现需要如下5个步骤：①输入URL地址或者点击URL的一个链接；②浏览器根据URL地址，结合DNS解析出URL对应的IP地址；③发送HTTP请求；④开始连接请求的服务器并且请求相关的内容；⑤浏览器解析从服务器端返回的内容，并且把页面显现出来。 上述基本上就是一个页面从请求到实现的基本过程，下面来剖析这个过程。 当输入URL之后，浏览器就要知道这个URL对应的IP是什么，只有知道了IP地址，浏览器才能准确把请求发送到指定的服务器的具体IP和端口号上面。浏览器的DNS解析器负责把URL解析为正确的IP地址。这个解析的工作是要花时间的，而且在这个解析的时间段内，浏览器不能从服务器那里下载到任何东西。浏览器和操纵系统提供了DNS解析缓存支持。 当获得了IP地址之后，浏览器就向服务器发送HT—TP的请求，过程如下：①浏览器通过发送一个TCP的包，要求服务器打开连接；②服务器也通过发送一个包来应答客户端的浏览器，告诉浏览器连接打开了；③浏览器发送一个HTTP的GET请求，这个请求包含了很多的东西，例如我们常见的Cookie和其它的head头信息。这样，一个请求就算是发过去了。 请求发送去之后，服务器端的程序把最后的结果发送到客户端。 其实首先到达浏览器的就是HTML文档，是纯粹的HTML代码，不包含图片、脚本、CSS等，也就是页面的HTML结构，因为此时返回的只是页面的HTML结构。这个HTML文档发送到浏览器的时间极短，一般只占整个响应时间的10%左右。 之后，页面的基本框架就在浏览器中，下一步为浏览器解析页面的过程，一步步从上到下解析HTML的框架。 如果此时在HTML文档中，遇到了img标签，那么浏览器就会发送HTTP请求到这个img响应的URL地址去获取图片，然后呈现出来。如果在HTML文档中有很多的图片、flash，那么浏览器就会一个个地请求，然后呈现，如果每个图片都要请求，那么就要进行之前所说的那些步骤：解析URL、打开TCP连接等。打开连接也需要消耗资源，就像在进行数据库访问一样，也需尽可能少开数据库连接，多用连接池中的连接。道理一样，TCP连接也是可以重用的。HTTP 1.1提出了持久连接（PersistentConnection）的概念，也就是说同一条HTTP连接可以同时处理多个请求，减少TCP连接。 当页面的HTML框架载入之后，浏览器就开始解析页面中的标签，从上到下开始解析。 首先是head标签的解析，如果发现在head中有要引用的JavaScript脚本，那么浏览器此时就开始请求脚本，此时整个页面的解析过程即停止下来，一直到JavaScript请求完毕。之后页面接着向下解析，如解析body标签，如果在body中有img标签，那么浏览器就会请求img的src对应的资源，如果有多个img标签，那么浏览器就一个个解析，解析不会像JavaScript那样等待，会并发下载。 2、Web前台优化规则 2.1 尽量减少HTTP请求 有几种常见的方法能切实减少HTTP请求：①合并脚本和样式文件，如可以把多个CSS文件合成一个，把多个JavaScript文件合成一个；②CSS Sprites利用CSSbackground相关元素进行背景图绝对定位，把多个图片合成一个图片。 2.2 使用浏览器缓存 在用户浏览网站的不同页面时，很多内容是重复的，比如相同的