前端优化,有两个意义: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. Kung fu

    1. originPeople in Primitive society(原始社会)in order to survive,they have to hunt for food efficiently ...

  2. Bootstrap 3 How-To #2 标题,链接与按钮

    这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书,但是,这本书的内容是基于以前版本的,与最新的 3.0 并不一致. 为了方便学习和使用 ...

  3. THE ONE THING PEOPLE WILL MASSIVELY OVERPAY FOR (有一个东西人们是愿意出高价购买的)

    THE ONE THING PEOPLE WILL MASSIVELY OVERPAY FOR有一个东西人们是愿意出高价购买的 by GARY VAYNERCHUK 点此直达湾区日报简评 I don' ...

  4. linux 将foo制定n, m之间行的内容, 追加到bar文件

    sed -ne '196, 207 p' foo >> bar;把文件foo 196-行207行的内容追加到 bar文件

  5. mysql下的常用操作

    本文继 linux下安装mysql,记录下在工作中最常用的mysql语句 MySQL添加字段和删除字段 添加字段: alter table `user_movement_log`Add column ...

  6. ASP.NET MVC4 学习系统四(视图)

    视图(Views)    在ASP.NET MVC框架中,想要返回给用户HTML的控制器操作,就要返回ActionResult类型的ViewResult实例,ActionResult知道如何渲染应答结 ...

  7. CLRS:Insert sort in in c

    #include<stdio.h>#include<string.h>#include<stdlib.h>#include<time.h>#define ...

  8. 详解android.mk-2016.01.18

    1 Android.mk作用 当使用JNI开发时,我们需要创建一个native工程,Android.mk就是一个makefile的配置文件,帮助我们把编写的C/C++代码编译成动态或者静态的链接库. ...

  9. php获取文件创建时间、修改时间

    filemtime ( string filename ) 返回文件上次被修改的时间,出错时返回 FALSE.时间以 Unix 时间戳的方式返回,可用于 date(). 例如:$a=filemtime ...

  10. Linux设备模型 学习总结

    看LDD3中设备模型一章,觉得思维有些混乱.这里从整体的角度来理理思路.本文从四个方面来总结一些内容: 1.底层数据结构:kobject,kset.2.linux设备模型层次关系:bus_type,d ...