概述
提高性能,最简单也是最显著的方法就是:减少HTTP请求的数量。每一个HTTP请求除了有TCP开销外,还包含大量的头信息。保持最小的独立请求连接数可以保证用户的页面加载速度更快。让页面和其资源文件保持较小的体积将减少网络用时——对任何互联网应用而言,这才是真正的瓶颈。基于MVC的JavaScript Web富应用开发
合并型优化
- 将多个脚本合并为一个脚本, 将多个CSS合并为一个样式表,minify github
- 使用CSS Sprites技术合并多张小图为一张大图。
感受型优化
理解浏览器下载资源也很重要,为了加速页面渲染,浏览器并行下载所需的资源,但是对于外部脚本并非如此。
当浏览器开始下载外部脚本时,在外部脚本下载、解析并执行完毕之前,不会下载其他内容。
- 几乎每一个前端程序员都知道应该把script标签放在页面底部。
- 还有一种方法是设置defer属性——告诉浏览器该脚本不会在页面加载完成之前操作DOM, 类似于在脚本中使用window.onload事件
<script src="foo.js" type="text/javascript" charset="utf-8" defer></script>
。这样实际上并没有对下载的速度,下载的数量做出优化,但是用户会提前看到页面的内容与相应的样式,提高感受速度。
就近存储型优化
缓存: 通过设置Expires头以保证缓存长时间有效,同样重要的有如何自动使缓存失效(在需主动修改静态资源时),一种有效的技术就是——在引用资源文件的URL查询参数中添加文件修改的时间
<link rel="stylesheet" href="master.css?1296085785">
Expires 的升级版Cache-Control,浏览器 HTTP 协议缓存机制详解使用CDN,内容分发网络(Content_delivery_network)为你的站点提供静态资源内容服务,以减少它们的加载时间。使用就近的服务器响应资源。
内容分发网络节点会在多个地点,多个不同的网络上摆放。这些节点之 间会动态的互相传输内容,对用户的下载行为最优化,并借此减少内容供应者所需要的带宽成本,改善用户的下载速度,提高系统的稳定性。
内容分发网络所需要的节点数量随着需求而不同,依照所需要服务的对象大小,有可能有数万台服务器。
压缩型优化
将js文件压缩,工具有YUI Compressor等。
Gzip压缩
- 浏览器发送Http request 给Web服务器, request 中有Accept-Encoding: gzip, deflate。 (告诉服务器, 浏览器支持gzip压缩)
- Web服务器接到request后, 生成原始的Response, 其中有原始的Content-Type和Content-Length。
- Web服务器通过Gzip,来对Response进行编码, 编码后header中有Content-Type和Content-Length(压缩后的大小), 并且增加了Content-Encoding:gzip. 然后把Response发送给浏览器。
- 浏览器接到Response后,根据Content-Encoding:gzip来对Response 进行解码。 获取到原始response后, 然后显示出网页。
待续: 关于图片的优化
附雅虎14条
- 减少HTTP请求
- 使用内容分发网络
- 添加Expires头
- 压缩组件
- 将样式表放在顶部
- 将脚本放在底部
- 避免CSS表达式
- 使用外部JavaScript和CSS
- 减少DNS查找
- 精简JavaScript
- 避免重定向
- 删除重复脚本
- 配置ETag
- 使Ajax可缓存