前端优化,有两个意义: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. 云计算PAAS平台测试设计之镜像管理

    下面是云计算PAAS平台页面概览: 今天我们要讲的是镜像管理页面的测试设计: 可以看到,这个页面主要有增删改查四个功能. 1. 查询镜像 (1)易用性:查看镜像查询界面,界面上各组件设计合理.美观.易 ...

  2. 举例说明划分子网,路由器IP地址

    划分子网的方法是从网络的主机号借用若干位作为子网号,主机号相应地减少了同样的位数.在划分子网前,IP地址是两级结构的:网络号,主机号. 划分子网后,两级IP地址在本单位内部就变为三级IP地址:网络号, ...

  3. 这些优化 Drupal 网站速度的超简单办法,你忽略了多少?

    “怎么样能让我的 Drupal 网站更快一些?”是我们最常遇到的一个问题.站点速度确实非常重要,因为它会影响你的 SEO排名效果.访客是否停留以及你自己管理网站所需要的时间. 今天我们就来看看那些通过 ...

  4. x86_64 Ubuntu 14.04 LST安装gcc4.1.2 转载

    由于编译源码软件需要用到gcc4.1.2版本,但是本机已经安装有gcc4.8.4,下载gcc4.1.2源码编译总会出现运行找不到库文件错误,或者i386和x86_64不兼容问题,在http://ask ...

  5. Windows Server 2012下安装Hyper-V虚拟机

    Windows Server 2012下安装Hyper-V虚拟机 Win server 2012系统中Hyper-V 性能进一步提高,广大爱好者都尝试体验它,可是有不少朋友无法正确安装虚拟机,尽管在网 ...

  6. namespace的用法

    C++中采用的是单一的全局变量命名空间.在这单一的空间中,如果有两个变量或函数的名字完全相同,就会出现冲突.当然,你也可以使用不同的名字,但有时我们并不知道另一个变量也使用完全相同的名字:有时为了程序 ...

  7. sql server安装程序无法验证服务账户是什么原因

    为了帮助网友解决“sql server安装程序无法验证服务”相关的问题,中国学网通过互联网对“sql server安装程序无法验证服务”相关的解决方案进行了整理,用户详细问题包括:能是尚未向所有要安装 ...

  8. KVM: 安装Windows virtio半虚拟化驱动

    Install KVM Windows virtio para-virtualized dirver If you can't read Chinese, there's an English ver ...

  9. 要在一般处理程序中获取其他页面的session值

    1.要在一般处理程序中获取其他页面的session值,需要引用名空间: using System.Web.SessionState; 2.然后继承一个接口:IRequiresSessionState, ...

  10. Java c3po

    1.准备通用类 (引用:c3p0-0.9.1.2.jar) package nankang.test; import java.sql.Connection; import com.mchange.v ...