高性能网站建设原则

海淘科技分享了14条网站性能改进的原则,单独每次读取原理,与样品。大部分的这些原则是非常实用,适合网站架构师,前端工程师。前端工程师的重要性要居于其中很多。

原则1 减少HTTP请求数

结构要求,等待响应需要时间,所以请求的数量,越少越好。下降的整体思路是结合资源,减少请求的数量通过根据文档的减少页面数量。

1. Image Map

通过设置usemap属性,可以使用标记标签图像分割的多个区域,来指向不同的链接。而不是使用多个形象建设链接分别减少请求的数量。

2. CSS Sprite(CSS贴图整合/贴图拼合/贴图定位)

通过设置元素background-position的css样式来设置。常用的界面图标。一个典型的可以参考以上小按钮TinyMCE编辑器。许多个小图从一个统一的大图来设置不同的偏移量分离而来，这个接口加载事实上只要请求许多按钮一次更大的(请求),从而减少HTTP请求。

3. Inline Image(内联图片)

在Inline Image的SRC的内联图像不是外部图像文件中指定的URL,但是直接的将图片信息直接的导入。如数据:SRC = " data:image/gif;base64,R0lGODlhDAAMAL...”有用在某些特殊情况下(如一个小图片仅用于当前页面)。

原则2 利用多线路CDN

为你的网站提供各种线路(例如,国内电信、联通、移动),设置多个位置(北、南、西),可以快速访问所有用户。

原则3 利用HTTP Cache

对于一些不是频繁更新资源的(比如一个静态图片)有更长的Expires标题信息,这些资源缓存后,未来不能重复传播了很长一段时间。

原则4 使用Gzip压缩

使用Gzip压缩HTTP消息,减小体积,减少传输时间。

原则5 将样式表置于页面前部

加载样式表,这个页面呈现渲染是从早期开始,给用户的感觉页面加载速度更快。

原则6 将脚本置于页面尾部

原因同5，首先,处理页面，页面渲染就可以早些时候完成,脚本逻辑执行将在后期,因此,给用户页面加载速度就会更加的快速。

原则7 避免使用CSS表达式

不简单的JS逻辑,DOM查找,选择操作将降低处理效率。

原则8 将JavaScript与CSS作为外联资源

这似乎是与合并的想法原则1相反,但事实上不是这样:考虑每一页介绍了常见的JavaScript资源(如jQuery或ExtJS JavaScript库),单在一个页面性能的情况下,内联JavaScript(嵌入HTML页面加载速度比拓展。但是如果有很多页介绍常见的JavaScript资源,所以内联的解决方案将导致重复传输(因为资源嵌入在每个页面,所以每次你打开一个页面的这一部分资源转移,导致浪费网络资源)。但是这种资源拓展参考可以解决这个问题。

原则9 减少DNS查找

1. 使用Keep-Alive保持连接

如果连接断开,然后下一个连接执行DNS查找,即使对应的域名,IP映射缓存,搜索也需要一些时间

2. 减少域名

新域名请求每次都应该要通过不同的DNS查找，DNS缓存却不能发挥作用。所以你应该试着组织网站统一域名下,避免使用太多的子域名

原则10 压缩你的JavaScript

使用JS压缩工具压缩你的JS吧，效果使很不错的。根据jQuery两个不同的发行版本就能发现他们之间的区别:

http://code.jquery.com/jquery-1.6.2.js 阅读版jQuery代码，230KB

http://code.jquery.com/jquery-1.6.2.min.js 压缩版jQuery代码(用于实际部署)，89.4KB

原则11 尽量避免重定向

重定向意味着在实际访问你想看到首页加入轮额外的HTTP请求(客户端发起HTTP请求→HTTP服务器返回重定向响应→客户端对新URL发起请求→HTTP服务器返回内容，下划线部分为额外的请求)，因此消耗更多的时间(也对人的感觉反应慢)。所以,除非必要,不要使用重定向。几个“必要”:

1. 避免URL失效

迁移后的旧网站,为了避免旧URL失败,往往旧URL的请求重定向到一个新系统相应的地址。

2. URL美化

可读性好的URL和实际资源URL之间的转换,比如,谷歌工具栏,用户记住http://toolbar.google.com这丰富的语义地址在人类身上,但很难记住,真正的源地址http://www.google.com/tools/firefox/toolbar/FT3/intl/en/index.html。所以有必要保持前,将被重定向到后者根据前者要求。

原则12 移除重复的脚本

不要一个页面重复的使用相同的版本。B和C都依赖于一个脚本,例如,在页面中使用B和C可能存在反复的引用。解决方案,对于简单的网站依赖手动检查,消除重复的介绍,对于复杂的网站你需要 网站建设知识建立自己的版本的依赖管理/控制机制。

原则13 小心处理ETag

除了last - modified ETag是另一个HTTP缓存。由hash方法确定资源是否被修改。但是在某种程度上说还是存在一定的问题：

1. 不一致：不同的Web服务器(Apache,IIS等)ETag格式定义是不同的

2. ETag的计算是不稳定的(由于考虑过多因素)，例如：

1) ETag在不同的服务器上，具有相同的资源，大型Web应用程序通常由多个服务器提供服务,这将导致服务器上的客户端缓存资源显然仍然有效,当下一次请求B被认定为失败由于不同的ETag,导致相同的重复传播资源。

2) 资源不变,是其他因素导致的变化,比如配置文件变化,使ETag的变化。直接后果是系统更新后端缓存失效,导致运输数量、网站性能下降。

原则14 在Ajax中利用HTTP Cache

Ajax是一个异步请求,异步请求将不会阻止你现在操作,当请求完成时,你可以立即看到结果。但异步不代表可以瞬时完成,也不代表可以宽容需要无限的时间完成。所以对于Ajax请求的性能也需要注意。