了解DocumentFragment 给我们带来的性能优化
首先我们需要了解 DocumentFragment 是什么?
w3c 上面的详细解释:link here
我把关键点写下来了:
DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。
不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作
同时我们了解到当需要对页面DOM进行操作的时候必然会导致多次 重绘、回流(什么是重绘,回流?)。这样会加大页面的负担。影响页面性能。因此我们可以创建这样一个临时占位符。进行操作以下是DEMO:
// Create the fragment var fragment = document.createDocumentFragment(); //add DOM to fragment for(var i = 0; i < 10; i++) { var spanNode = document.createElement("span"); spanNode.innerHTML = "number:" + i; fragment.appendChild(spanNode); } //add this DOM to body document.body.appendChild(spanNode);
同时我觉得这里我们还可以进行衍生:比如我要获取一个已知src的img的宽度和高度。如何做呢?
这里我就不引用DocumentFragment(这个应用场景没有必要)。
var img = new Image(); img.onload = function() { alert(this.width + 'x' + this.height);
img = null;
}
img.src = 'http://images.blogjava.net/blogjava_net/bearrui/8_1.jpg';
这样我们就可以获得图片的宽度和高度了。他们的原理都是一样的即引入一个缓存dom来临时存储。
同时大家要注意一个问题。我之前发现有个问题 即我把 img.src = 'http://images.blogjava.net/blogjava_net/bearrui/8_1.jpg';放到onload 方法上面在ie下面就会有问题。当有img缓存的情况下onload不会触发?为啥呢? 在IE浏览器下面不会像其他浏览器下面 那样检测缓冲区是否已经有此图片,有的话直接就触发此事件。这个需要注意