
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
下面昆明达内培训小编和大家聊聊JavaScript性能优化中的DOM,首先我们来看性能测试,在线性能测试中我们可以知道。
1.第一段每一次循环都直接用DOM赋值
2.第二段是先将内容缓存到局部变量中,最后使用一次DOM赋值。
测试结果以每秒钟执行测试代码的次数(Ops/sec)显示,这个数值越大越好。
除了这个结果外,同时会显示测试过程中的统计误差,以及相对最好的慢了多少(%),统计误差也是非常重要的指标。
2)DOM和JavaScript
文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API)。
浏览器通常会把DOM和JavaScript独立实现。昆明明达内小编觉得就比如Chrome中使用Webkit的WebCore库渲染页面,用V8作为JavaScript引擎。
访问DOM天生就慢,将DOM和JavaScript比喻为两个岛屿,昆明达内培训小编觉得两处同行要收过桥费,ECMAScript访问DOM的次数越多,过桥费越贵,因此推荐的做法是尽可能减少过桥的次数。
选择器API
有时候为了得到需要的元素列表,达内培训小编需要组合调用getElementById等并遍历返回的节点,但这种繁密的过程效率低下。
使用CSS选择器是一种定位节点的便利途径,querySelectorAll就是DOM的原生方法。
//DOM组合API
var elements = document.getElementById('menu').getElementsByTagName('a');
//替换为简便的CSS选择器
var elements = document.querySelectorAll('#menu a');
重绘与重排
在《CSS动画与JavaScript动画》中层提到过页面渲染的一般过程为JavaScript >计算样式>布局>绘制>渲染层合并。