《高性能javascript》读书笔记：P1减少跨作用域的变量访问

浏览数：56 / 时间：2015年06月08日

　　前端优化，有两个意义：1.为了让用户在浏览网页时获得更好的体验 2.降低服务器端的访问压力，节省网络流量。

　　除了换个好主机连上个千兆网这样的硬件问题，优化部分的实现方式目前也大致两种，一种是页面级别的优化，通过合并请求文件、设置资源缓存、压缩请求文件大小等方式来降低HTTP请求次数和请求资源大小，来提高整个网页加载速度，以便于更快的呈现。第二种就是代码级别的优化，通过html 、css、js代码的合理优化，减少在页面渲染过程、动画过程中产生的阻塞、卡顿，优化前端的用户体验。

　　Js代码对页面的渲染可能造成非常大的影响，由部分代码，比如document.write或者是offsetTop这种查询界面信息的函数造成的repaint和reflow会对整个界面布局造成影响。另外在js进行数据计算时产生的延迟阻塞也会影响执行速度，同理的还有inline的js代码（尽量减少inline的js代码、浏览器在执行inline代码时候会阻塞加载其他的js文件并且同时停止对页面的渲染排布）、js代码加载（可以尝试一下lazy load）。

　　P1.减少对全局变量的跨作用域链访问

　　很多时候需要在函数内部访问全局变量，并对全局变量进行操作，比如下面这个代码，目的是在add函数里对全局变量globalNum++操作一千次：

 1 /*
 2 
 3         .......
 4 
 5 
 6 */
 7 
 8 
 9 var globalNum = 0;
10 
11 /*
12 
13         .......
14 
15 
16 */
17 
18 function add(){
19     var i =0;
20     for(i;i<1000;i++){
21          globalNum++;
22     }    
23 /*整个函数在对globalNum++时候会跳出当前函数作用域，从上查找全局变量globalNum；如果globalNum的位置居中的话，查找产生的延时就非常大了。此外每次++都会，访问globalNum，整个++的过程中访问了1000次*/
24 }

　　所以为了减少在访问变量时候产生的计算延时，可以通过新建个局部变量来存储局部变量，最后再返回值，减少访问次数= = 其实挺不符合自己平时的编程习惯，一般都直接访问操作全局变量了，很少考虑用局部变量来临时存储，所以一般涉及多次连续访问全局变量才考虑这种做法：代码如下

/*
   ....... 
*/

var globalNum = 0;

/*
.....

*/

function add(){
  var temp ,i =0;
  temp = global;
  for(i;i<1000;i++){
     temp++;
  }      
   global = temp;
}

/*整个过程global仅仅访问了两次，通过temp将跨出作用域的访问降低到两次，优化了访问时间，提高了执行效率。不过...很多时候自己都忘了要这么写，随手直接访问全局变量去了...*/