I am houbiao beta 0.1

javascript学习笔记之静心温习一下JS优化

分类:Self

很久没码字儿,状态低迷,借此温习一下根基,拿出以前的优化规则温习一下,也再一次鞭策自己,写代码要以效率为首要准则。以下的几点规则是Yahoo早先总结的,我只是拿来借花献佛罢了,现在开始。

HTML5时代用户对于网站的交互更加依赖也更加挑剔,交互就离不开DOM的操作。操作DOM当然就更离不开我们的神器!Javascript!Javascript固然伟大绚烂,但是由之带来的性能问题更是层出不穷,我们应该最大限度的优化(其实应该叫完善)Javascript。Yahoo提出,不论什么脚本,任何时间,任何浏览器上,执行时间都不应该超过100毫秒,但是如果实际执行的时间长于这个底限,我们就该考虑是否应该将进程分解成若干个更小的代码执行段。脚本失控基本上有以下4个方面的原因:

一.在循环中执行太多的操作,解决这个问题的诀窍就是用下面这两个问题来评估每个循环

1.这个循环必须要同步执行么?

2.循环里面的数据,必须要按顺序执行么?

如果1和2都可以否定,那么建议使用setTimeout(function(){},delay)方式将循环体切分为小块进行异步处理。如果一定要循环,那将循环中的定义变量及初始化操作(比如length)操作放到循环外,并尽量使用倒序循环。

 

二.臃肿的函数体

1.在Javascript中,我们应该尽可能的用局部变量来代替全局变量。

2.理解Javascript作用域链(Scope)。

3.理解原型链function.prototyoe。

 

三.过多的递归

1.使用迭代方式替代递归,采用memoization技术优化递归。

2.斐波那契数列的递归算法优化(这两点真的还不太懂,努力研究学习中!)。

 

四.过多的DOM调用(个人认为这个最实际也最亲民)

简单叙述下:在WEB开发中,Javascript中的一个很重要的作用就是对DOM进行操作,那你知道么?对DOM的操作是非常昂贵的(相信看过Javascript方面书的人都知道这点,“过桥费”很贵的),因为这会导致浏览器执行回流(reflow)操作。而执行了过多的回流操作,你就会发现自己的网站变得越来越慢了。我们应该尽可能的减少DOM操作。

回流操作主要会发生在几种情况下:

1.更改窗体大小

2.更改字体

3.添加/移除stylesheet块

4.内容改变哪怕是输入框输入文字

5.CSS伪类被触发,如:hover

6.更改元素的className

7.当对DOM节点执行新增或者删除操作或内容更改时

8.动态设置一个doc.style时

9.当获取一个必须经过计算的尺寸值时,如doc.offsetWidth或者其他任何需要经过计算的CSS值(在兼容DOM的浏览器中,可以通过getComputedStyle函数获取,在IE中,可以通过currentStyle属性获取)

-------------------------------------------------------------------------

看到这暂停一下,先反思一下想想自己都占了几样。

-------------------------------------------------------------------------

解决问题的关键,就是限制通过DOM操作所引发回流的次数:

1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N此创建,1次写入。

2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除。

(1).通过doc.removeChild()或者dom.replaceChild()实现真正意义上的删除。

(2).设置该元素的style.display="none"。

修改操作完成后,将上面的这个过程反转过来,建议使用第二种方式。

3.CSS部分。

另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改,如style.backgroundColor="red"。每次修改元素的style属性,都肯定会触发回流操作,要解决这个问题可以:

(1).使用更改className的方式替换style.xx="xx"的方式。

(2).使用style.cssText=""一次写入样式。

(3).避免设置过多的行内样式。

(4).添加的结构外元素尽量设置他们的position="fixed"或"absolute"。

(5).避免使用表格(现在基本没了,除了汇总表之类)。

(6).避免在CSS中使用javascript expressions(IE Only)。

4.将获取的DOM数据缓存起来,这种方法,对获取那些会触发回流操作的属性(offsetWidth)尤为重要。

5.当对DOM对象进行操作时,应将访问的次数尽可能的降至最低,最简单的,你可以将length属性缓存在一个变量中,这样就能大幅度的提高循环的效率。

6.对字符串进行累加操作时,使用数组的push方法替代,取出时候用join。

以上简单复习一下,后期我们继续逐个详细说。

3278 reads 0 comment

上一篇:javascript学习笔记之匿名函数的写法、传参和递归

暂时还没有回复信息

Leave a comment

*