《高性能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 ...
随机推荐
- CCombobox AddString出错
1.CComboBox放在对话框构造函数中, 这时CCombobox对象还没建立, 所以出错, 应该放在OnInitDialog()中初始化. 2. 使用的vs2005以上的IDE, 拖拉控件, 添加 ...
- android 解决ScrollView嵌套ListView的问题,不能全屏,全屏不能显示下面控件
在开发中遇到ScrollView嵌套ListView的问题,最开始发出不能全屏,效果是这样的: 但我想要的效果是这样的: 下面看一下布局文件: <?xml version="1.0&q ...
- Flash与IE奇怪的关键字冲突
我有一个小小的swf文件,用来播放声音,加入到HTML后,在Firefox/chrome下播放正常,唯独IE8提示 消息: 对象不支持此属性或方法 行: 48 字符: 3 代码: 0 URI: ... ...
- 如何绕过CDN找源站ip?
这是一个总结帖,查了一下关于这个问题的国内外大大小小的网站,对其中说的一些方法总结归纳形成,里面具体发现ip的方法不是原创,所有参考的原贴都也贴在了后面,大家可以自行看看原贴. 首先,先要明确一个概念 ...
- 火箭18号秀光膀为父母割草(FW)
火箭18号秀光膀为父母割草 一夜致富不改本色 来源:新浪 2015年06月30日 分享到: 更多 收藏 分享 被浏览5次 <ignore_js_op id="r_article_i ...
- TCP/IP详解学习笔记(1)-- 概述
1.TCP/IP的分层结构 网络协议通常分不同层次进行开发,每一层分别负责不同的同信功能.TCP/IP通常被认为是一个四层协议系统. 如图所示. 1)链路层(数据链路层 ...
- ionic pull to refresh 下拉更新頁面
有些項目都用到了下拉更新頁面的效果: 1. 在index.html 中添加ion-refresher 指令 且在我們需要更新內容的外面 添加 如 <ion-refresher pulling-t ...
- 用C#访问SSRS自动导出SSRS报表
一. 新建一个winform应用程序WindowsFormsApplication1 二. 添加web引用 . 报表服务:http://dbpdhk ...
- js的数组申明
//数组的3种申明方法,如下example //数组是一种object类型 通过typeof 来检查 //example 1 var arr= new Array("h",&quo ...
- 【MySQL】删除大表的讨论【转】
转自http://tech.ddvip.com/2013-07/1373269453198566.html 微博上讨论MySQL在删除大表engine=innodb(30G+)时,如何减少MySQL ...