前端性能优化方案

　　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标签，标签语义化。

转载于:https://www.cnblogs.com/angle-xiu/p/11347024.html