js创建多条数据,插入到页面中的方法。

方法一:

执行时间大概在35ms左右。

这个就属于使用字符串拼接之后,再一次性的插入到页面中。缺点是,容易导致事件难以绑定。

方法二:

执行时间不定,最少的在80ms左右,做多的达到了180ms左右。

这个方法是创建文档碎片保存需要插入的节点,然后一次性插入到页面中。

方法三:

执行时间基本维持在80ms左右。

这个方法就是每次创建节点之后,就立即插入到页面中,会频繁导致页面的reflow和repaint。不建议使用该方法进行DOM读写。

使用jquery创建文档碎片的时候,方法类似于js创建,需要将jquery对象转为DOM对象,再进行操做。

居然需要300多毫秒。

js创建元素的更多相关文章

  1. JS 创建元素的三种方法

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"> ...

  2. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

  3. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  4. js,javascript,删除元素,创建元素,插入子元素

    删除元素示例代码 <html> <head> </head> <body> <div> <div id="delId&quo ...

  5. js创建与追加元素

    用javascript创建元素 : var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 ins ...

  6. JS动态创建元素

    动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...

  7. JS动态创建元素(两种方法)

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  8. js中改变文档的层次结构(创建元素节点,添加结点,插入子节点,取代子节点,删除子节点)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

随机推荐

  1. DFS POJ 2676 Sudoku

    题目传送门 题意:数独问题,每行每列以及每块都有1~9的数字 分析:一个一个遍历会很慢.先将0的位子用vector存起来,然后用rflag[i][num] = 1 / 0表示在第i行数字num是否出现 ...

  2. ural 1245. Pictures

    1245. Pictures Time limit: 1.0 secondMemory limit: 64 MB Artist Ivanov (not the famous Ivanov who pa ...

  3. emacs yasnippet

    首先安装emacs 然后下载yasnippet-bundle-0.6.1c.el.tgz解压 在~/.emacs.d/文件夹下新建一个文件plug,一般是新建一个plugins但是我到下面有这个文件夹 ...

  4. BZOJ1409 : Password

    $f[n]\bmod q=p^{Fib[n]}\bmod q=p^{Fib[n]\bmod\varphi(q)}\bmod q$ 首先线性筛预处理出所有素数,然后对于每次询问,求出$\varphi(q ...

  5. POJ 2117 (割点+连通分量)

    题目链接: http://poj.org/problem?id=2117 题目大意:在一个非连通图中,求一个切除图中任意一个割点方案,使得图中连通分量数最大. 解题思路: 一个大陷阱,m可以等于0,这 ...

  6. CC150 - 11.2

    Question: Write a method to sort an array of strings so that all the anagrams are next to each other ...

  7. 【BZOJ】1055: [HAOI2008]玩具取名(dp)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1055 我竟然都没往dp这个方向想.....百度了下看到标题是dp马上就会转移了QAQ... 设d[i ...

  8. Linux下PS命令详解

    要对系统中进程进行监测控制,查看状态,内存,CPU的使用情况,使用命令:/bin/ps (1)         ps :是显示瞬间进程的状态,并不动态连续: (2)         top:如果想对进 ...

  9. Qt SizePolicy 属性

    控件的sizePolicy说明控件在布局管理中的缩放方式.Qt提供的控件都有一个合理的缺省sizePolicy,但是这个缺省值有时不能适合 所有的布局,开发人员经常需要改变窗体上的某些控件的sizeP ...

  10. Qt make clickable label 制作可点击的Label控件

    Qt中的Label标签控件的作用绝不仅仅限于显示静态文本,其实它的功能很强大,由于其有setPixmap()成员函数,故而可以当显示图片窗口使用,而且还可以实时显示摄像头捕获的图片,然后它对鼠标事件的 ...