《高性能javascript》读书笔记:P1减少跨作用域的变量访问
前端优化,有两个意义: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减少跨作用域的变量访问的更多相关文章
- 高性能JavaScript读书笔记
零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) ...
- 高性能的JavaScript -- 读书笔记
高性能的JavaScript 一. 加载和运行 将脚本放在底部 脚本下载解析执行时,页面已经加载完成并显示在用户面前 成组脚本 减少外部脚本文件数量,整合成一个文件 延迟脚本 动态脚本元素 ...
- 《JavaScript高级程序设计》读书笔记 ---执行环境及作用域
执行环境及作用域 执行环境(execution context,为简单起见,有时也称为“环境”)是JavaScript 中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们各自 ...
- JavaScript读书笔记(4)-变量、作用域和内存问题
1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Al ...
- 高性能javascript学习笔记系列(2)-数据存取
参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文 当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...
- 高性能javascript学习笔记系列(1) -js的加载和执行
这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...
- 高性能javascript学习笔记系列(6) -ajax
参考 高性能javascript javascript高级程序设计 ajax基础 ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...
- 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
- 高性能javascript学习笔记系列(4) -算法和流程控制
参考高性能javascript for in 循环 使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...
随机推荐
- g++/gcc 链接头文件 库 PATH
转自http://blog.csdn.net/kankan231/article/details/24243871 在Linux下编译链接或运行c/c++程序时可能会遇到找不到头文件,找不到库文件的错 ...
- TestCase--网站登录模块
以京东的登录页面为例 测试用例设计如下: 一.功能测试 1. 什么都不输入,点击登录按钮,系统是否给出提示2. 输入正确的用户名和密码,点击登录按钮,验证是否能正确登录3. 输入错误的用户名.正确的密 ...
- hough变换
//c.h typedef unsigned char BYTE;typedef unsigned short WORD;typedef unsigned int DWORD;typedef long ...
- 6-10k招几个.NET开发工程师(工作地点:成都)
目前工作的公司是一家做新加坡公司在成都的研发中心,目前有个项目组在做电子医疗记录(EMR)软件系统,在新加坡卖得还不错,由于以前版本的技术有障碍(主要采用WPF技术),目前老板决定投资用比较主流的技术 ...
- x86_64 Ubuntu 14.04 LST安装gcc4.1.2 转载
由于编译源码软件需要用到gcc4.1.2版本,但是本机已经安装有gcc4.8.4,下载gcc4.1.2源码编译总会出现运行找不到库文件错误,或者i386和x86_64不兼容问题,在http://ask ...
- python中get、post数据
方法一:urllib2 参考:http://www.cnblogs.com/chenzehe/archive/2010/08/30/1812995.html post: #!/usr/bin/pyth ...
- 学习练习 使用Servlet实现用户注册功能
package com.hanqi.www; import java.io.IOException; import javax.servlet.ServletException; import jav ...
- SVN与TortoiseSVN实战:冲突详解(一)
硬广:<SVN与TortoiseSVN实战>系列已经写了三篇,第一篇<SVN与TortoiseSVN实战:从入门到精通>,第二篇<SVN与TortoiseSVN实战:标签 ...
- js跳转页面方法(转)
<span id="tiao">3</span><a href="javascript:countDown"></a& ...
- hadoop-集群管理(2)——内存设置
http://www.cnblogs.com/yuechaotian/archive/2013/03/08/2949607.html 1. 内存 hadoop为各个守护进程(namenode,seco ...