高性能网站建设

压缩

浏览器使用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选择符

高性能网站建设,布布扣,bubuko.com

时间: 2024-08-04 04:37:27

高性能网站建设的相关文章

前端性能优化规则总结—读《高性能网站建设指南》

本文对<高性能网站建设指南>这本书中提出的14种基本的前端性能优化方案进行了总结,这本书介绍的优化方案比较过时了,不能完全满足目前前端性能优化,如果您浏览完能弄清楚每种方案的实施过程.就没必要看这本书了. 规则1-减少HTTP请求 1.使用图片地图 图片地图允许你在一个图片上关联多个URL,目标URL的选择取决于用户点击了图片上的哪个位置. 比如导航栏菜单有五个选项,为了美观,我们将菜单对应的超链接关联到图片上,可以使用五个分开的图片分别关联五个分开的超链接,此时加载这个导航菜单就要通过五次H

高性能网站建设和优化

高性能网站建设和优化 在前端中,性能优化就是优化用户体验,减少响应速度以助于提高网页整体的加载速度,提高性能在建设高性能页面中不可缺少的一部分. 改进性能分为从前端改进和后台改进. 可以说前端是改进编辑页面的一些细节,在建设页面编辑代码是就注意性能的优化,然后集少成多 ,响应和加载时间通过逐步的减少,到达性能的改进, 而且在前端优化中需要的时间和资源都较少. 而要从后台入手改进性能,就相对来说复杂,也会带来很多的改动. 前端 作为前端开发人员,就要把性能优化的重点放在前端优化中.在代码编辑中考虑

高性能网站建设指南pdf

下载地址:网盘下载 内容简介  · · · · · · 本书结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状.产生的原因,以及改善或解决性能问题的原则.技术技巧和最佳实践.重点关注网页的行为特征,阐释优化Ajax.CSS.JavaScript.Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面.在<高性能网站建设指南>中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持.<高性能网站建设指南>内容丰富,主要包

高性能网站建设进阶指南:Web开发者性能优化最佳实践 pdf扫描版

高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中,Souders与8位专家分享了提升网站性能的最佳实践和实用建议,主要包括:理解Ajax性能,编写高效的JavaScript,创建快速响应的应用程序.无阻塞加载脚本, 跨域共享资源,无损压缩图片大小,使用块编码加快网页渲染:避免或取代iframe的方法,简化CSS选择符,以及其他技术.性能是任何一个网站成功的关

读书笔记-高性能网站建设指南(2007)

人的思维往往会进入一种误区,认为"后面的","背后的"东西都是神秘的,伟大的影响力非凡的.所以很多书以"某某内幕"为题,很多程序猿以精通"底层开发"或"后端开发"为荣:同样的当网站出现问题时,我们第一时间想到的也是如何优化"后端".但这并不一定就是正确的,也许从前端入手,改善性能,将事半功倍. 绪言A:前端性能的重要性 在请求脚本时不会发生并行请求.这是因为在多数情况下,浏览器在下载脚本

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

目录: 绪言A: 至少有80%的时间花在了显示Web页面上,并且这些时间是花在html文档下载完毕后发生的. 14条规则: 规则1: 减少http请求 方法: 1. 图片地图(Image Map):在一个图片上关联多个url,目标url的选择取决于用户点击了图片上的哪个位置. 图片地图有两种类型:服务器端图片地图(将所有点击提交到同一个目标url,向其传递用户点击的x,y坐标.Web应用程序将该x,y坐标映射为适当的操作)和客户端图片地图(将用户的点击映射到一个操作).映射通过html的map标

《高性能网站建设指南》

1.目录11页 1.第一章:规则1-减少HTTP请求,介绍为什么额外的HTTP请求会对性能产生巨大的影响,并介绍了减少HTTP请求的方法,包括图片地图.CSS Sprites.使用data:模式的URL内嵌图片,     以及合并脚本和样式表 2.第二章:规则2-使用内容发布网络,强调了使用内容发布网络的优势 3.第三章:规则3-添加Expires头,研究了一个简单的HTTP头是如何通过浏览器缓存来戏剧性地改善web页面性能的 4.第四章:规则4-压缩组件,解释了压缩是如何工作的,以及如何为we

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

(一)绪言 1.绪言A 性能黄金法则: 只有10%~20%的最终用户响应时间花在了下载HTML文档上.其余的80%~90%时间花在了下载页面中的所有组件上. 2.绪言B HTTP概述: HTTP是浏览器和服务器通过Internet进行相互通信的协议. 请求的类型:GET  POST  HEAD  PUT  DELETE  OPTIONS  TRACE. 压缩:浏览器使用Accept-Encoding头来声明它可以支持压缩.服务器使用Content-Encoding头确认响应已被压缩. 条件GET

读书笔记:高性能网站建设

第一章 减少HTTP请求 使用图片地图:当导航栏包含多张图片时,可以将其合并成一张图片,再通过计算位置触发不同的链接 CSS sprites:将图标合并,引入一张背景图,通过CSS控制其位置 内联图片:将图片编码后再放到data后面.可用PHP的base64_encode对图片文件进行编码. 合并脚本和样式文件:理想情况下一个页面一个CSS文件 第二章 使用CDN(Content Delivery Networks) CDN是指内容分发网络 CDN的做法是指将组建分布到其他服务器上 缺点: 响应