高性能网站建设指南:性能提升的14个原则

  今日大致浏览了一下《High Performance Web Sites》。本书的中文版是《高性能网站建设指南》。本书另有对其中个别问题深入探究的进阶篇《Even Faster Web Sites》,中译《高性能网站建设进阶指南》。这本书中给出了14条网站性能提升的原则,每个原则独立成章,配有示例。这些原则大多数都非常实用,适合站点架构师、前端工程师。其中对于前端工程师的意义更大一些。这次看的是原版。我对于Web开发较缺乏实践经验,加之看得匆忙,因此可能存在遗漏、表述不当之处,希望广大网友不吝指正。

  原则1 减少HTTP请求数

  构造请求、等待响应需要时间,因此请求数量越少越好。减少请求的总体思路就是合并资源,减少显示一个页面需要的文件数。

  1. Image Map

  通过设置<img>标签的usemap属性与使用<map>标签可以在一幅图片上切分出多个区域,指向不同的链接。比起使用多幅图片分别构造链接减少了请求数。

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

  通过设置元素的background-position样式做到。一般用于界面图标。典型的可以参考TinyMCE编辑器上方的那些小按钮。多个小图实质是从一个统一的大图通过不同的偏移量裁剪而来,这样加载界面上的众多按钮实际上只要请求一次(请求大图一次),从而减少HTTP请求数。

  3. Inline Image(内联图片)

  在<img>的src中不指定外部图片文件的URL,而是直接将图片信息放入。例如src=”data:image/gif;base64,R0lGODlhDAAMAL...”某些特殊情况下有用(例如一个不大的图片仅在当前页面用到)。

  原则2 利用多线路CDN

  为你的站点提供多种线路(例如国内电信、联通、移动)、多个地理位置(北方、南方、西部)的访问,使得所有用户都能够快速访问。

  原则3 利用HTTP Cache

  给不频繁更新的资源(例如静态图)加较长的Expires头信息,这些资源一经缓存,未来很长时间都可以不再重复传输了。

  原则4 使用Gzip压缩

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

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

  先加载样式表,这样页面渲染得以较早开始,给用户页面加载较快的感觉。

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

  原因同5,先处理页面显示,页面渲染较早完成,而脚本逻辑稍后执行,这样给用户页面加载较快的感觉。

  原则7 避免使用CSS表达式

  过于复杂的JavaScript脚本逻辑、DOM查找、选择操作将会降低页面处理效率。

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

  这似乎与原则1中的合并思想相悖,但其实不然:考虑每个页面都引入了一个公共的JavaScript资源(例如jQuery或是ExtJS这样的JavaScript库),单就一个页面的表现来看,内联(即将JavaScript嵌入HTML)页面将比外联(使用<script>标签引入)页面加载更快(因为其较少的HTTP请求数)。但如果有很多页面都引入了这个公共JavaScript资源,那么内联方案会造成重复传输(因为这个资源内嵌在每个页面中了,所以每次打开一个页面都要将这部分资源传输一遍,从而造成网络传输资源的浪费)。而将这种资源独立出来外联引用可以解决这个问题。

  由于JavaScript和CSS相对稳定,我们可以对其对应的资源设置较长的失效期(参考原则3)。

  原则9 减少DNS查找

  作者给出的建议是:

  1. 使用Keep-Alive保持连接

  如果连接断开,那么下次连接又要执行DNS查找,即使对应的域名-IP映射已被缓存,查找也是要消耗一些时间的

  2. 减少域名

  每次请求新域名都需要进行通过DNS查找不同的域名,且DNS缓存无法发挥作用。因此应该尽量将站点组织在一个统一域名下,避免使用过多子域名

  原则10 压缩你的JavaScript

  使用JS压缩工具压缩你的JavaScript吧,很有效哦。看看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之间转换,例如对于Google Toolbar,用户记得住http://toolbar.google.com这个对人类富有语义的地址,却很难记住http://www.google.com/tools/firefox/toolbar/FT3/intl/en/index.html这个真正的资源地址。因此有必要保留前者,并且将对前者的请求重定向至后者。

  原则12 移除重复的脚本

  不要在一个页面中重复引入相同的脚本。例如脚本B和C都依赖于A,那么在使用了B和C的页面中就有可能存在对A的重复引用。解决方法,对于简单的站点手动检查依赖性,消去重复引入;对于复杂的站点则需要构建自己的依赖管理/版本控制机制。

  原则13 小心处理ETag

  ETag是除Last-Modified之外的另一种HTTP Cache手段。通过hash的办法辨识资源是否被修改。但ETag存在一些问题,例如:

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

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

  1) 相同资源在不同服务器上计算出来的ETag不一样,而大型Web应用通常由不止一台服务器提供服务,这就导致客户端在服务器A缓存好的资源明明仍然有效,而在下次请求B时由于ETag不同而被认定为失效,导致相同资源的重复传输。

  2) 资源不变,而由于一些其他因素的变化,例如配置文件更改,导致ETag变化。直接后果是系统更新后客户端大规模发生Cache失效,导致传输量大增,站点性能下降。

  作者给出的建议是:要么根据你的应用特点改进已有的ETag计算方法,要么干脆就不用ETag,而改用最简单的Last-Modified.

  原则14 在Ajax中利用HTTP Cache

  Ajax是异步请求,异步请求不会阻塞你现在的操作,而且当请求完成时,你马上就可以看到结果。但异步不代表能够瞬时完成,也不代表能够容忍它花无限多的时间完成。因此对于Ajax请求的性能也需要重视。有很多Ajax请求访问的是一些相对稳定的资源,因此别忘了对Ajax请求利用好HTTP Cache机制,具体参见原则3、13.

  原文:http://www.cnblogs.com/mdyang/archive/2011/07/12/high-performance-web-sites.html

时间: 2024-09-15 15:58:22

高性能网站建设指南:性能提升的14个原则的相关文章

读高性能网站建设指南

原文:读高性能网站建设指南 性能黄金法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上.其余的80%~90%时间花在了下载页面中所有组件上 规则1:减少HTTP请求 图片地图(Map) CSS Sprites(css精灵) 内联图片(<a><img src = "" ></a>) 合并脚本和合并样式表 图片地图鱼css sprites响应时间几乎一样,比原来为每个图片使用链接快50%以上,将内联图片放置在外部样式表中增加了一个额外的h

将样式表放在顶部——高性能网站建设指南规则5(读书笔记)

PS:以下内容仅仅为个人读书笔记,如有错漏,随时欢迎指正.同时希望能有更多的前端爱好者们共同分享你们的心得! 背景 阅读<高性能网站建设指南>第五章,文章中, 作者建议最好将CSS文件(样式表)放在文档顶部,即<head>标签之间.当然这是在一定的应用前提之下的--该样式表在页面呈现时可能并 不需要,而是作用于由于用户与页面的交互行为而产生的动态标签.比方说你点击某个显示有"猛击我吧!!"的连接,然后页面弹出个DIV,用绿色字体和 24px的字号大小显示的标准国

高性能网站建设指南

第1章,规则1--减少HTTP请求.介绍了为什么额外的HTTP请求会对性能产生巨大的影响,并介绍了减少HTTP请求的方法,包括图片地图.CSS子图形.使用data:模式的URL内联图片,以及合并脚本和样式表.苦寒竹补充:图片地图是指比如将论坛这些表情做到同一张图片上,通过css定位来调用图片.这个在web标准区中可以看到不少例子 第2章,规则2--使用内容发布网络强调了使用内容发布网络的优势.cdn加速 第3章,规则3--添加Expires头研究了一个简单的HTTP头是如何通过使用浏览器缓存来戏

浅谈网站建设中快速提升用户体验度的方法

无论是企业还是个人,制作网站的最终目的都是为了盈利,当然,达到这个目的的因素有很多,包括网站的定位.网站结构.网站内容和网站的运营推广. 不过这些要素是否能完美的 体现在网站当中,唯一的衡量标准是网站的用户体验度.   顾名思义,用户体验度是指一个用户访问某个网站的体验效果,这个网站是否有用户想看到的内容和是否带为用户提供一些有价值的内容.随着搜索引擎的不断升级进化,搜索引擎对收录网站的要求也越来越严格,其中用户体验度已经被搜索引擎纳入其审核指标中.那么,在网站建设活动中,哪些要素会影响用户体验

高性能网站建设之 MS Sql Server数据库分区

什么是数据库分区?数据库分区是一种对表的横向分割,Sql server 2005企业版和之后的Sql server版本才提供这种技术,这种对表的横向分割不同于2000中的表分割,它对访问用户是透明的,用户并不会感觉的表被横向分割了.(2000中的表横向分割是建n个表例如按时间建表每月一个表,表名不同,最后需要做一个大视图) 关于具体的如何做分区,请参考数据库分区演练http://www.cnblogs.com/yukaizhao/archive/2008/05/07/sql_partition_

2013年全省政府网站建设工作会议召开

会议现场梁志峰主任作全省政府网站工作报告 2013年全省政府网站建设工作会议3月20日在长沙召开.会议确定了今年我省政府网站工作的重点工作,加强制度建设,全面落实<湖南省政府网站管理办法>:强化在线服务,完善政府网站公共服务体系和省市县三级WAP门户体系:做好安全保障,启动政府网站安全等级评估工作.会议表彰了年度优秀政府网站和先进个人,省政府经济研究信息中心主任梁志峰作全省政府网站建设工作报告,副主任杨志新主持会议. 去年,省政府门户网站在中国政府网站绩效评估中名列全国省级政府网站第六位,省政

全国测绘地理信息系统网站建设会议在哈尔滨召开

1月10日,全国测绘地理信息系统网站建设会议在哈尔滨召开,国家测绘地理信息局副局长宋超智出席会议并讲话,就今后一段时期内网站建设重点工作做出部署. 宋超智在讲话中充分肯定了近年来测绘地理信息系统网站建设取得的成绩,他指出,全系统网站建设一步一个台阶,一年一个高度,取得了一个又一个成果,网站体系逐步完善,网站建设整体水平明显提升,网站宣传作用日益凸显,网站队伍建设取得进展,制度规范逐步健全.2012年,国家局网站的点击量达3.3亿次,在近几年的政府网站绩效评估中一直处于中上游水平. 宋超智分析了目

网站建设测试阶段的10项修炼

中介交易 SEO诊断 淘宝客 云主机 技术大厅 网站建设公司每天都忙于为客户的网站进行设计和编码,往往同时有好几个网站项目要同时上线,而程序员穿插在几个网站的测试当中常常顾此失彼,无法系统性的进行测试.因此,我们在此列出了标准建站常用的10条测试项目,以方便测试员进行全面.系统的网站测试. 一.内容正确.完整 要保证网站的内容与客户提供的内容资料相吻合,无错别字,文章标题和内容相统一等等.避免出现'牛头不对马嘴'的现象. 二.页面样式和设计图稿一致 许多客户常常抱怨网站做出来的效果和前期的网页设

成功的网站建设应认真规划并编写好建站方案

中介交易 SEO诊断 淘宝客 云主机 技术大厅 做网站建设行业算来也有一段时间了,期间接触过一些客户,了解了一下他们的心里话.很多时候,他们想做个好网站,咨询着咨询着就做了,做出来之后又是不满意,为啥?因为他们在做网站之前就没想过自己的网站应该怎么做?连一个建站方案都没有,就是找了个参考网站,写了一个框架,随便找了几家网站建设公司咨询了一下就开始动手做了.像这样火候不够的网站能有多好呢? 建站方案,建站方案,很多人在这句话上摔了跟头,因为没有充分的准备,没有一条横贯始终的主旨,更没有全局的设计策