前端性能优化

前端优化的途径有很多，按粒度大致可以分为两类，

第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;

第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

一、页面级优化

1.减少http请求数

一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。另外，由于浏览器进行并发请求的请求数是有上限的 ，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间。

减少http请求数的方式：

（1）优化页面设计，减少资源的使用

（2）资源合并，尽可能的将外部的脚本、样式进行合并，多个合为一个。

2.异步加载外部资源，避免阻塞页面样式渲染

浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，使得页面样式的加载处于阻塞状态。

（1）将外部脚本置底，由于html是顺序加载的，而一些脚本并不需要优先加载，因为用户第一时间需要看到的是页面

（2）懒加载，懒加载包括模块懒加载，即按需加载和图片资源懒加载（其核心都是异步加载）

二、代码级优化

1.减少对dom树的操作

每一次对dom节点进行增加、修改、删除都会Reflow 或 Repaint，这都是需要消耗资源的。

demo:

// 不好的做法
var dom = $('#target');
for(var i = 0; i < 10; i++){
	dom.append('<p>' + i + '</p>')
}

// 好的做法
var dom = $('#target');
var html = ''; // 定义一个变量，用于组装dom节点
for(var i = 0; i < 10; i++){
	html += '<p>' + i + '</p>';
}
dom.append(html)

2.减少作用域链查找

如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。

demo:

// 低效率的写法：
// 全局变量 
var globalVar = 1;

function myCallback(info) {
  for (var i = 100000; i--;) {
    //每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次 
    globalVar += i;
  }
}

//更高效的写法：
// 全局变量 
var globalVar = 1;

function myCallback(info) {
  //局部变量缓存全局变量 
  var localVar = globalVar;
  for (var i = 100000; i--;) {
    //访问局部变量是最快的 
    localVar += i;
  }
}

总结
　　本文从页面级以及代码级两个粒度对前端优化的各种方式做了一个总结，这些方法基本上都是前端开发人员在开发的过程中可以借鉴和实践的，除此之外，完整的前端优化还应该包括很多其他的途径，例如 CDN、 Gzip、多域名等等。

科学上网点我：http://jiasd.us/11667