目测innerHTML比appendChild好了3到4倍， 但是界面渲染还是很慢啊；

　 chrome结果

            /**

             *chrome浏览器;

             *               innerHTML appendChild

             * 1千条的情况下：3MS       11MS

             * 1万条的情况下：25MS(14MS)      111MS(52MS)

             * 10万的情况下：276MS(145MS)      672MS(480S)

             * 100万界面卡死了

             * */

　

　　FF火狐浏览器,电脑没卡死，太好了，chrome果然是内存大户啊：

             /**

             *FF浏览器;

             *               innerHTML appendChild

             * 1千条的情况下：3MS       6MS

             * 1万条的情况下：20MS      74MS

             * 10万的情况下：194MS      690MS

             * 100万没有全部显示， 显示到了50万就没有了

             * */

　　IE浏览器下差别好大啊：

            /**

             *IE浏览器(IE8):

             *               innerHTML appendChild

             * 1千条的情况下：15MS       969MS

             * 1万条的情况下：74MS      830MS

             * 10万的情况下：706MS      9762MS

             * 100万界面卡死了

             * */

              /**

             *IE浏览器(IE11):

             *               innerHTML appendChild

             * 1千条的情况下：6MS       106MS

             * 1万条的情况下：92MS      8716MS

             * 10万界面卡死了

             * */

　　直接点击就可以运行哦, 怎么测试才是对的，感觉不对啊；

<html>

    <head>

        <meta charset="utf-8"/>

    </head>

    <script src="p.js"></script>

    <body>

        <ul id="ul0">

        </ul>

        <ul id="ul1">

        </ul>

        <script>

            window.onload = function() {

                var liTpl = "<li>{{i}}</li>";

                var ul0 = document.getElementById("ul0");

                var ul1 = document.getElementById("ul1");

                var len = 10000;

                var str = "";

                var d = new Duration();

                d.start("循环使用的时间");

                for(var i=0; i< len; i++) {

                };

                d.end();

                var loopTimes = d.print();

                var d = new Duration("使用innerHTML");

                for(var i=0; i< len; i++) {

                    str += liTpl.replace(/{{i}}/g,i);

                };

                d.start();

                ul0.innerHTML = str;

                d.end();

                d.print();

                var d = new Duration("使用appendChild");

                d.start();

                for(var i=0; i< len; i++) {

                    var li = document.createElement("li");

                    li.innerHTML = i;

                    ul0.appendChild( li );

                };

                d.end();

                d.print();

            }

         </script>

        <script>

            var P = (function(prototype, ownProperty, undefined) {

                return function P(_superclass /* = Object */, definition) {

                    // handle the case where no superclass is given

                    if (definition === undefined) {

                        definition = _superclass;

                        _superclass = Object;

                    }

                    // C is the class to be returned.

                    //

                    // When called, creates and initializes an instance of C, unless

                    // `this` is already an instance of C, then just initializes `this`;

                    // either way, returns the instance of C that was initialized.

                    //

                    //  TODO: the Chrome inspector shows all created objects as `C`

                    //        rather than `Object`.  Setting the .name property seems to

                    //        have no effect.  Is there a way to override this behavior?

                    function C() {

                        var self = this instanceof C ? this : new Bare;

                        self.init.apply(self, arguments);

                        return self;

                    }

                    // C.Bare is a class with a noop constructor.  Its prototype will be

                    // the same as C, so that instances of C.Bare are instances of C.

                    // `new MyClass.Bare` then creates new instances of C without

                    // calling .init().

                    function Bare() {}

                    C.Bare = Bare;

                    // Extend the prototype chain: first use Bare to create an

                    // uninitialized instance of the superclass, then set up Bare

                    // to create instances of this class.

                    var _super = Bare[prototype] = _superclass[prototype];

                    var proto = Bare[prototype] = C[prototype] = C.p = new Bare;

                    // pre-declaring the iteration variable for the loop below to save

                    // a `var` keyword after minification

                    var key;

                    // set the constructor property on the prototype, for convenience

                    proto.constructor = C;

                    C.extend = function(def) { return P(C, def); }

                    return (C.open = function(def) {

                        if (typeof def === 'function') {

                            // call the defining function with all the arguments you need

                            // extensions captures the return value.

                            def = def.call(C, proto, _super, C, _superclass);

                        }

                        // ...and extend it

                        if (typeof def === 'object') {

                            for (key in def) {

                                if (ownProperty.call(def, key)) {

                                    proto[key] = def[key];

                                }

                            }

                        }

                        // if no init, assume we're inheriting from a non-Pjs class, so

                        // default to using the superclass constructor.

                        if (!('init' in proto)) proto.init = _superclass;

                        return C;

                    })(definition);

                }

                // as a minifier optimization, we've closured in a few helper functions

                // and the string 'prototype' (C[p] is much shorter than C.prototype)

            })('prototype', ({}).hasOwnProperty);

        </script>

        <script>

            "use strict";

            var Duration = P(function(dur) {

                dur.init = function(str) {

                    this.str = str;

                }

                dur.start = function() {

                    this.times = (new Date).valueOf();

                };

                dur.end = function() {

                    this.usedTimes = (new Date).valueOf() - this.times;

                };

                dur.print = function() {

                    var oDiv = document.createElement("div");

                    var bodyDiv = document.createElement("div");

                    oDiv.innerHTML = this.str;

                    bodyDiv.innerHTML = this.usedTimes + "MS";

                    document.body.appendChild( oDiv );

                    document.body.appendChild( bodyDiv );

                };

            });

        </script>

    </body>

</html>

作者： NONO
出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

innerHTML和appendChild的性能的更多相关文章

  1. innerHTML与appendChild(newnodeText)的区别

    innerHTML和createTextNode都可以把一段内容添加到一个节点中,区别是如果这段内容中有html标签时表现就不同了,在createTextNode中会当作文本处理,不会被浏览器解析,但 ...

  2. 深入理解javascript描述元素内容的5个属性

    × 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i& ...

  3. append()、appendChild() 和 innerHTML 的区别

    概念和区别:append() 可以同时传入多个节点或字符串,没有返回值: 据说 append 还是试用期的方法,有兼容问题,(但我用了暂时火狐,谷歌,iE都能使用). https://develope ...

  4. JS性能优化 之 文档片段 createDocumentFragment

    我们用原生JS进行开发时,经常会用到两种更新DOM节点的方法:innerHTML 和 appendChild() .其中 innerHTML 会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的 ...

  5. console.time 简单分析javascript动态加入Dom节点的性能

    Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...

  6. 【性能优化】404- 从 12.67s到1.06s 性能优化实战

    作者:jerryOnlyZRJ 来源:https://juejin.im/post/5b6fa8c86fb9a0099910ac91 本文是对之前同名文章的修正,将所有webpack3的内容更新为we ...

  7. Javascript实践技巧

    最近辞职了,准备北上.期待有个好结果~   本文以<Javascript高级程序设计>为基础,结合自身经验来总结下Javascript实际工作方面的知识.   一.可维护性 1.代码约定 ...

  8. js原生dom方法总结

    1.document document方法getElementById (Node)返回指定节点的引用getElementsByTagName (NodeList)返回文档中所有匹配元素的集合quer ...

  9. oneuijs/You-Dont-Need-jQuery

    oneuijs/You-Dont-Need-jQuery  https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh- ...

随机推荐

  1. Integer & int & == & equals

    int 是基本类型,直接存数值,integer是对象,用一个引用指向这个对象 int 是基本数据类型,Integer是类 int类的变量初始为0,Integer的变量则初始化为null. 如果只是用来 ...

  2. angular留言板

    今天使用angularJs写了一个留言板,简单的享受了下angular处理数据的双向绑定的方便:注释已经都写到行间了 <!DOCTYPE html> <html lang=" ...

  3. Linux下误删除后的恢复操作（ext3/ext4）

    Linux是作为一个多用户.多任务的操作系统,文件一旦被删除是难以恢复的.尽管删除命令只是在文件节点中作删除标记,并不真正清除文件内容,但是其他用户和一些有写盘动作的进程会很快覆盖这些数据.在日常工程 ...

  4. Openvpn 公网访问内网

    对于需要从公网访问内网的情况, 需要做如下配置 从公网到内网 除了设置net.ipv4.ip_forward = 1 以外, 还需要设置iptables, 增加两行forward # Generate ...

  5. iis7 运行 php5.5 的方法

    首先添加IIS. 控制面板-〉程序-〉打开或关闭Windows功能 1. 勾选“Internet 信息服务”   2. 勾选“IIS 管理控制台” Internet 信息服务-〉Web 管理工具   ...

  6. Hadoop: MapReduce2多个job串行处理

    复杂的MapReduce处理中,往往需要将复杂的处理过程,分解成多个简单的Job来执行,第1个Job的输出做为第2个Job的输入,相互之间有一定依赖关系.以上一篇中的求平均数为例,可以分解成三个步骤: ...

  7. MYSQL查询优化

    目前手头有个查询: SELECT LPP.learning_project_pupilID, SL.serviceID, MAX(LPPO.start_date), SUM(LPPOT.license ...

  8. Expression Blend4经验分享：制作一个简单的图片按钮样式

    这次分享如何做一个简单的图片按钮经验 在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮 http://raimon.6.gwidc.com/Iphone/de ...

  9. href的那些事

    很多网站中都会使用<a>标签和 href属性来做链接,尤其在分页显示中用得最普遍.然而很多人对href的使用却并不十分了解. 1.href="#" 这个在网页中上滚回顶 ...

  10. 关于base64编码的原理和实现

    在前文 Data URI 应用场景小结 中我们提到了一个概念,叫做 base64编码,今天我们就来聊聊 base64编码,揭开它的神秘面纱. 一句话解释:Base64是一种基于64个可打印字符来表示二 ...