web前端性能优化简单谈谈前端性能优化

应用解析：如何改善调优Web服务器性能

因此Web的性能已经成为判断一个网站成功与否的一个重要评估标准。

而Web服务器则是决定Web性能的重要环节。

Web服务器性能就是指一个Web服务器响应用户请求的能力。

为了提高Web服务器的性能人们进行了诸多尝试，已经取得了可喜的成果。

本文通过对前人研究结果的分析，提出了在具体应用环境中优化Web服务器的方法和策略。

Web服务器概述 Web系统在现在网络中广泛使用，而Web服务器则是Web系统的一个重要组成部分。

完整的Web结构应包括：HTTP协议，Web服务器，通用网关接口CGI、Web应用程序接口、Web浏览器。

Web服务器是指驻留在因特网上某种类型计算机的程序。

它是在网络中信息提供者基干HTTP的为实现信息发布、资料查询、数据处理等诸多应用搭建基本平台的服务器，其主要功能是提供网上信息浏览服务。

当Web浏览器（客户端）连到服务器并请求文件时，服务器将处理该请求并将文件发送到该浏览器上，附带的信息会告诉浏览器如何查看该文件（即文件类型）。

Web服务器在web页面处理中大致可分为三个步骤：第一步，web浏览器向一个特定的服务器发出Web页面请求；第二步，Web服务器接收到web页面请求后，寻找所请求的web页面，并将所请求的Web页面传送给Web浏览器；第三步，Web服务器接收到所请求的web页面，并将它显示出来。

web服务器不仅能够存储信息，还能在用户通过Web浏览器提供的信息的基础上运行脚本和程序。

在Web上，常见的大多数表单核搜索引擎上都是用的是CGI脚本。

影响web应用服务器性能的因素 Web服务器的性能就是指一个Web服务器响应用户请求的能力，服务器的性能对于一个Web系统来说至关重要。

为了提高Web服务器的性能人们进行了许多尝试，也采用了许多技术和方法，但是这些技术和方法往往缺乏适用性。

通过对前人的研究分析可以发现，在web服务器的优化方而存在这种问题的原因主要有两个：一方面是服务器性能评测造成的，一方面是选用优化方案时考虑不全面造成的。

现行的服务器性能评测工具在对Web服务器进行评测时，其实是由一台或几台计算机模拟客户机，与被测的Web服务器进行通信，它们其实组成的只是一个局域网的环境，这与真正的广域网的环境有一定的差别。

另外，评测工具在选择网络负载时，虽然已经尽可能的接近真实负载，但是与持续的高频率负载要求仍有差距；再者，在性能测试指标的选择与分析上也不够合理，造成了分析结果不够公正、可靠。

而在选用优化Web服务器的方法时，往往只是考虑Web服务器这一个方面，很少结合具体的应用环境。

所以就造成了评测结果不够科学，应用环境考虑不够全面，Web服务器性能优化缺乏针对性。

因此在具体的应用环境下优化Web服务器的性能需要另外考虑以下两个主要因素：网络特性和Web负载特点。

网络特性是指web服务器所在网络情况，是广域网还是局域网，是高速网络(传输速率在1OOMb／s以上的网络就叫做高速网络)还是低速网络，在不同的网络中相关的传输数据的类型、网络相应时间、吞吐量，利用率等网络特性不尽相同，所以要加以区分，具体情况具体分析。

而在Web负载特点方面，由于在对Web服务器进行评测时，一个非常关键的因素就是Web负载的选择。

评测工具虽然有多种，但是它们都在选择负载上做足了功课。

如何优化Web网站性能？

从我博客给你复制的

一、前端优化

网站性能优化是一个很综合的话题，涉及到服务器的配置和网站前后端程序等各个方面，我只是从实际经历出发，分享一下自己所尝试过的网站性能优化方法。

之所以在标题上挂一个web2.0，是因为本文更偏重于中小网站的性能优化，我所使用的系统也是典型web2.0的LAMP架构。

首先讲讲前端的优化，用户访问网页的等待时间，有80%是发生在浏览器前端，特别是页面和页面中各种元素（图片、CSS、Javascript、 flash…）的下载之上。

因此在很多情况下，相对于把大量的时间花在艰苦而繁杂的程序改进上，前端的优化往往能起到事半功倍的作用。

雅虎最近将内部使用的性能测试工具yslow向第三方公开，并发布了著名的网站性能优化的十三条规则，建议你下载并安装yslow，并作为测评网站优化效果的工具。

下面我挑其中特别有价值的具体说明一下优化的方法：

对于第一次访问您网站，尚未在浏览器cache中缓存您网站内容的用户，我们可以做的事情包括：

1）减少一个页面访问所产生的http连接次数 对于第一次访问你网站的用户，页面所产生的http连接次数是影响性能的一个关键瓶颈。

对策： - 尽量简洁的页面设计，最大程度减少图片的使用，通过放弃一些不必要的页面特效来减少javascript的使用。

- 使用一些优化技巧，比如利用图片的背景位移减少图片的个数；image map技术；使用Inline images将css图片捆绑到网页中。

- 尽量合并js和css文件，减少独立文件个数。

2) 使用gzip压缩网页内容 使用gzip来压缩网页中的静态内容，能够显著减少用户访问网页时的等待时间（据说可达到60%）。

主流的web服务器都支持或提供gzip压缩，如果使用apache服务器，只需要在配置文件中开启 mod_gzip（apache1.x）或mod_deflate(apache2.x)即可。

凡是静态的页面，使用gzip压缩都能够显著提高服务器效率并减少带宽支出，注意图片内容本身已经是压缩格式了，务必不要再进行压缩。

3）将CSS放在页面顶端，JS文件放在页面底端 CSS的引用要放在html的头部header中，JS文件引用尽量放在页面底端标签的后面，主要的思路是让核心的页面内容尽早显示出来。

不过要注意，一些大量使用js的页面，可能有一些js文件放在底端会引起一些难以预料的问题，根据实际情况适当运用即可。

4）使JS文件内容最小化 具体来说就是使用一些javascript压缩工具对js脚本进行压缩，去除其中的空白字符、注释，最小化变量名等。

在使用gzip压缩的基础上，对js内容的压缩能够将性能再提高5%。

5）尽量减少外部脚本的使用，减少DNS查询时间 不要在网页中引用太多的外部脚本，首先，一次dns的解析过程会消耗20-120毫秒的时间；其次，如果在页面中引用太多的外部文件（如各种广告、联盟等代码），可能会因为外部文件的响应速度而将你的网站拖得很慢。

如果不得不用，那么就尽量将这些脚本放在页脚吧。

不过有一点需要提及，就是浏览器一般只能并行处理同一域名下的两个请求，而对于不同子的域名则不受此限制，因此适当将本站静态内容（css,js）放在其他的子域名下（如 ）会有利于提高浏览器并行下载网页内容的能力。

对于您网站的经常性访问用户，主要的优化思路就是最大限度利用用户浏览器的cache来减少服务器的开销。

1）在header中添加过期时间(Expires Header) 在header中给静态内容添加一个较长的过期时间，这样可以使用户今后访问只读取缓存中的文件，而不会与服务器产生任何的交互。

不过这样做也存在一些问题，当图片、CSS和js文件更新时，用户如果不刷新浏览器，就无法获得此更新。

这样，我们在对图片、css和js文件修改时，必须要进行重命名，才能保证用户访问到最新的内容。

这可能会给开发造成不小的麻烦，因为这些文件可能被站点中的许多文件所引用。

flickr提出的解决办法是通过url rewrite使不同版本号的URL事实上指向同一个文件，这是一个聪明的办法，因为url级别的操作效率是很高的，可以给开发过程提供不少便利。

要理解为什么这样做，必须要了解浏览器访问url时的工作机制： a. 第一次访问url时，用户从服务器段获取页面内容，并把相关的文件（images,css,js…）放在高速缓存中，也会把文件头中的expired time,last modified, ETags等相关信息也一同保留下来。

b. 用户重复访问url时，浏览器首先看高速缓存中是否有本站同名的文件，如果有，则检查文件的过期时间；如果尚未过期，则直接从缓存中读取文件，不再访问服务器。

c. 如果缓存中文件的过期时间不存在或已超出，则浏览器会访问服务器获取文件的头信息，检查last modifed和ETags等信息，如果发现本地缓存中的文件在上次访问后没被修改，则使用本地缓存中的文件；如果修改过，则从服务器上获取最新版本。

我的经验，如果可能，尽量遵循此原则给静态文件添加过期时间，这样可以大幅度减少用户对服务器资源的重复访问。

2）将css和js文件放在独立外部文件中引用 将css和js文件放在独立文件中，这样它们会被单独缓存起来，在访问其他页面时可以从浏览器的高速缓存中直接读取。

一些网站的首页可能是例外的，这些首页的自身浏览可能并不大，但却是用户访问网站的第一印象以及导向到其他页面的起点，也可能这些页面本身使用了大量的ajax局部刷新及技术，这时可以将 css和js文件直接写在页面中。

3）去掉重复的脚本 在IE中，包含重复的js脚本会导致浏览器的缓存不被使用，仔细检查一下你的程序，去掉重复引用的脚本应该不是一件很难的事情。

4）避免重定向的发生 除了在header中人为的重定向之外，网页重定向常在不经意间发生，被重定向的内容将不会使用浏览器的缓存。

比如用户在访问，服务器会通过301转向到/，在后面加了一个“/”。

如果服务器的配置不好，这也会给服务器带来额外的负担。

通过配置apache的 alias或使用mod_rewrite模块等方法，可以避免不必要的重定向。

还有一些，比如使用CDN分发机制、避免CSS表达式等、避免使用ETags等，因为不太常用，这里就不再赘述了。

做完了上述的优化，可以试着用yslow测试一下网页的性能评分，一般都可以达到70分以上了。

当然，除了浏览器前端和静态内容的优化之外，还有针对程序脚本、服务器、数据库、负载的优化，这些更深层次的优化方法对技术有更高的要求。

本文的后半部分将重点探讨后端的优化。

二、后端优化

上次写完web2.0网站前端优化篇之后，一直想写写后端优化的方法，今天终于有时间将思路整理了出来。

前端优化可以避免我们造成无谓的服务器和带宽资源浪费，但随着网站访问量的增加，仅靠前端优化已经不能解决所有问题了，后端软件处理并行请求的能力、程序运 行的效率、硬件性能以及系统的可扩展性，将成为影响网站性能和稳定的关键瓶颈所在。

优化系统和程序的性能可以从以下的方面来入手：

1）apache、mysql等软件的配置的优化 尽管apache和mysql等软件在安装后使用的默认设置足以使你的网站运行起来，但是通过调整mysql和apache的一些系统参数，还是可以追求更高的效率和稳定性。

这个领域中有很多专业的文章和论坛（比如： /），要想掌握也需要进行深入的研究和实践，这里就不重点讨论了。

2）应用程序环境加速 这里仅以我最常应用的php开发环境为例，有一些工具软件可以通过优化PHP运行环境来达到提速的目的，其基本原理大致是将PHP代码预编译并缓存起来，而不需要改变任何代码，所以比较简单，可以将php的运行效率提升50%以上。

比较常用的免费php加速工具有：APC( /package-info.php?package=APC)、Turck MMCache（ ）、php elebrator(elerator.co.uk)，还有收费的Zend Performance Suite

3）将静态内容和动态内容分开处理 apache是一个功能完善但比较庞大的web server，它的资源占用基本上和同时运行的进程数呈正比，对服务器内存的消耗比较大，处理并行任务的效率也一般。

在一些情况下，我们可以用比较轻量级的web server来host静态的图片、样式表和javascript文件，这样可以大大提升静态文件的处理速度，还可以减少对内存占用。

我使用的web server是来自俄罗斯的nginx，其他选择方案还包括lighttpd和thttpd等。

4）基于反向代理的前端访问负载均衡 当一台前端服务器不足以应付用户访问时，通过前端机实现web访问的负载均衡是最快速可行的方案。

通过apache的mod_proxy可以实现基于反向代理的负载均衡，这里推荐使用nginx做代理服务器，处理速度较apache更快一些。

5）应用缓存技术提高数据库效能，文件缓存和分布式缓存 数据库访问处理并发访问的能力是很多网站应用的关键瓶颈，在想到使用主从结构和多farm的方式构建服务器集群之前，首先应该确保充分使用了数据库查询的缓存。

一些数据库类型（如mysql的innoDB）自身内置对缓存的支持，此外，还可以利用程序方法将常用的查询通过文件或内存缓存起来。

比如通过 php中的ob_start和文件读写函数可以很方便的实现文件形式的缓存，而如果你拥有多台服务器，可以通过memcache技术通过分布式共享内存来对数据库查询进行缓存，不仅效率高而且扩展性好，memcache技术在livejournal和等知名网站应用中都得到了检验。

6）服务器运行状态的检测，找到影响性能的瓶颈所在 系统优化没有一劳永逸的方法，需要通过检测服务器的运行状态来及时发现影响性能的瓶颈，以及可能存在的潜在问题，因为网站的性能，永远取决于木桶中的短板。

可以编写一些脚本来检测web服务的运行，也有一些开源的软件也提供了很好的功能

7）良好的扩展架构是稳定和性能的基础 一些技巧和窍门可以帮你度过眼前的难关，但要想使网站具备应付大规模访问的能力，则需要从系统架构上进行彻底的规划，好在很多前人无私的把他们架构 网站的经验分享给我们，使我们可以少走甚多弯路。

我最近读到的两篇有启发的文章： - 从LiveJournal后台发展看大规模网站性能优化方法 - Myspace的六次重构

最后不得不提到程序编码和数据库结构对性能的影响，一系列糟糕的循环语句，一个不合理的查询语句、一张设计不佳的数据表或索引表，都足以会使应用程序运行的速度成倍的降低。

培养全局思考的能力，养成良好的编程习惯，并对数据库运行机制有所了解，是提高编程质量的基础。

如何进行多终端Web前端优化

1、请减少HTTP请求基本原理 2、请正确理解 Repaint 和 Reflow 3、请减少对DOM的操作 4、使用JSON格式来进行数据交换 5、高效使用HTML标签和CSS样式

简单谈谈前端性能优化

这个话题，贼大。

个人认为：核心在于，HTTP 请求的减少和请求包大小的减少再加上对代码的重构。

1. HTTP 请求的减少，瞧瞧现在的前端工程化，工程化的作用之一正是将那些散乱的 js 、css 库全部都集成起来，压缩成一个文件，这么多文件压缩成一个，这请求不就减少了么~还有一个就是”精灵图技术“也是优化的体现，就不展开了。

2. 请求包大小的减少，这个简直是能减就减啊，比如以前的时候，我们需要将图片直接发送到浏览器上是吧，现在可以不用！如果只是发生一段代码到客户的浏览器上，然后客户用自己的机器生成图片，这得有多快啊，毕竟一段代码大还是一张图片大还是很容易分清的，特别的是 GIF 图！这时候用上 svg 或是 canvas 技术，就不需要发送巨大的 GIF 图片了，只需要调用浏览器的资源生成图像即可。

3. 重构，反正不满意重构就是了，满意了加功能然后继续重构就是了。

但这都是还只是皮毛啊这是，如果用到框架，那还要讲到框架的优化，因为前端框架的优化同样是性能优化，那都能写几十页了都...... 如果再深入讲到浏览器自身......啊，要死了死了，技术是无穷的，命是有限的！