页面性能优化

页面优化的目的：
1.从用户角度：优化能够让页面加载得更快，对用户操作响应更及时，提高用户使用的体验
2.从服务商角度：优化能够减少页面请求数，减小请求所占用带宽，节省可观的资源

提升页面性能的方式：
1.资源压缩合并，减少HTTP请求

1. 图片，JS，CSS等资源的打包压缩
2. 利用CSS Sprites 合并CSS小图片，减少请求
3. 代码结构优化，高复用，低耦合，减少重复代码

2.非核心代码异步加载
样式表置于顶部，脚本置于页面底部，通过异步加载的方式，避免页面资源引入时，造成的阻塞。

3.利用浏览器缓存
利用浏览器缓存，强缓存或者协商缓存，给网络资源设定有效期，用户可以重复使用本地的缓存，减少对源服务器的请求，减少网络带宽的消耗，间接降低服务器的压力。并且减少网络延迟，加快页面打开速度

4.使用CDN
CDN(Content Distribute NetWork，内存分发网络)的本质上仍然是一个缓存，而且将数据缓存在离用户最近的地方，是用户以最快速度获取数据。CDN一般缓存的是静态资源，如图片，文件，CSS，脚本，静态页面等。这些文件访问频率很高，将其缓存在CDN可极大改善网页的打开速度

5.预解析DNS
DNS请求虽然占用带宽很少的带宽，但会有很高的延迟，在移动网络会更加明显，通过DNS预解析可以很好的降低延迟。
浏览器在https协议下默认dns预解析不可以，可以通过设置打开

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

6.图片懒加载
对于图片较多的网站，可以通过图片懒加载，按需加载，减少http请求及资源下载，减少了服务端的压力，并且可以明显页面响应速度，增强用户体验

7.Reflow和Repaint
页面在进行reflow和repiant时，需要重新验证并计算渲染树，会比较消耗页面性能。所以我们应尽量减少reflow和repaint。例如，可以将修改元素样式的操作积攒一批，然后统一做一个reflow。

8.DOM相关优化
DOM操作时脚本中最消耗性能的一类操作，好在vue框架的虚拟dom较好的解决了这个问题，在使用过程中，减少reflow和repaint操作，可以较好的提升页面性能

9.减少Cookie存储
去掉不必要的cookie，将cookie大小减小到最小。由于cookie在访问对应的域名的资源时，会通过http请求发送到服务器，因此，减小http请求，能减小http报文的大小，提高响应速度。并且设置合理的过期时间，也就是利用强缓存或者协商缓存。

10.服务端渲染
使用SSR(服务端渲染)后端渲染，数据直接输出到HTML中。这一点在vue框架中有很好的实现

11.http请求保持keep-Alive
获取静态资源之前，要建立通道。如果每次获取静态资源都要建立通道，会加大传输的时间。在vue框架中，我们可以通过keep-alive将状态保存在内存中，防止重复渲染DOM

12.避免重定向
浏览器访问页面时，通过重定向发起两次请求，会极大的影响性能，除非不可避免的登陆校验等等的，尽量避免重定向