基于前端的Web性能优化.docVIP

基于前端的Web性能优化 　　摘要：随着互联网的高速发展，用户与页面的交互越来越复杂，会话时间也越来越长，同时人们对互联网的依赖性日益增强，网站性能逐渐成为Web产品市场成败和评测网站用户体验的重要指标之一。文中着重从前端的角度对Web性能优化的方法和策略进行分析与研究。 　　关键词：前端；Web；性能优化；Gzip 　　中图分类号：TP393文献标识码：A文章编号：1009-3044(2011)16-3811-03 　　Website Performance Optimization Based on Front-End 　　KANG Chang-an, CHEN Yu-hong 　　(School of Management, China University of Mining and Technology, Xuzhou 221116, China) 　　Abstract：With the rapid development of Internet, the interaction between with users and the page is more and more complicated, the session time is getting longer. While people are increasingly depending on the Internet, website performance becomes more and more important to the product. This essay focuses on the method of website performance optimization from the perspective of front-end. 　　Key words: Front-End; Web; performance optimization; Gzip 　　在Google，500毫秒的延迟将失去20%的流量；在Bing，慢2秒将导致收入降低4.3%；在Amazon，慢100毫秒将丢失1%的交易量……反之网站速度越快，越有利于提升用户体验和流量。随着网络技术的快速发展，Web 2.0把越来越多的内容加到网页中，图片、Flash、JavaScript脚本和CSS样式表等被广泛使用。如何能够将页面更快的呈现给用户，成为很多公司面临的挑战。根据Yahoo!公司的性能黄金法则，在页面呈现的过程中，只有10%~20%的时间花费在了下载HTML文档上，其余的80%~90%时间花在了下载页面中的所有组件（图片、脚本、样式表、Flash等）上[1]。基于此，本文将着重从前端的角度分析如何对网站性能进行优化。 　　1 减少HTTP请求 　　浏览器和服务器之间通过HTTP协议相互通信，HTTP响应包含状态码、头和响应体，即便请求返回的内容为空，请求也依旧包含大量的头部信息[2]。根据黄金法则，改善页面呈现时间最简单的途径就是减少页面中组件的数量，并由此减少HTTP请求的数量[3]。 　　1.1 合并静态文件 　　网站中的静态文件主要包括脚本和样式表，如果遵循软件工程的思想和模块化原则将代码分割成多个小文件，则会降低浏览器的性能，因为每个文件都会导致一个额外的HTTP请求。如果将多个文件合并到一个文件中，可以减少HTTP请求的数量并缩短最终响应时间，提高网站性能。常用的实现方式如下： 　　 　　 　　 　　将上述代码调整为： 　　script src=/combo.php? 　　/a.js 　　/b.js 　　/c.js 　　在combo.php中获取所需的文件名并进行合并，一次发送到客户端。这种方式大大的降低了HTTP请求数，同时也减少了URL代码量，这对于Web性能优化来讲至关重要。同时也不会对原有文件的部署产生影响，开发人员人可以采用原有模式进行模块化开发。 　　1.2 CSS Sprites 　　CSS Sprites是将页面中一些背景图片合并到一张单独的图片中，配合使用CSS的“background-position”和“background-repeat”属性将背景图片放置到HTML元素期望的位置上，其中“background-position”可以用数字精确的定位出背景图片的位置。 　　使用CSS Sprites大大减少了页面对图片的请求数目，能够有效的减少HTTP请求的数量。但也同时增加了开发人员合并图片的时间成本，后期的维护成本也同样会增加。 　　2 减少网络传输量 　　除了减少HTTP请求的数量，也可以通过减少每次HTTP请求产生的响应包的大小来加快响应时间。 　　2.1 使用G