高性能网站的14个原则

原则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.

时间: 2024-08-29 17:42:15

高性能网站的14个原则的相关文章

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

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 今日大致浏览了一下<High Performance Web Sites>.本书的中文版是<高性能网站建设指南>.本书另有对其中个别问题深入探究的进阶篇<Even Faster Web Sites>,中译<高性能网站建设进阶指南>.这本书中给出了14条网站性能提升的原则,每个原则独立成章,配有示

读高性能网站建设指南

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

创业者手册之——客户开发的14个原则

第1条原则:在你的办公室里无法发现任何事实,赶快走出来在第一天成立时,初创企业只是基于创始人愿景形成的信念型企业,严重缺乏各种事实作为支撑.创始人要做的工作就是把虚无缥缈的愿景和假设转变成事实.事实即有关市场和客户的信息,存在于办公室之外,存在于未来客户(潜在客户)工作和生活的地方,因此你必须到那里了解事实.在客户开发流程中,这条原则是最为重要的,也是最难做到的.和编写代码.开发硬件.举行会议及准备报告等工作相比,寻找潜在客户并和他们进行交流要难得多,但这一点也正是区分成功者和失败者的关键所在.

在线推广网站的14招

推广|在线 在线推广网站的14招 1.将你的网站提交到搜索引擎,这样你的网站就有了最大暴光率的可能性:     2.如果你期望得到更多的暴光机会,你可以付费进行搜索引擎营销 (Search Engine Marketing) .当浏览者用固定的关键词搜索时,就会有在搜索引擎网站上出现你网站的文字广告:     3.开展一个抽奖活动.在一定的时间里,如果有人在你的网站上进行了注册或订阅电子邮件通讯,他就有可能得到免费的礼品:     4.每周给你网站注册者发送电子邮件通讯 (E-mail News

SEO需要明白搜索引擎惩罚网站的几个原则

做seo的人一般都知道seo分为白帽,黑帽,甚至还有灰帽.简单说,如果你熟读过谷歌站长指南,就可以了解,符合搜索引擎质量规范并且符合用 户体验的seo手法统称为白帽,违反搜索引擎明文规定禁止使用的seo手法叫做黑帽,介于白帽和黑帽之间,无法被明确定义为白帽还是黑帽的手法就归为灰帽seo了.电商圈今天并不想谈过多白帽或者黑帽的事情,而是想谈谈对于seo人员来说非常重要又被很多站长朋友所忽略的搜索引擎惩罚原则.很多站 长由于不太了解搜索引擎的惩罚原则,导致网站被降权的时候,甚至不知道自己为什么被处罚

不要使用@import进行高性能网站设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 在高性能网站设计的第五章,我简要的提到@import 对于网站的性能有某些负面的影响,然后我在 Web 2.0 Expo 的演讲上深入探讨了这个问题,并创建了一些测试页面和HTTP瀑布状图表,这些在下面将会用到.对于这个问题的底线是:如果你想样式表并行载入,以使页面更快,请使用LINK 替代@import. LINK vs. @import 大家都知道,有两种方法可以在你的页面中导入样式文件.你可以使用LINK标签: <link rel='styl

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

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

网站运营利用跟风原则进行网络营销的重要性

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 最近香港又出现了众多粉丝彻夜排队购买IPHONE4S,这已经是苹果第N次采用了这样的营销手段了,很多专家称其为饥饿营销,其实这也是跟风原则营销的一种手段,这是一种利用人类的跟风原理所设计的一种营销方式,就像我们搞赌局的时候,经常搞一些托来欺骗别的用户,吃饭的有饭托,买鞋的有鞋拖等等不一而足,这是现实社会中常用的营销手段,那么这种营销手段,是否

读图:让Google爱上你网站的14个方法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 你如果希望自己网站获得更大更广泛的生意发展,获得更好的谷歌排名是必经之路.本期信息图表带你一起来了解让谷歌深爱你网站的14个方法.其中有内容上的改进办法,要求你的网站尽可能多原创;有设计上的改进办法,尽量拥有一个干净美观的印象;如果网站能有更多元化的表达,也会比单一的文字更有说服力.当然抓住Google的心,更要抓住读者的心,所以互动也是必要