前端性能优化方案

　　1.在js中尽可能减小闭包的使用(闭包不会释放栈内存)

　　　　A:循环进行事件绑定时，尽量使用自定义属性，而不用建立闭包来存储信息。

　　　　B:在最外层造成一个闭包，把一些后期须要的公共信息进行存储，而不是每个方法都建立一个闭包（例如单例模式）。

　　　　C：尽量手动释放掉不须要的内存。

　　　   。。。

　　2.进行js和css文件的合并，减小http请求的次数，尽量将文件进行压缩，减小请求资源的大小。

　　　　A：webpack这种自动化构建工具，能够帮咱们实现代码的合并和压缩（工程化开发）

　　　　B:在移动端开发过程当中，若是代码不是不少，直接将css和js写html中。

　　3.尽可能使用字体图标和SVG图标，来代替传统的PNG等格式的图片（字体图标等是矢量图）

　　

　　4.减小对DOM的操做（主要是减小DOM的重绘和回流（重排））

　　　　A：关于重排的分离读写（浏览器会将连续dom操做一块儿缓存起来一块儿操做）

　　　　B:使用文档碎片或者字符串作数据绑定（DOM的动态建立）

　　5.js避免“嵌套循环”（会额外增长不少次循环次数）和“死循环”（浏览器会死机）

 

　　6.采用图片“懒加载”，加快第一次加载的速度，实际并无减小请求次数

　　　　步骤：开始加载页面是，全部的真实图片都不去发送请求，而是给一张占位的背景图，当页面加载完后，而且图片出如今但是区域再去作图片加载。

 

　　7.利用浏览器和服务器端的缓存技术（304缓存），把一些不常常变动的资源进行缓存，例如js和css文件。目的就是减小请求大小。

 

　　8.尽量使用事件委托来处理绑定的操做，减小DOM的频繁操做。

 

　　9.减小css表达式的使用

#box{
  position:fixed;
  left:  expression(document.body.offsetWidth-110+'px');
  top:  expression(document.body.offsetWidth-110+'px');
}

　　10.css选择器解析规则从右到左进行解析

.container .link a{
  先找到全部的a,再次筛选.link类中 ，最后再找.container类中。。
  因此应减小标签选择器的使用。
}

　　11.css雪碧图技术(css sprite/css 图片精灵)

　　　　把全部相对较小的资源图片聚集到一张大图上，经过背景定位展现对应的小图。

 

　　12.避免重定向（301：资源永久转移/302：暂时转移）

　　

　　13.减小cookie的使用（最主要是减小本地cookie储存内容的大小），由于客户端操做cookie的时候，这些信息老是传来传去。

 

　　14.页面中数据获取采用异步编程和延迟分批加载

　　　　使用异步获取数据，是为了下降http通道的阻塞，不会由于数据没有请求而耽误下面的渲染，提升页面加载速度。（能够将须要动态绑定数据的区域先隐藏，等数据返回绑定完成再让他显示）

　　　　延迟分批加载相似于图片懒加载，是为了减小页面第一次加载请求的次数。

　　15.页面出现音视频标签，咱们不让页面加载的时候加载这些资源（资源太大）

　　　　方案：只需设置preload=“none”,页面加载完时就会开始加载。

 

　　16.交互时，数据尽量基于json格式进行传送（处理方便，资源偏小）==》相对于XML

 

　　17.进行js封装，减小冗余代码。

 

　　18.css中设置定位后，最好使用z-index改变层级，让盒子不在同一平面上，性能会提升一丢丢。

 

　　19：基于AJAX的get请求根据需求产生缓存（非304），但不建议使用。

 

　　20.尽可能减小filter属性滤镜的使用。

 

　　21.css导入尽可能减小@import是同步操做，资源返回才向下渲染，而link是异步请求。

　　重量级优化：CDN加速（有钱上面的都是浮云。）

 

　　22.配置ETAG（有点相似304缓存）

 

　　23.使用window.requestAnimationFrame（js的帧动画）代替传统的定时器动画。

 

　　24.减小递归的使用，避免栈内存嵌套，尽可能使用尾递归。

 

　　25.避免使用iframe

 

　　26.利用H5提供localstorage本地储存或者manifest离线缓存，下次页面加载直接从本地获取，减小请求次数。

 

　　29.基于script调用js的时候，使用defer或者async来异步加载。

 

===前端性能优化方案====

　　第一类：减小请求次数和请求大小。

　　第二类：代码优化：

　　　　　　--》利于SEO

　　　　　　--》利于拓展维护

　　　　　　--》有利于减小性能优化

　　第三类：DNS及HTTP通讯方式的优化

　　额外技巧：

　　　　1.将css放在body上，将js放在body下（元素时带着样式渲染，js操做元素）。

　　　　2.能用css实现就不要去使用js操做元素，能用原生js解决的就不要使用使用插件，绝对不使用FLASH（除了去兼容低版本的浏览器的播放）。

　　　　==》css处理动画的性能优于js,并且css的transform变形还开启硬件加速。

　　　　3.js减小eval的使用，eval会执行两次。（固然该用仍是用）。

　　　　4.使用keep-alive，客户端与服务器端创建长链接。

　　　　5.尽可能使用设计模式来管理代码（单例，promise，发布订阅），方便维护和升级。

　　　　6.开启服务器的gzip压缩。

　　　　7.不要出现无效的连接，不利于SEO。提升关键字曝光率，img设置alt、设置meta标签，标签语义化。