方案三:一次性的DOM元素生成
这个方案让我们创建一个元素的过程只触发一次重解析。在创建完元素以后,先进行所有需要的修改,最后才把它插入到DOM里面去就可以了
需求:
需求是这样的,实现一个函数,往一个指定的父元素上插入一个超链接元素。这个函数要同时可以设置这个超链接的显示文字和样式类。我们可以这样做:创 建元素,插入到DOM里面,然后设置相应的属性。这就要触发3次重解析。
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); }
不过,要是我们想要插入很多个超链接到一个元素里面的话,那么这个做法还是有问题:每插入一个超链接还是要触发一次重解析。下一个方案可以解决这个 问题。
出处:emu in blogjava
责任编辑:bluehearts
上一页 加速Javascript:DOM操作优化 [2] 下一页 加速Javascript:DOM操作优化 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|