什么是性能优化？
就是让用户感觉你的网站加载速度很快。。。哈哈哈。
分析
让我们来分析一下从用户按下回车键到网站呈现出来经历了哪些和前端相关的过程。
- 缓存 首先看本地是否有缓存，如果有符合使用条件的缓存则不需要向服务器发送请求了。
- DNS查询
- 建立TCP链接
- 发送HTTP请求
****** 后台进行相关处理，前端等待 ****** - 接收缓存
- 接受完成，浏览器开始解析HTML
- 浏览器按行解析HTML，首先解析DOCTYPE，看是HTML还是XML。。。
- 不同的浏览器解析完一行，做出的响应不一样，有的会直接渲染有的则等到完全解析完（包括css）再进行渲染。
- CSS在渲染的时候Chrome会阻塞HTML渲染，IE不会。JS则一定会阻塞HTML的解析。注意有最大同时下载数量。
对策
对DNS ---- 减少DNS查询次数（尽量少的域名）
对TCP链接
- 连接复用 ---- 在请求头中设置
xhr.setRequestHeader("Connection", "keep-alive");
大量的连接每次连接关闭都要三次握手四次分手的很显然会造成性能低下，因此http有一种叫做keepalive connections的机制，它可以在传输数据后仍然保持连接，当客户端需要再次获取数据时，直接使用刚刚空闲下来的连接而不需要再次握手。
- 因为发送请求时会带上cookie，所以可以减小其体积来优化速度，再就是用没有cook ie的域名（比如CDN）
- 服务器端设置cache-control，在设置的时间内可以直接不发请求。
- 同时发送多个请求，请求的数量限制是对于一个域名来说，因此可以适当的增加请求的域名来减少下载的排队时间。
对接收响应
- 使用Etag，服务器将接收到的Etag值与服务器存储的值做对比，如果相同则返回304，可以尽量少的减少传输的体积。
- 在请求头中设置
Accept-Encoding: gzip, deflate,这样服务器传送给客户端的就是gzip编码的response（文件后缀是.gz）。
其他优化方法
- 将CSS放到
<head>,将js文件放到<body>的最后面。CSS放前面是因为可以让页面一加载出来就可以有样式，而且有的浏览器即使放在最后他也要等到css加载完才显示页面。而js放在最后是因为他会阻塞HTMl的渲染。在HTML渲染之前准备好js，我们的js也获取不到DOM节点，而且没有js我们的页面一般也不会有碍观瞻。 - 懒加载
- 预加载
- 避免空src的图片
接下来说一下CDN
CDN即Content Delivery Network(内容分发网络)。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
)
![[博客..配置？]博客园美化](http://pic.xiahunao.cn/[博客..配置？]博客园美化)
