择要
想轻微体系的说说关于DOM的操纵,把Javascript和jQuery经常运用操纵DOM的内容归结成头脑导图轻易浏览,同时到场机能上的一些题目.
媒介
在前端开辟的历程当中,javascript极为重要的一个功用就是对DOM对象的操纵,不管增编削查在前端页面操纵这一局限内都是比较斲丧机能的.怎样高效率的,便利的操纵DOM,这就是本文要报告的.愿望看完整文,你能晓得怎样更高效的经由历程原生js以及jQuery操纵DOM元素.
操纵DOM
这里我愿望引见的相对体系一点,而不是东一句西一句,所以把Javascript和jQuery经常运用操纵DOM的内容归结成头脑导图轻易浏览.这里就总结出最基本最经常运用的DOM操纵.
Javascript:
jQuery:
上面的头脑导图分别是javascript和jQuery下操纵DOM的一些经常运用Function,并不完整我仅仅列出相对经常运用的.这里我比较引荐的是jQuery的操纵体式格局,越发便利的同时在机能上也相对有所保证.
机能影响
DOM操纵会致使最重要的,也是我们最须要的题目就是致运用户壅塞的重构(reflow)和重绘(repaint).比较浅显的一句话就是你在页面上的任何操纵都是有价值的,有些大有些小,假如我们的操纵比较频仍或许涉及局限较大,那末就要考究体式格局和技能.reflow和repaint就是我们在转变页面或许说操纵DOM时,会带来的两种效果.
reflow意味着构造的转变,比方一堆元素堆叠,转变个中一个的宽高,那末响应的一切元素的位置都要转变.repaint意味着款式的转变比方div调整了背景色等,然则位置稳定,只转变我们操纵的元素.所以一般来看repaint的价值要远小于reflow,速率也更快.
影响机能的要素我们已晓得了,那末下面看一下怎样防止.
更有用的操纵
最重要的看法:既然任何DOM操纵都有价值,那末最好就是不操纵或许起码的操纵DOM.所以起首记着一个准绳,将DOM操纵只管少!这里有我以为重要的4个准绳,记下来足以敷衍大多数状况.
(1) 能放到DOM操纵以外的操纵就放到表面,DOM操纵要只管少.
DOM操纵优化中这一看法在网上已很提高了,许多例子都有比方遍历一个数组然后逐步把内容增加到DOM上,这里就引荐先遍历完数组,然后一次性在DOM上操纵.人人能够看代码:
// 不好的做法
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i));
list.appendChild(item);
}
// 更好的做法
// 运用容器寄存暂时变动， 末了再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i));
fragment.appendChild(item);
}
list.appendChild(fragment);
(2) 大局限操纵先把容器隐蔽,在个中操纵完成后,再显现.
这是一个我刚打仗前端时碰到的一个优化方法,当时很不明白为何display=none以后操纵就算是机能优化了.然则数据证实云云衬着确切快了许多,这个的道理要涉及到浏览器加载和衬着的道理,简单说就是隐蔽的元素个中不会发生reflow.这个例子我就不写了,很简单.
(3) 款式操纵不要注重修正属性,直接替代class
这个照样比较轻易明白的,你一一修正要接见许屡次,而替代class就相当于批量操纵了,接见一次DOM就能够了,固然机能提高了.
(4) 用变量保留DOM对象而不是屡次猎取,同时削减操纵DOM属性的次数.
//不好
function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement('a');
parentElement.appendChild(element);
element.innerHTML = anchorText;
element.className = anchorClass;
}
//更好
function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement('a');
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);
}总结
说到这里DOM的操纵就差不多了,实在没有什么太新颖的内容只是做了一个体系点总结.关于机能这部份要日常平凡积聚这个认识,由于大多数时刻它在开辟历程当中表现的并不显著.本文另有许多不足,愿望人人留言沟通吧.
注：第四点中两种体式格局实行历程的不同之处
比方：假如想一想到场一个a标签,标签有class和内容.假如第一种体式格局,你是先将节点到场到DOM树中然后增加内容和class,就是一个先reflow再repaint的历程.假如你先为节点在DOM对象变量的状态下就加好class和内容,再appendChild,就只有一个reflow的历程.天然机能更好.
