[JavaScript]使用document.createDocumentFragment优化性能

如果对客户端动态交互要求比较高，在DOM里需要频繁动态增加元素，那么可能会遇到性能问题，那么就有可能用到DocumentFragment了，具体看看下面的例子，性能差别还是挺大的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

function fastAdd(){
            var oFragmeng = document.createDocumentFragment();  //创建文档碎片
            for (var i = 0; i < 10000; i++) {
                var op = document.createElement("span");
                var oText = document.createTextNode(i);
                op.appendChild(oText);
                oFragmeng.appendChild(op);
            }
            document.body.appendChild(oFragmeng); //最后一次性添加到document中
        }
    </script>

</head>
<body>

    <p>
        <input id="Button1" type="button" value="button" onclick = "slowAdd()"/></p>
    <p>
        <input id="Button2" type="button" value="button"  onclick = "fastAdd()"/></p>

</body>
</html>

参考资源:http://www.cssrain.cn/article.asp?id=1421

转载于:https://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html

[JavaScript]使用document.createDocumentFragment优化性能相关推荐

JS性能优化之文档碎片-document.createDocumentFragment
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新 ...
JavaScript 总结几个提高性能知识点
前段时间花时间看了大半的<High Performance JavaScript>这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了.由于空不出时间,这个月写的学习笔记也不多,忙完最 ...
加速Javascript：DOM操作优化
原文:<Speeding up JavaScript: Working with the DOM> 作者: KeeKim Heng, Google Web Developer 在我们开发互 ...
document.createDocumentFragment 以及创建节点速度比较
document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象. Docum ...
前端不哭！最新优化性能经验分享来啦 | 技术头条
作者 | Dimitris Kiriakakis 译者 | 风车云马编辑 | Jane 出品 | Python大本营(id:pythonnews) [导语]Angular.React.VueJS 是 ...
硬件加速下webview切换闪屏_网页渲染性能优化 —— 性能优化下
博客有更多精品文章哟. Composite 的优化终于,我们到了像素管道的末尾.对于这一部分的优化策略,我们可以从为什么需要 Composited Layer(Graphics Layer)来入手 ...
JavaScript 事件对内存和性能的影响
程序代码: <%--Created by IntelliJ IDEA.User: 乔克叔叔Date: 2017/12/26Time: 16:45To change this template u ...
[转帖]ASP.NET中常用的优化性能的方法
ASP.NET中常用的优化性能的方法(转贴,Icyer收集整理) 1. 数据库访问性能优化数据库的连接和关闭访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要 ...
c mysql批量插入优化_MySQL实现批量插入以优化性能的教程
这篇文章主要介绍了MySQL实现批量插入以优化性能的教程,文中给出了运行时间来表示性能优化后的对比,需要的朋友可以参考下对于一些数据量较大的系统,数据库面临的问题除了查询效率低下,还有就是数据入库时 ...

[JavaScript]使用document.createDocumentFragment优化性能

[JavaScript]使用document.createDocumentFragment优化性能相关推荐

最新文章

热门文章