项目静态资源性能优化从响应30S变成1S内

由于部署到服务器上面的项目，受带宽限制，受资金限制，导致不得不把项目优化到极致，下面就把思路分析给朋友们，喜欢的就点赞，不喜欢也不要喷。(备注一下 这里优化的是静态资源，程序的优化(大多看设计思想和架构了)

未优化前：
100 requests请求 --传输 1.3M --finish 完成大概20多S （这个根据服务器带宽而且，1M带宽 传输大概125kb/s 越大带宽钱越多，当然传输越快，速度越快）

这个从服务器地址访问的截图 --优化效果图:
26 requests 请求 — 传输141KB — finish完成 355ms

从哪些方面下手优化呢:
（1）css放到页面前面 js放到末尾 (面试题哟)

 CSS放头部在加载html生成DOM tree的时候，就可以同时对DOM tree进行渲染。
 javascript可能会改变DOM tree的结构，所以需要一个稳定的DOM tree。
 javascript加载后会立即执行，中断html的解析过程 如果外部脚本加载时间很长 同时会阻塞后面的资源加载。

(2) 多个css 合并成一个css 多个js合并成一个js
通过自动化构建工具gulp webpack这些都可以搞定

(3) 适当采用CDN加速，通过国内的CDN加速 效果还是比较明显
CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求
重新导向离用户最近的服务节点上 。如果你服务器加载访问资源慢，可以试一下CDN …比如加在jquery.js 这些文件，你可以试一下CDN加速

（4）去掉每个页面不必要的引用关系。特别是一些没有用的js 直接删除，多放一个，就会影响，
多检查检查。

(5) 上面都弄完之后，可以提高50%的速度了，在加上 一个gzip 压缩，在优化50%的基础上 在优化50%的效果。
最后 让你项目飞起来 就这么容易…

当然 还有很多优化措施 。。

你可以去感受一下:（欢迎发表感言 讨论）
建议使用浏览器 谷歌或者火狐 如果使用IE 部分组件兼容性问题
点击访问后台