《高性能网站建设指南》

纯手动搬运工《高性能网站建设指南》,介绍14条高性能网站建设的规则。

事实上我们在谈论如何搭建文档的后台服务的时候,往往容易忽略前端处理的一些细节。如果我们把两者相互结合好了,肯定能把网站的性能发挥到极致。

那么我们先来想一下,用户访问web页面的时候时间都花到哪儿了?

1、大量的HTTP请求并行发生。
2、加载各式各样的脚本以及组件。
3、…

下面我们一条一条的分析高性能网站建设的规则


减少HTTP请求

打开chrome的开发工具,通过Network我们看到访问一个网站产生了大量的HTTP请求,器大致的来源可以分为网站图片图标、css样式表、各种脚本…

针对这些我们可以通过下面几种方式优化:

CSS Sprites

说简单点儿就是合并图片,我们把网站需要的图标等小图片合并到一张大图当中,当我们需要使用这张图片的时候我们用background-position:10px 20px;配合width就能够得到想要的图标了。

内联图片

我们一般使用图片的时候

1
<img src="xxx.png" />

使用内联图片就是把src换成图片编码,例如:

1
<img src="data:image/gif;base64,fasfsafsa" />


合并脚本和样式表

在发布系统的时候把脚本和样式表进行合并以此来减少http的请求次数。


使用内容发布网络(CDN)

内容发布网络(Content Delivery Networks)的基本思想是尽可能的避开互联网上有可能影响数据传输和文档性的瓶颈和环节,是内容传输更快、更稳定。

但是对于小型企业来说CDN服务的开销太过于昂,是不可取得。但是我们可以使用一些免费的CDN静态资源库来加载我们的基础组件,例如jQuery、bootstrap…

这方法有点儿投机取巧,如果其他网站使用同样的CDN静态资源库,我们网站就可以直接从浏览器缓存中获取,也提高了我们系统的载入速度。


添加Expires头

我们为了使web页面达到很好的效果往往会使用大量的组件。页面第一次访问的时候会进行很多的http请求来加载组件,我们通过设置一个长久的Expires头,使组件可以被缓存,下次访问的时候就不需要重复加载了。

Expires存储的是一个用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时,它会和相应的组件一起保存到其缓存中,只要组件没有过期,浏览器就会使用缓存版本而不会进行任何的HTTP请求。Expires设置的日期格式必须为GMT(格林尼治标准时间)。

通常结合Cache-Control一起使用。


压缩组件

压缩那些内容:HTML文档、脚本、样式表、XML和JSON都是值得压缩的。
但是想图片这些内容就没必要了,因为其本身已经是压缩处理过的,在对其压缩指挥浪费服务器CPU的资源。

虽然压缩组件可以减少HTTP的响应时间,提升传输效率。但是也会让服务器花费额外的时间来压缩组件,客户端花费额外的时间来解压缩组件。


将样式表放在顶部、脚本放在底部

只要我们清楚HTML渲染的一个过程,就能很好的理解为什么需要吧样式表放在顶部。如果放在底部的话,在加载到样式表的时候会花费较大的代价来进行重绘和重排,而且容易出现闪屏的效果,给浏览者带来不好的体验。

我们把各种脚本组件放在最后,即便是脚本的请求时间很长,但是对页面内容的影响并不大,客户体验效果也较好。


避免CSS表达式

先来看一个css表达式的例子:实现页面的背景色每小时更换一次

1
2
3
body {
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
}

可以看出css表达式确实比较强大,但是问题是css的表达式会进行频繁的求值来保证它的有效性。所以在可能的情况下,我们还是别用他了。


使用外部的javascript和CSS

这一点很简单,我们应当把javascript和css写到独立的文件当中,其好处也是不言而喻的:
1、这样可以被浏览器缓存
2、页面更加简单
3、组件可以重用
4、…


减少DNS查找

我们知道使用域名或主机名是要通过DNS解析器解析到对应的IP的,这一过程肯定是会花费一定的时间的,所以这部分时间我们也要很好的管控起来。

DNS查找的结果只会缓存一定的时间,所以我们应当尽量避免DNS查找次数。当我们网站的全部资源都放在本地服务器上的时候,那就只需要一次的DNS的解析,但是这样会加大主服务器的压力,和我们前面说的使用内容分发网络是相违背的。所以折中的选择是一个网站至少使用2个域来提供资源,但是不要超过4~5个域。

这篇博文给出了更详细的解释:http://blog.sina.com.cn/s/blog_bccfcaf90101fakp.html


精简javascript

压缩和精简我们都是要考虑得,这样既可以提高javascript的响应时间也可以加快javascript的执行效率。


避免重定向

比如我们有a.jsp和b.jsp两个页面(a页面重定向到b页面),当我们访问a.jsp的时候服务器返回302状态码,表示说临时重定向。header中包含了新的地址b.jsp,这时候浏览器会去访问这个地址,但是页面一直处于空白状态,知道b.jsp请求被正常处理。

所以我们应当控制重定向出现的情况,在一些a标签之类的链接上书写完整直接的地址。


移除重复脚本

这种情况容易在我们使用jsp的include标签时候发生,因为是不同的开发人员写的页面,很可能造成我们重复的引用了默写样式表或者脚本。


配置ETag

ETag就是给资源一个唯一的标识,它作为HTTP请求的一部分发送到服务器。如果ETag保持一致,说明资源并没有被修改,客户端直接使用缓存。


使Ajax可缓存

像前面所说的添加Expires或者ETag等方式,我们可以把一些长久不需要变更的Ajax数据缓存一起来。


总结

高性能网站建设就是让我们在各个节点扣时间、提升效率,以此来让我们的网站性能最优。但这并不意味着我们要把这10几条规则一起使用,这样很可能导致你的完整变得跟慢。所以在开发和发布的过程中,我们需要做一些取舍,根据实际情况来提升网站的性能。

参考资料:

《高性能网站建设指南》

CSS中background-position用法与负值定位: http://www.111cn.net/cssdiv/css/45529.htm