目测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. AngularJS XMLHttpRequest

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 读取 JSON 文件 下是存储在web服务器上的 JSON 文件: { "records": [ ...

  2. 深入C#数据类型

    一:值类型与引用类型 值类型源于System.ValueType家族,值类型包括基本数据类型,结构类型和枚举类型. 值类型:在栈上储存的真实的值. 引用类型源于System.Object家族,在C#中 ...

  3. Extjs API - JS Duck

    1. 安裝JS Duck3  tar.gz版本 https://nodeload.github.com/senchalabs/jsduck/tarball/master  exe版本 http://c ...

  4. BZOJ 1408: [Noi2002]Robot

    1408: [Noi2002]Robot Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 510  Solved: 344[Submit][Status][ ...

  5. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  6. php的一些小细节

    1.今天看见 $arr3 = array_filter($arr, create_function('$v', 'return strlen($v);')); 作用就是去掉为空的元素,其实当callb ...

  7. 关于在线预览word,excel,ppt,pdf的需求处理方法。

    参考文档:http://www.cnblogs.com/wolf-sun/p/3574278.html 我选用的方案:先用office com组件生成pdf,然后使用pdf.js在线预览pdf文档.在 ...

  8. Html5 Egret游戏开发 成语大挑战（一）开篇

    最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...

  9. TinyFrame尾篇：整合Spring AOP实现用户认证

    创建Manager用户验证表 这一篇主要讲解使用AOP对用户操作进行验证,如果通过验证,则继续执行,反之,则不能执行.其思想和上一篇完全一致. 由于需要用到用户认证,所以我们新建一个Manager实体 ...

  10. opencv2-新特性及Mat

    本文参照<opencv_2.4.9tutorial>的core部分完成.因为功力还不足以学习侯捷那种大师一样去深入浅出的解析opencv的源码,也只能先学会怎么用opencv,然后实在觉得 ...