《高性能网站建设指南》读书笔记

简介:

规则1-减少HTTP请求

请求网页时只有10%-20%的最终用户响应时间花在接收请求的HTMl文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组建(图片,脚本,样式表,Flash等)进行的HTTP请求上,因此改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求数量。

图片地图:我们可以将多个图片完成的功能,使用一个图片,根据的不同区域来响应不应的请求。

合并脚本和样式表:每个文件都会导致一个HTP请求,尽量将cssjs合并到一个文件中。 

规则2-使用内容发布网络

在多个地理位置不同的服务器上部署内容,如果web服务器离拥护更近,则一个http请求的响应时间将缩短,如果组件web服务器离拥护更近,则多个http请求的响应时间将缩短。有很多公司提供CDN(内容发布网络)服务。CDN用于发布静态内容,如图片,脚本,样式表和Flash 

规则3-添加Expires

使用Expires来设置浏览器缓存,指到指定的时间为止一直访问缓存中的内容。另外在http1.1中引入了cachecontrol头来克服Expires头的限制,因为Expires头使用一个特定时间,它要求服务器和客户端的时钟严格同步,过期时间需要经常检查,并且一旦未来这一天到来了,还需要在服务器配置中提供一个新的日期。

Cachecontrol使用maxage指定指定组件被缓存多久,它以秒为单位定义了一个更新窗。如果从组件被请求开始过去的秒数少于maxage,浏览器就使用缓存版本。

如果你同时指定了Expirescachecontrol头,maxage指令将重写Expires头。

使用浏览器缓存减少了响应时间,但是当我们的组件更新的时候,已经访问过用户不太可能获取最新的组件,因为前一个版本已经在缓存中了,解决这个问题的方案就是修改文件名,比如我们组件使用变量. 

规则4-压缩组件

压缩已经在Email应用和FTP站点中使用了10年,http1.1开始,web客户端可以使用htppAcceptEncodingAcceptEncodinggzip;deflate)来标识压缩。deflate 也是一种压缩方式但不流行,Gizp是最理想的压缩方法。我们一般压缩的对象是html,样式表,脚本,图片和pdf不应该压缩,因为它们本来已经备压缩了,在去压缩只会白白的浪费cpu资源。压缩通常能将响应的数量减少将近70%。

正常情况下,当浏览器直接与服务器通信时我只要按常规的配置即可。但是当浏览器通过代理来发送请求的时候就变得非常复杂。需要考虑压缩和缓存之间的平衡。 

规则5-将样式表放在顶部

在早先的IE中比如将样式表放在底部,会导致白屏或者是无样式内容的闪烁。白屏是由于浏览器要等待css下载完再显示页面的组件,所以在等待css下载的时候页面就是白屏。无样式的闪烁是由于先下载页面的组件比如文字图片,并逐步显示,等css下载完则需要应用新的css样式渲染,就产生了这种无样式的闪烁现象。

正确使用方式是使用link标签将样式表放在文档的head中。


规则6-将脚本放在底部
并行下载:页面中的每个组件都会产生一个http请求,http请求会影响相应时间,浏览器对其下载的规则要依照http规范。在http1.1规范里建议浏览器从每个主机名并行下载两个组件,也就是说如果我们的组件在两个主机名下就会并行下载4个组件。但并非是主机名越多越好,Yahoo的研究表明使用两个主机名是最佳的。而且不同的浏览器会有不同的默认设置。
下载脚本时是禁止并行下载的,因为脚本可能使用document.write来修改内容,或者有多个脚本时他们之间可能存在依赖关系。所以脚本放在最下面就会先下载脚本而阻止页面其他组件的下载。所以最佳的情况就是将脚本放在底部。

 

规则7-避免css表达式
CSS
表达式是动态设置CSS属性的一种强大但很危险的方式,它收到IE5之后版本的支持。类似background-color:expression();格式的。任何css表达式实现的功能我们都可以找到它的替代方式,我们尽量避免使用Css表达式。

规则8-使用外部JavaScriptCSS
使用内联比外部文件确实有更快的响应速度,但是使用外部文件被浏览器缓存,哪种方式好还要考虑页面的浏览次数,缓存设置等。也有两全其美的方法,比如加载后下载,我们首先使用内联的方式,在主页加载完毕后动态下载外部组件来实现,这样能将外部文件放到浏览器的缓存中以便用户接下来访问其他页面。还可以使用动态内联的方式。

规则9:减少DNS查找
Domain Name System(DNS)
将主机名映射到IP上,比如你输入www.a.com,连接到浏览器的DNS解析器会返回服务器的ip地址。
DNS
解析也是开销,在DNS查找之前浏览器不能从主机名那里下载到任何东西,相应时间依赖于DNS解析器,他所能承担的请求压力,
你与它之间的距离和你的带宽速度。
实际中操作系统和浏览器做为缓存DNS查找记录,但是浏览器的Keep-Alive属性会覆盖操作系统的缓存过期时间。

规则10-精简JavaScript
Javascript
我们精简和混淆,精简只是去掉代码中空白等。而混淆会对一些变量函数名进行修改。一般混淆是为了增加反向工程的
难度,但是也容易带来错误,一般我们不建议去混淆JavaScript代码。精简和混淆我们都可以借助一些工具来实现。

 

规则11-避免重定向
重定向就是从一个URL到另一个URL,它会使你的页面变慢。下面是一些使用重定向的典型解决方案:
1.
缺少结尾的斜线:我们在请求www.a.com时会引起重定向url变为www.a.com/,这是一般浏览器的默认行为。
2.
连接网站:当我们改变网站后端逻辑的时候,很可能所需的url也变了,这时候就需要将用户从旧的url转移到新的url,这个时候
我们往往使用最多的也是重定向。我们应该尽量去避免。
3.
跟踪内部流量
4.
跟踪出战流量
5.
美化url:有的时候某个url很复杂,不利用用户去输入,我们就提供一个友好的url来给用户,这个时候也会发生重定向。

规则12-移除重复脚本
该规则说的是同一个脚本被包含两次。

 

规则13-配置ETag
当网站被宿主在多于一台服务器上时,ETag头可能会阻碍缓存。
ETag
:实体标签,是web服务器和浏览器用于确认缓存组件的有效性的一种机制。

 

规则14-使用Ajax缓存
确保Ajax请求遵守性能指导,尤其应具有长久的Expires头。


本文转自生鱼片博客园博客,原文链接:http://www.cnblogs.com/carysun/archive/2009/10/13/highperformance.html,如需转载请自行联系原作者

相关文章
|
6月前
技术人修炼之道阅读笔记(一)让自己更值钱的5个能力
技术人修炼之道阅读笔记(一)让自己更值钱的5个能力
|
7月前
|
设计模式 SpringCloudAlibaba 负载均衡
每天打卡,跟冰河肝这些项目,技术能力嗖嗖往上提升
前几天,就有不少小伙伴问我,冰河,你星球有哪些项目呢?我想肝你星球的项目,可以吗?今天,我就给大家简单聊聊我星球里有哪些系统性的项目吧。其实,每一个项目的价值都会远超门票。
102 0
每天打卡,跟冰河肝这些项目,技术能力嗖嗖往上提升
|
8月前
|
运维 架构师 大数据
【深度剖析】大数据职业发展体系全解【附下载】
【深度剖析】大数据职业发展体系全解【附下载】
|
1月前
|
存储 缓存 安全
大型互联网企业Java后端技术面试题总结(含答案)
大型互联网企业Java后端技术面试题总结(含答案)
45 0
|
9月前
|
数据采集 存储 消息中间件
《阿里大数据之路》读书笔记:总述
阿里数据体系主要分为数据采集、数据计算、数据服务和数据应用四大层次。
|
11月前
|
算法 前端开发 JavaScript
数据结构算法在专网项目中的实践
数据结构与算法作为计算机学科中至关重要的一门课程,在日常业务代码中常常很难用到或者说很难进行相关的实践,我们常常在leetcode中练习的习题感到没有用武之地。实际上,我们可以通过优化页面中的一些代码及在需求实现过程中对之前阅读过的源码或者之前练习过的习题进行相关的举一反三和触类旁通。本文列举了一些作者在日常业务代码书写过程中进行的一些相关数据结构算法的实践以及对于算法与数据结构练习的思考。
64 0
|
监控 前端开发 JavaScript
自问三连,如何建设团队里的前端工程技术?
前端工程技术建设可以理解为团队内的前端技术和框架建设的整体表现,包括了 技术/规范文档、工程模板研发、组件库和开发工具沉淀、devops自动化、研发到数据可视化闭环等方面建设与完善。
自问三连,如何建设团队里的前端工程技术?
|
算法 测试技术 API
热饭的测开成果盘点第二期:C/S架构的全端自动化
本期介绍的是一个c/s端的工具,即客户端工具。也就是需要下载安装的界面工具,相比较现在流行的B/S即浏览器平台来说,具有以下特点:
热饭的测开成果盘点第二期:C/S架构的全端自动化
|
存储 缓存 监控
珍藏版《大型网站技术架构知识汇总》,架构师必备
珍藏版《大型网站技术架构知识汇总》,架构师必备
155 0
珍藏版《大型网站技术架构知识汇总》,架构师必备
|
Java Linux 开发者
收藏!阿里毕玄16篇文章,深度讲解Java开发、系统设计、职业发展 | 技术日报(8期)
阿里毕玄结合自己的经历深度讲解Java开发、系统设计、职业发展等问题,快来一键收藏吧。
1754 0