企业内部培训资料 网站优化建议规范.docx

上海盛大在线有限公司内容分发部______________________________网站优化建议2010年6月制订版本控制文件状态：[√] 草稿[ ] 正式发布[ ]正在修改[ ] 注销文档编号：制字2010106第 1 号当前版本：V1.2作 者：袁巧艳完成日期：备 注：修改历史记录日期版本说明作者2010-06-22V1.0初稿袁巧艳2010-7-10V1.1增加了相关例子袁巧艳2010-7-13V1.2修改了部分内容贾路概述随着WEB2.0时代的来临，网络的也得到了空前的发展，前端用户体验变得越来越重要。WEB性能优化是个大话题，也是个值得运维人员持续跟踪的话题。目的本文主要对网站的优化方法进行阐述，从而给出网站的优化建议，并对优化建议进行规范，从而提高WEB性能，达到提高用户体验的目的。适用范围接入CDN的所有网站。Web页面性能方法网站的划分一般为为二，前端和后台。后台是用来实现网站功能，如用户注册、用户发帖等，前端是后台功能的表现，前端包括图片、脚本、flash、视频等，因此，除了后台需要在性能上优化外，前端的页面也需要在性能优化上多下功夫，这样才能给我们的用户带来更好的体验。前端页面性能优化方法前端页面主要包括html、css、javascript，其实html就是网页的内容，文字，图片flash，视频等。针对前端页面的内容，结合yslow优化网站规则，提出对前端页面性能优化的建议。HTML静态化众所周知，效率最高、消耗最小的是纯静态化的html页面，因此尽可能的将网站上的页面采用静态页面来实现。网站静态化是网站优化的重要手段之一，同时，html静态化是一些缓存策略使用的手段，建议将频繁使用数据库查询但是内容更新很小的应用，用html静态化来实现，如一些网站的公用设置信息，这样可以避免大量的数据库访问请求。动、静态分离对于web服务器而言，图片是罪消耗资源的，因此，有必要将图片与页面进行分离，这是很多网站都会采用的策略，设置专门的图片服务器和域名，可以降低提供页面访问请求的服务器压力，并且可以保证网站不会因为图片问题而崩溃。减少http请求由于http协议的无状态性，用户每一次访问，都会重新向服务器请求所有文件，包括页面中的图像、样式表、脚本、Flash等；而大量http请求的累加，正是影响网站速度的主要原因之一。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键。减少页面元素的方法就是简化页面设计，可以从以下几个方面考虑：合并文件：通过把所有的脚本放到一个文件中来减少HTTP请求；可以简单的把所有的css文件都放入一个样式表中。虽然当脚本或者样式表在不同页面中使用时需要做不同的修改，相对比较麻烦，但这是改善页面性能的关键一步。Css sprites：减少图像请求的有效方法，将所有的背景图像都放到一个图片文件中，然后通过CSS的background-image 和background-position 属性来显示图片的不同部分；图片整合：将多张图片整合到一张图片中，虽然文件的总大小不会改变，但可以减少HTTP请求的次数；该方法只适合图片的所有组成部分在页面中是相邻在一起的，如导航栏，该方法确定图片的坐标比较繁琐并且容易出错。减少页面的HTTP请求次数是首要步骤，这是改进首次访问用户等待时间的最重要的方法。避免重定向每一次的重定向都会重新发送Header请求，在用户和HTML文档中间增加一个中定向，会拖延页面中所有元素的显示，因为在HTML文件被夹在前任何文件都不会被下载，因此，重定向会降低用户体验。有一种重定向往往很容易被忽视却又很浪费响应时间，这种现象发生在URL本应该有（/）而被忽略掉时；这时会返回一个301的状态吗然后重新发起一次请求。如和/，前者比后者多了一步重定向。优化浏览器加载将css放在页面顶部加载将CSS放在页面head部分允许浏览器渐进的渲染页面，使核心的页面内容今早显示出来，缩短用户等待空白页面的时间，改善用户体验。将js放在页面底部加载由于脚本下载是串行的，因此，当一个脚本下载的时候，浏览器将无法下载其他资源，将脚本放在页面底部进行处理可以加快页面加载的速度，但一些功能性的脚本实现起来可能有些困难。缓存AJAX请求在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。提高Ajax性能的最重要方法就是使响应具有可缓存性。Ajax缓存通常有如下方法：在服务端加 header(Cache-Control: no-cache, must-revalidate); 　　在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(If-Modified-Since,0); 　　在ajax发送请求前加上 xmlHttpRequ