用脚本访问DOM代价很昂贵,它是富Web应用中常见的性能瓶颈。比如,修改DOM的样式会导致页面的重排或重绘,
Js访问dom就是慢,
因为在浏览器实现中,js是一个引擎,dom是一个与语言无关的东西,由别一个引擎在做
IE js 由jscript.dll实现 JScript dom由 mshtml.dll实现, 也称Trident
Fiefox js 由TraceSpider实现 dom由gecko
chrome js 由v8实现 dom由webCore实现
所以js对dom的操作,其实是基于接口的编程,当然就会慢,访问另一个东西的接口,必然有性能开销。书上的比喻将两都说成两个小岛,每次操作都要往返于两个小岛,那就要走过桥梁,很形象。
就此要尽量减少访问dom次数,
比如常见的循环中,多次访问dom操作,是个错误,应该将计算放在js中,
for(var i = 0;i<1000;i++) {
document.getElementById('here').innerHTML += 'a';
}
应改为
var str = '';
for(var i = 0;i<1000;i++) {
str += 'a';
}
document.getElementById('here').innerHTML = str;
innerHTML 比dom 原生方法
在速度上 ie等老浏览器中 innerHTML 比dom 快3倍以上,现代浏览器相反.建议用数组来合并大量字符串