高性能网站建设

 

压缩

浏览器使用Accept-Encoding头来生命它支持压缩。

服务器使用content-Encoding头确认响应已被压缩。

持久链接

request:      Connection:keep-alive

response:    Connection:keep-alive

 

图片优化

1.使用图片地图，将多个图片整合到一张图片上   <map>

2.CSS Sprites   多张图片合并为一张，使用时，经过位置制定

合并后大小比单个图片总和还小，而且减小http请求

3.内联图片 data：URL

 

添加 Expires头

浏览器使用缓存来减小HTTP请求的数量，并减小HTTP响应的大小，使Wweb页面加载的更快。

Web服务器使用Expires头来告诉Web客户端它可使用一个组件的当前副本，直到指定的时间为止。

HTTP规范中简要地称该头为“在这一日期/时间以后，响应将被认为是无效的”。

Expires：Thu, 15 Apr 2010 20:00:00 GMT

弱点：

Expires头使用一个特定的时间，它要求服务器和客户端的时钟严格同步。

另外，过时日期须要常常检查，而且一旦将来这一天到来了，还须要在服务器配置中提供一个新的日期。

 

带有max-age的Cache-Control

使用带有max-age的Cache-Control 能够消除Expires的限制

mod_expires Apache模块使你在使用Expires头时能像max-age那样以相对的方式设置日期。

这经过Expires-Default指令来完成

 

Last-Modified   /    If-Modified-Since

若是一个组件没有一个长久的Expires头，浏览器仍会缓存住，在后续请求中，浏览器会检查缓存并发现组件已过时。

为了提升效率，浏览器会像原始服务器发送一个GET请求。

若是组件没有改变，原始服务器能够免于发送整个数据，而是发送一个很小的头(304),告诉浏览器可使用其缓存的组件。

Last-Modified      : 服务器发送给客户端最后的修改时间

If-Modified-Since : 客户端记录的服务器最后修改时间

 

注意：

经过修订文件名的方式，排除在从新发布项目时，浏览器使用缓存中的数据，再也不获取最新文件，一般将项目版本号追加到文件名上。

 

压缩组件

经过减少HTTP响应的大小来减小响应时间。

若是HTTP请求产生的响应包很小，传输时间就会减少，由于只需将很小的包从服务器传递到客户端。

使用gzip编码来压缩HTTP响应包，并由此减少网络响应时间。

这是减少页面大小的最简单的技术。

 

从HTTP 1.1 开始，Web客户端能够经过HTTP请求中的 Accept-Encoding 头来标识对压缩的支持。

Accept-Encoding : gzip, deflate

若是Web服务器看到请求中有这个头，就会使用客户端列出的方法中的一种来压缩响应。

Web服务器经过响应中的Content-Encoding头来同志客户端。

Conten-Encoding : gzip

压缩什么：

html，script，css，XML，JSON....

image 和 pdf 不该该被压缩，由于他们已经被压缩了，再压缩只会浪费CPU资源。

根据经验一般对大于1KB或2KB的文件进行压缩。

mod_gzip_minimum_file_size指令控制但愿压缩的文件的最小值，默认是500B。

 

 

将样式标放在顶部

为避免白屏，请将样式表放在文档顶部的HEAD中。

通过这样修改后的示例网站称做 " CSS at tht Top ",解决了全部错误的状况。

 

样式表在页面中的位置并不影响下载时间，可是会影响页面的呈现。

若是样式表仍在加载，构建呈现树就是一种浪费，由于在全部样式表加载并解析完毕以前无需绘制任何东西。不然，在其准备好以前显示内容会遇到 “无样式内容的闪烁” 问题。

 

将脚本放在底部

最好将脚本从页面的顶部移至底部。

这样页面便可以逐步呈现，也能够提升下载的并行度。

对于位与脚本如下的文档内容，逐步呈现都被堵塞了。

将脚本放在页面越靠下的地方，觉得着越多的内容可以逐步呈现。

 

并行下载：

HTTP 1.1 规范建议浏览器从每一个主机名并行地下载两个组件。

不少Web页面须要从一个主机名下载全部的组件。

使用DNS别名将组件分放到多个主机中。

建议使用连个主机名，效率最佳。

 

脚本阻塞下载：

并行下载组件的优势是很明显的，但在下载脚本时并行下载其实是禁用的，即便使用了不一样的主机名，浏览器也不会启动其余下载的。（不只仅阻塞script，其余下载也会阻塞）

脚本阻塞下载的缘由主要是为了保证脚本的加载顺序。

• 脚本会阻塞对其后面内容的呈现
• 简本会阻塞对其后面组件的下载

 

动态内联 javascript / css

使用cookies作指示器，若是cookies不存在，就内联javascript和css，页面加载完成后，在load事件中动态加载外部javascript和css文件（加载到隐藏的iframe中，实现缓存外部文件，且不影响当前页面）。

当用户第一次访问页面时，服务器发现没有cookie，因而生成了一个内联组件的页面。

而后服务器添加javascript来在页面加载后动态下载外部文件(并设置cookie).

 

减小DNS查找

精简javascript

精简

混淆

 

避免重定向

 

301 重定向，重定向地址在response头信息的Location中，表明永久转移。

302 重定向，重定向地址在response头信息的Location中，表明暂时转移（已过期）。

303 重定向，对于302的补充，必须使用GET请求获取新位置的资源。

307 重定向，对于302的补充，后续请求资源的方法是使用与当前交互相同的方法而不是所有使用GET。

304 Not Modified，通知浏览器能够直接使用缓存中的副本。

 

ETag

集群环境下有问题

配置或移除

 

使ajax可缓存

 

 

 

 

对于图片的处理

1.图片地图，css sprites，内联图片

2.使用缓存

3.制定图片的原始大小，不要放大图片，缩小图片

4.照片使用JPEG，动画使用GIF，其余使用PNG，并尽可能使用PNG8

5.图片lazzy 加载

 

 

建立快速响应的Web应用

脚本的耗时开销很低，而处理CSS是最大的开销。理解DOM的奥秘并减小它的影响比试图给脚本提速效果更好。

用户操做时，浏览器使用单线程从队列中取出事件，而后对事件自己进行处理或执行javascript。

 

怎样才算够快

用户直接操做UI中对象的感受极限为 0.1秒。

若是没法在0.1秒内完成，那么必须在1秒内完成，在0.2到1秒的处理时间内，用户会感到计算机正在处理中。

超过1秒的延时要提示用户计算机正在解决这个个问题，如光标的形状改变。

超过10秒的任何操做都须要一个百分比完成指示器，以及一个方便用户中断操做且有清晰标识的方法。

使用Firebug插件，分析javascript代码性能。

 

定时器

使用定时器模拟多线程应用，简单的将运行时间很长的计算拆成独立的区块。

 

内存优化

使用delete关键字从内存中移除再也不须要的javascript对象。

从网页的DOM树上移除再也不是必须的节点。

 

Comet

低延时数据传输技术，它们是comet的基础：轮询、长轮询、永久帧、XHR流、WebSocket。

1.轮询

简单轮询，即网站或应用每x毫秒发出一个请求来检查是否有更新要呈现到用户界面上。

eg：settimeout

在服务器按已知间隔时间生成信息的状况下，轮询是可行的

简单轮询是效率最低但最简单的comet技术。

 

2.长轮询

浏览器发送一个请求到服务端，而服务端只在有可用的新数据的状况下才响应。

在支持长轮询，服务端要彻底保持一个全部未响应请求和它们对应链接的大集合。

服务端经过返回 Transfer-Encoding: chunked 或 Connection:close 响应来保持这些请求链接。

即经过XHR创建与服务器的链接，在服务端数据发生改变的时候，经过XHR通知浏览器，此时再发送请求数据的链接。

客户端会与服务器创建一个持久的链接，直到服务器端有数据发送过来，服务器端断开，客户端处理完推送的数据，会再次发起一个持久的链接，循环往复。

3.永久帧

4.XHR流

IE7如下浏览器不支持

http://www.cnblogs.com/hoojo/p/longPolling_comet_jquery_iframe_ajax.html

 

 

简化CSS选择符

 CSS选择符是从右到左进行匹配。

 尽可能避免使用通配规则

不要限定ID选择符

不要用具体的标签限定类选择符，而是根据实际状况对类名进行扩展

对于子选择符和后代选择符尽量用具体的类来表示

浏览器的重排必须再次匹配全部的css选择符