网站前端性能优化总结.docx

网站前端性能优化总结

第一篇：网站前端性能优化总结一、服务器侧优化1.添加Expires或Cache-Control信息头某些经常使用到、并且不会经常做改动的图片（banner、logo等等）、静态文件（登录首页、说明文档等）可以设置较长的有效期（expirationdate），这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存，文档就可以从缓存（除已经过期）而不是从服务器读取。接着，客户端考察缓存中的副本，看看是否过期或者失效，以决定是否必须从服务器获得更新。各个容器都有针对的方案,，以Apache为例：ExpiresActiveOnExpiresByTypeimage/gif“accessplus1weeks”表示gif文件缓存一周，配置可以根据具体的业务进行调整，具体配置可以参考：http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_expires.html2.压缩内容对于绝大多数站点，这都是必要的一步，能有效减轻网络流量压力。DeflateCompressionLevel9AddOutputFilterByTypeDEFLATEtext/htmltext/plaintext/xmlapplication/x-httpd-phpAddOutputFilterDEFLATEhtmlhtmxmlphpcssjs表示zlib在压缩时可以最大程度的使用内存，压缩html、文本、xml和php这几种类型的文件，指定扩展名为html、htm、xml、php、css和js的文件启用压缩。具体配置可以参考：http://lamp.linux.gov.cn/Apache/ApacheMenu/mod/mod_deflate.html3.设置Etags在使用etags之前，有必要复习一下RFC2068中规定的返回值200和304的含义：200--OK304--NotModified客户端在请求一份文件的时候，服务端会检查客户端是否存在该文件，如果客户端不存在该文件，则下载该文件并返回200；如果客户端存在该文件并且该文件在规定期限内没有被修改（Inode，MTime和Size），则服务端只返回一个304，并不返回资源内容，客户端将会使用之前的缓存文件。而etags就是判断该文件是否被修改的记号，与服务器端的资源一一关联，所以etags对于CGI类型的页面缓存尤其有用。下图是优化前的首页：（注意，此时没有压缩首页图片，即使使用了缓存，仍需要5s左右的时间）化前的某页面需要注意的是，使用etags会增加服务器端的负载，在实际应用中需要自行平衡。二、Cookie优化1.减小Cookie体积HTTPcoockie可以用于权限验证和个性化身份等多种用途。coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要。使cookie体积尽量小；在合适的子域名上设置bookie，以免影响其他子域名下的响应；设置合理的过期时间，去掉不必要的cookie。下面对比一下各个网站的cookie：图中可以看出，6K的cookie显然是不必要的。2.对于页面内容使用无coockie域名当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。因此它们只是因为某些负面因素而创建的网络传输。所以你应该确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。例如，域名是3.切分组件到多个域主要的目的是提高页面组件并行下载能力，但注意，也不要同时使用过多的域名，否则就会出现第一条DNSlookup过多的问题，一般情况下两个域名就可以了。4.杜绝http404错误对页面链接的充分测试加上对Web服务器error日志的不断跟踪可以有效减少404错误，并提升用户体验。后记：这次总结给我带来的启发并不在于提升系统性能性能本身，提升性能只是一个很表面上的东西，网上的方法有很多，测试的方法也有很多，照着都做一遍，性能确实会有所提升，但是这种知其然而不知其所以然的性能提升是没有意义的，这便是本文的目的所在。第二篇：Web前端页面性能优化小结Web前端页面性能优化小结Web前端页面性能优化小结影响用户访问的最大部分是前端的页面。网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给