网站性能优化

　　网站前端的优化仍是很重要的，减小请求数，减小页面打开时间都能对页面访问性能提高很多，最近公司就在全站作优化。

　　因为公司的站已经有两三年的历史了，平时pm提的需求会分给不一样的前端人员作，对插件引入和请求外部资源也没有明确的规定，都是每一个人完成业务需求就能够了，长此以往页面就比较臃肿，一看请求数特别多，因此最近咱们在作整站优化，减小请求数和提高页面打开时间。　　

　　下面大概总结下本身此次的优化的点：

　　1，使用频率较高的JS插件压缩合并   js/css combine

　　说明：页面出现频率较高的插件能够合并到公用文件（能够取名为：plugins.min.js），好比"轮播插件"，"弹窗插件"，“脚本文件加载插件”等。

　　举例：

　　若是几个js插件依赖程度特别高，则合并在一块儿，其余插件分开合并。

　　

　　  好比合并这两个插件，合并后文件名改成：jquery-1.8.0-LAB.2.0.3.min.js

　　总之合并规则就是：文件.版本号-文件.版本号-文件.版本号.min.js => a.1.0-b.1.0-c.1.0.min.js

 

　　2，有些功能，用到的时候再加载js，好比点击某个按钮触发某个功能，这个功能的js脚本经过按钮点击事件再触发，不用的时候不加载

　　3，小图标合并成雪碧图，这个不用多解释了吧   css sprites

　　4，能使用css绘制的小图标尽可能别用图片，好比三角形，或者x,再或者若有些小图标能够用base64弄，能够搜在线base64转换的，这样减小请求数，还能够优先提早加载出来，增强了体验感

　　5，减小图片大小，好比带alpha通道的png图片，可使用神器 https://tinypng.com/ 在线压缩下，能减小图片大小，而且保留alpha通道，压缩先后基本上没啥区别，已经让咱们的设计鉴定过可行，这是咱们本身站用的：

　　　　

　  6，资源加载顺序，因为浏览器自上而下加载，遇到资源文件会加载资源文件，阻塞进程，若是把js放在head里，会影响样式显示,出现白色页面，影响体验，尽可能按照顺序排列文件：

　　　　重要的meta声明标签--->css文件--->页面主要内容布局标签--->js文件，插件等

　  7，减小标签嵌套层级

　　

　　进阶：

　　1：cookie-free

　　当浏览器请求一个静态资源的时候，会同时一并发送此域名的cookie，可是这时的cookie是不必的，若是请求资源较多网速很差的话，就会浪费用户的流量而且加大网络开销，这个时候采用一个彻底独立的域名来server静态资源，这样请求的时候就不会携带cookie了，减小了没必要要的开销

　　2：domain 并发数限制

　　如今的浏览器广泛都是并发加载资源的，可是同一时间针对同一域名下的请求有必定数量限制，同一个domain通常来讲也只能同时并发获取4-8个资源，好比css文件中引入了图片的话，加载的时候可能阻塞后续资源的加载，再或者资源较多的时候，这个时候能够适当的加大并发请求数量，好比把资源分散在其余域名下，这样同一时间内就能够更多的并发资源，可是不要太多域名，通常两三个就能够了，好比咱们公司图片就放在一个专门的图片服务器上

　　3：减小首屏加载时间，常见的好比图片懒加载（jquerylazyload）,或者对某些dom元素分屏加载（textarea包裹住容器，而后js判断加载，我以前写过）等等，方法比较多

　　4：dns-prefetch

　　　  预解析也是咱们首次使用，一次DNS解析耗费20-120 毫秒，减小DNS解析时间和次数是个很好的优化方式就是当你浏览网页时，浏览器在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页连接无需DNS解析，减小浏览者等待时间，提升用户体验，如今淘宝网已经在用了：

　　　　

　　  5：减小浏览器重排

　　　　这个比较常见，其实就是当dom节点的几何属性发生变化的时候，浏览器会从新计算此节点的属性，而后再根据新的计算好的渲染树从新绘制这部分页面，好比改变了dom元素的宽高间距等等，都会从新计算渲染数，触发浏览器的重排，并且容器改变属性值后，子节点甚至其兄弟节点都会重排，一系列的重排影响了页面性能，经常使用优化方法有这几种：

　　　　1，若是要js设置style属性值的话，没设置一次就会触发一次重排，性能开销较大，因此最好经过添加classname的方式，只重排一次。　

　　　　2，再或者常见的，好比动画元素，属性值在不停的变化，能够给position设置成absolute或者fixed，使其脱离文档流，这样就不会影响其余元素触发重排，也起到优化做用

　　　　3，若是要对一个元素重复操做的话，最好先设置其display:none,使其脱离文档流，这样不会影响其余元素重排，设置完后再显示出来

　　　　4，在获取一些元素属性值时，最好用一个变量保存起来，由于当获取一些属性时，浏览器为取得正确的值也会触发重排，好比offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight等等

 　　

　　以上就是咱们公司需求中平时常常用到的一些优化技巧，固然还有不少其余优化方案，总之我的认为优化的思路就是，必定要细致，不要不在意比较小的消耗，资源多了小消耗加起来也很多了，苍蝇腿也是肉，得作到细致细心，才能优化好。