概述
提高性能，最简单也是最显著的方法就是：减少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可缓存
网友评论