前端性能优化小结

2016-05-21

概述

提高性能，最简单也是最显著的方法就是：减少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压缩

  1. 浏览器发送Http request 给Web服务器, request 中有Accept-Encoding: gzip, deflate。 (告诉服务器， 浏览器支持gzip压缩)
  2. Web服务器接到request后， 生成原始的Response, 其中有原始的Content-Type和Content-Length。
  3. Web服务器通过Gzip，来对Response进行编码， 编码后header中有Content-Type和Content-Length(压缩后的大小)， 并且增加了Content-Encoding:gzip. 然后把Response发送给浏览器。
  4. 浏览器接到Response后，根据Content-Encoding:gzip来对Response 进行解码。 获取到原始response后， 然后显示出网页。

待续: 关于图片的优化

附雅虎14条

1. 减少HTTP请求
2. 使用内容分发网络
3. 添加Expires头
4. 压缩组件
5. 将样式表放在顶部
6. 将脚本放在底部
7. 避免CSS表达式
8. 使用外部JavaScript和CSS
9. 减少DNS查找
10. 精简JavaScript
11. 避免重定向
12. 删除重复脚本
13. 配置ETag
14. 使Ajax可缓存