这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 数据存储和 DOM 编程的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
数据存储
· 在 javascript 中,数据存储的位置会对代码整体性能产生重大的影响。
· 数据存储共有 4 种方式:字面量、变量、数组、对象成员。
· 要理解变量的访问速度,就要理解作用域。由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量 (即除起始位置之外的外层作用域变量) 更快。即变量处在作用域的位置越深,访问速度越慢。这也就说明,访问全局变量的速度是最慢的。 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度。
因此,常见的一些提高数据访问速度的方法有:
①避免使用 with、try-catch 中的 catch 语句,因为它会改变执行环境的作用域链。
②尽量少用嵌套对象、避免对象嵌套过深。
③可以把常需要访问的对象成员、数组项、跨域变量保存在局部变量中。
DOM 编程
我们知道用 javascript 操作 DOM 会影响性能,这是为什呢。这个问题是 "天生" 的。
因为 DOM 是一个独立于语言的,用于操作 XML 和 html 文档的程序接口,而客户端脚本编程大多数时候是和底层文档打交道。所以推荐的做法就是尽可能少操作 DOM。
有这么一些小技巧:
①如果需要多次访问某个 DOM 节点,使用局部变量存储它的引用。
②小心处理 HTML 集合,因为它实时联系着底层文档。
例如:
- var divs= document.getElementsByTagName('div');
- for(var i = 0;i < divs.length; i++){
- document.body.appendChild(document.creatElement('div'))
- }
这是一个死循环,原因就是 divs.length 每次迭代都会增加,它反映的是底层文档的当前状态。
因此,我们在需要遍历某个 HTML 集合的时候,可以先把长度缓存起来再使用。而如果是要经常操作的集合,可以把整个集合拷贝到一个数组中。
③使用一些速度更快的 API
例如:
- childNodes -> children
- childElementCount -> childNodes.length
- firstElementChild -> firstChild
- lastElementChild -> last Child
- getElementByTagName ->querySelectorAll
④注意重绘和重排
1. 由于每次重排都会产生计算消耗,大多数浏览器通过队列化修改并批量执行来优化重排过程。
而获取布局信息的操作会导致队列刷新,如下方法:
offsetTop,offsetLeft,offsetWidth,offsetHeight、 scrollTop,scrollLeft,scrollWidth,scrollHeight、 clientTop,clientLeft,clientWidth,clientHeight、 getComputedStyle
因为这些属性或方法需要返回最新的布局信息,因此浏览器不得不执行渲染列队中的 "待处理变化" 并触发重排以返回正确的值。
2. 最小化重绘和重排,合并多次对 DOM 和样式的修改,如
- var el = document.getElementById('mydiv');
- el.style.margin = '5px';
- el.style.padding = '2px';
- el.style.borderLeft= '5px';
以上,修改了三个样式,每个都会影响元素的几何结构,最糟糕的情况下会导致三次重排 (大部分现代浏览器为此做了优化,只会触发一次)
可以被优化为:
- var el = document.getElementById('mydiv');
- el.style.CSSText = 'margin = '5px';padding = '2px';borderLeft= '5px';
3. 需要对 DOM 元素进行一系列操作时,可以通过以下步骤:
1)使元素脱离文档流
2)对其应用多重改变
3)把元素带回文档中
具体方法有
· 隐藏元素、应用修改、重新显示
· 使用文档片段,在别的地方构建一个子树,再把它拷贝回文档
· 将原始元素拷贝到一个脱离文档的节点,修改后再替换原始元素
⑤动画中使用绝对定位,使用拖放代理。
⑥使用事件委托来减少事件处理器的数量。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0604/327865.html