网站建设前端和后台性能优化方法

1、减少HTTP请求数量 (Minimize HTTP Requests)

80%的用户响应时间被花费在前端，而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flash这些组件。减少这些组件的数量就可以减少展示页面所需的请求数，而这是提高网页响应速度的关键。在提供丰富的页面展现的同时，减少Http请求数量：合并文件，通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中，从而减少Http请求的数量。当不同页面需要应用不同的脚本或样式时，合并这些文件会是一个很大的挑战，不过在发布网站时进行这种合并，将是提高网站响应速度的重要一步。

CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中，使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。Image maps把多张图片组合成为一张图片。图片的总大小是不变的，但减少Http请求数会提高页面的响应速度。Image maps只能用于图片在网页中相邻的情况，比如导航条。制定image maps中的图片坐标是个很麻烦的过程，而且容易出错。同时给导航使用image maps也并不易读，所以并不推荐使用。

减少页面的Http请求数量是第一步，而且对于提高用户初次访问体验是最重要的一步。

2、 给头部添加一个失效期或者Cache-Control (Add an Expires or a Cache-Control Header

这条法则包含两方面：

    * 对于静态组件：把头部的缓存期设为某个遥远的未来，使其能够“永不过期”。

    * 对于动态组件：使用适当的Cache-Control头部帮助浏览器执行特定的请求。

网页设计越来越丰富，页面里包含了越来越多的脚本、样式表、图片和Flash。页面的初次访问者也许会发送多个HTTP请求，但通过给头部添加失效期，你可以使那些组件被缓存。这会避免下次浏览页面时的不必要的HTTP请求。给图片文件的头部设置失效时间更为常用，但包括脚本文件、样式表和 Flash之类的所有组件的头部都应该被设置失效时间。

3、把脚本放在最后(Put Scripts at the Bottom)

脚本可能会堵塞并发的下载。HTTP/1.1规范建议浏览器在每个域名下只进行两个并发下载。如果你把图片放在多个域名下，可以实现多于两个的并发下载。当脚本被下载时，即使使用不同的域名。浏览器也不会进行任何其它的下载。

有些情况下把脚本放到底部并不太容易。比如，脚本使用了document.write 来添加部分页面中的内容，就不能放到页面中更后面的位置。还可能有作用域的问题。很多情况下，还有一些变通的方法。

通常的建议是使用延迟脚本。DEFER属性表明脚本不包含document.write，而且提示浏览器继续展现。不幸的是，Firefox不支持DEFER属性。IE中，脚本可以被延迟，但并不如你期望的那么久。如果一个脚本可以被延迟，那么它也可以被放在页面的底部。这会让你的页面加载的更快。

4 、Gzip压缩组件(Gzip Components)

前台工程师的决策能够显著的减少在网络上传输 HTTP请求和响应花费的时间。确实，终端用户的带宽速度、Internet服务提供商和连接交换机的服务器这些因素都是开发小组所不能控制的。但还有一些其它因素会影响响应的时间，比如压缩文件，就会减少HTTP响应的大小从而减少响应的时间。从HTTP/1.1开始，Web客户端就被设定为支持HTTP请求的头部中

浏览器和代理会有一些已知的问题，可能导致浏览器的预期内容和获得的实际压缩内容不匹配。幸运的是，这种情况随着旧浏览器的使用者减少而减少。 Apache的模块可以通过自动添加适当的变化响应文件头来解决这些问题。

服务器会根据文件类型选择gzip压缩的内容，但一般情况下，服务器选择压缩的内容会过于局限。大部分网站会压缩它们的Html文档，而压缩脚本和样式表也是值得一做的，但很多网站并没有这样做，事实上，压缩在包括 XML和JSON在内的任何文本响应都是值得的。

5、使用内容分布式网络 (Use a Content Delivery Network)

用户连接你的网站服务器的速度影响响应的快慢。把你的网站布置在多台分布于不同地域的服务器上，会让用户觉得你的页面加载速度更快。

用户80-90%的访问时间被花费在下载页面中的图片、样式表、脚本、Flash这些组件上。这是网站展示的黄金法则。那么与其重新设计网站的结构，不如先实现这些静态组件的分布。这不仅仅可以大幅减少响应时间，而且由于内容分布式网络（content delivery networks）的存在，这将是个很简单的工作。

内容分布式网络（CDN）是一系列分布在不同地域的服务器的集合，能够更有效的给用户发送信息。它会根据一种衡量网域距离的方法，选取为某个用户发送数据的服务器。比如，到达用户最少跳或者最快相应速度的服务器会被选中。

6、把样式表放在前面(Put Stylesheets at the Top)

关心网站设计的前台工程师通常希望页面能够逐步加载；即，我们希望浏览器能够把已经获得的内容尽快展现。这对于内容很多的页面以及网络连接较慢的用户尤为重要。给予用户视觉上的反馈（比如进度提示）的重要性，已经经过了很详尽的论证。而对于我们来说，Html 页面本身就可以作为进度提示！当浏览器逐步加载页面时，头部、导航条、顶部的logo等等这些都可以作为对正在等待页面的用户的可视的反馈。而这会从整体上提高用户体验。

把样式表放在文档的最后，会导致包括IE在内的大部分浏览器不进行逐步呈现。浏览器为了避免当样式改变时重绘元素而中止呈现。用户会十分无聊的看到一个空白的页面。

-------北京网站建设------