《高性能javascript》读书笔记:P1减少跨作用域的变量访问
2014-03-15 12:30
106 查看
前端优化,有两个意义: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++操作一千次:
所以为了减少在访问变量时候产生的计算延时,可以通过新建个局部变量来存储局部变量,最后再返回值,减少访问次数= = 其实挺不符合自己平时的编程习惯,一般都直接访问操作全局变量了,很少考虑用局部变量来临时存储,所以一般涉及多次连续访问全局变量才考虑这种做法:代码如下
除了换个好主机连上个千兆网这样的硬件问题,优化部分的实现方式目前也大致两种,一种是页面级别的优化,通过合并请求文件、设置资源缓存、压缩请求文件大小等方式来降低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高级程序设计(第3版) 读书笔记2 变量,作用域 内存问题
- 多线程编程核心技术读书笔记(二):对象及变量的并发访问(volatile关键字)
- 读书笔记 - js高级程序设计 - 第四章 变量 作用域 和 内存问题
- js闭包实现块级作用域和私有变量的访问
- js跨域访问:js变量作用域
- java变量的作用域和访问修饰符
- 高性能Javascript 数据访问读书笔记
- python属性访问的优先规则 及 变量作用域
- Java的访问修饰符与变量的作用域讲解
- 减少全局变量的作用域
- 《javaScript高级程序设计》读书笔记 (2)变量作用域,内存问题
- C语言中的static变量 和 C++中static变量—生成期、作用域、访问约束、对谁可见等
- [李景山php] 深入理解PHP内核[读书笔记]--第三章:变量及数据类型--变量的作用域
- js变量作用域及访问权限的探讨(2)
- 变量的作用域、生命周期、初始化和访问方法
- 深入理解PHP内核[读书笔记]--第三章:变量及数据类型--变量的作用域
- JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】
- 关于访问修饰符和变量的作用域
- 深入理解PHP内核[读书笔记]--第三章:变量及数据类型--变量的作用域
- 关于Java变量、数组、对象的声明、初始化与访问方式-----《疯狂Java突破程序员基本功的16课》读书笔记----第一章