web性能优化

1.减少http请求数量

到终端用户的响应时间80%花在前端：大部分用于下载组件（js/css/image/flash等等）。减少组件数就是减少渲染页面所需的http请求数。

减少组件数的一个方法就是简化页面设计。保持富内容的页面且能减少http请求，可以从以下几点实现：

①，合并文件，如合并js，合并css都能减少请求数（用webpack打包）。

②，雪碧图可以合并多个背景图片，通过background-image 和 background-position 来显示不同部分。

2，减少DNS查询

就像电话簿，你在浏览器地址栏输入网址，通过DNS查询得到网站真实IP。

DNS查询被缓存来提高性能。这种缓存可能发生在特定的缓存服务器，或者用户的计算机。DNS信息留存在操作系统DNS缓存中，大多浏览器有自己的缓存，独立于操作系统缓存。只要浏览器在自己的缓存里有某条DNS记录，它就不会向操作系统发DNS解析请求。

当客户端的DNS缓存是空的，DNS查找次数等于页面中的唯一域名数。

所以：

由于DNS查找是需要时间的，而且它们通常都是只缓存一定的时间，所以应该尽可能地减少DNS查找的次数。

减少DNS查找次数，最理想的方法就是将所有的内容资源都放在同一个域(Domain)下面，这样访问整个网站就只需要进行一次DNS查找，这样可以提高性能。

但理想总归是理想，上面的理想做法会带来另外一个问题，就是由于这些资源都在同一个域，而浏览器针对每个域只有一定数量的并行度（不同浏览器并行数量不同），那么就会出现下载资源时的排队现象，这样就会降低性能。

如果想减少dns查询，当同源资源过多就会出现下载资源排队，想不排队就又得增加DNS请求。

所以，折中的做法是：建议在一个网站里面使用至少2个域，但不多于4个域来提供资源。我认为这条建议是很合理的，也值得我们在项目实践中去应用

3.使用CDN

CDN是一群不同地点的服务器，可以更高效地分发内容到用户。一些大公司有自己的CDN。

用户离你的服务器越近，响应时间越少，因此使用CDN，用户可以以最短的路径，最快的速度对网站进行访问。因此，CDN可以加速用户访问速度，减少源站中心负载压力。

4.HTTP缓存

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有：缓解服务器端压力，提升性能(获取资源的耗时更短了)。对于网站来说，缓存是达到高性能的重要组成部分。缓存需要合理配置，因为并不是所有资源都是永久不变的：重要的是对一个资源的缓存应截止到其下一次发生改变（即不能缓存过期的资源）。

服务器可以通过设置Cache-Control或ETag头，来实现缓存。

关于cache-cotrole ETag

5.Cookie

http cookie的使用有多种原因，比如授权和个性化。cookie的信息通过http头部在浏览器和服务器端交换。也就是说每次请求与响应都会带上cookie，尽可能减小cookie的大小来降低响应时间。

①，消除不必要的cookie。

②，尽可能减小cookie的大小来降低响应时间。

③，注意设置cookie到合适的域名级别，则其它子域名不会被影响。

④，正确设置Expires日期。早一点的Expires日期或者没有会尽早删除cookie，优化响应时间。

6.HTML文档顺序

①标签放在，这样浏览器就会更早得到css样式，可以加快页面样式的渲染。当我们将css放在底部，页面可以正常逐步呈现，但在css下载并解析完毕之后，已经呈现的文字和图片就要用新的样式重绘了，这就是“无样式内容的闪烁”，这将是一种不好的用户体验。

②