前端优化,有两个意义: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++操作一千次:

  

 /*

         .......

 */

 var globalNum = 0;

 /*

         .......

 */

 function add(){
var i =0;
for(i;i<1000;i++){
globalNum++;
}
/*整个函数在对globalNum++时候会跳出当前函数作用域,从上查找全局变量globalNum;如果globalNum的位置居中的话,查找产生的延时就非常大了。此外每次++都会,访问globalNum,整个++的过程中访问了1000次*/
}

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

  

/*
.......
*/ var globalNum = 0; /*
..... */ function add(){
var temp ,i =0;
temp = global;
for(i;i<1000;i++){
temp++;
}
global = temp;
} /*整个过程global仅仅访问了两次,通过temp将跨出作用域的访问降低到两次,优化了访问时间,提高了执行效率。不过...很多时候自己都忘了要这么写,随手直接访问全局变量去了...*/

《高性能javascript》读书笔记:P1减少跨作用域的变量访问的更多相关文章

  1. 高性能JavaScript读书笔记

    零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) ...

  2. 高性能的JavaScript -- 读书笔记

    高性能的JavaScript 一.      加载和运行 将脚本放在底部 脚本下载解析执行时,页面已经加载完成并显示在用户面前 成组脚本 减少外部脚本文件数量,整合成一个文件 延迟脚本 动态脚本元素 ...

  3. 《JavaScript高级程序设计》读书笔记 ---执行环境及作用域

    执行环境及作用域 执行环境(execution context,为简单起见,有时也称为“环境”)是JavaScript 中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们各自 ...

  4. JavaScript读书笔记(4)-变量、作用域和内存问题

    1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Al ...

  5. 高性能javascript学习笔记系列(2)-数据存取

    参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文   当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...

  6. 高性能javascript学习笔记系列(1) -js的加载和执行

    这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...

  7. 高性能javascript学习笔记系列(6) -ajax

    参考 高性能javascript javascript高级程序设计 ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...

  8. 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践

    参考高性能javascript 理解浏览器UI线程  用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程  UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...

  9. 高性能javascript学习笔记系列(4) -算法和流程控制

    参考高性能javascript for in 循环  使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...

随机推荐

  1. Android API 中文 ListView

    正文 一.结构 public class RatingBar extends AbsSeekBar java.lang.Object android.view.View android.view.Vi ...

  2. Android JNI学习之javah命令的正确使用(找了好半天才找到的,汉,网上好多说法都没用)

    按照网上抄来的javah用法一般出错,今天查了一下午在一篇文章(http://www.ibm.com/developerworks/cn/java/j-jtctips/part6/index2.htm ...

  3. 下拉列表autocomplete各种实现方式比较

    方法一:用form 表单的datalist属性,此时会以首字母补充排序.实现效果参考:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_ ...

  4. JavaScript之数组循环 forEach 循环输出数组元素

    var arrayAll = []; arrayAll.push(1); arrayAll.push(2); arrayAll[arrayAll.length] = 3; arrayAll[array ...

  5. 详解Ossim 4.3控制台

    在Ossim 4.2以后的发行版中增加了控制台功能下面加以详细说明,当Ossim 启动之后,在控制台以root身份登录系统后会执行ossim-setup脚本,然后显示如下图1所示,了解这些功能,以及操 ...

  6. jquery的end(),addBack()方法example

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery遍历 slice()方法

    今天做页面,遇到一个滚动的swipe,需要4个<li> 一组,然后在外层加个<ul>,方法如下: $('.xxxxx li').each(function(n){ $('.xx ...

  8. C# 正则表达式及常用正则表达式

    元字符 描述 .点 匹配任何单个字符.例如正则表达式r.t匹配这些字符串:rat.rut.r t,但是不匹配root. $ 匹配行结束符.例如正则表达式weasel$ 能够匹配字符串"He' ...

  9. Data URL

    Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...

  10. javascript之toString()和valueOf()函数

    1.我们为什么要了解这两种方法 众所周知,toString()函数和valueOf函数,这两个函数是Object类的对象生来就拥有的,而且他们还可以允许我们重写,那么,这两个函数到底有什么用呢? 从名 ...